acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Make Toggle controlled

Browse Source
This commit is contained in:
Eric Bailey
2024-01-17 14:03:00 -06:00
parent f520214738
commit 9a22c39d2b
3 changed files with 168 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/forms/Toggle.tsx
+7 -22
View File
@@ -4,7 +4,6 @@ import {Pressable, PressableProps, View, ViewStyle} from 'react-native'
import {useTheme, atoms as a, web} from '#/alf' import {useTheme, atoms as a, web} from '#/alf'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import {useInteractionState} from '#/components/hooks/useInteractionState' import {useInteractionState} from '#/components/hooks/useInteractionState'
import {StyleProp} from 'react-native'
type ItemState = { type ItemState = {
name: string name: string
@@ -47,7 +46,6 @@ export type GroupProps = React.PropsWithChildren<{
disabled?: boolean disabled?: boolean
onChange: (value: string[]) => void onChange: (value: string[]) => void
label: string label: string
style?: StyleProp<ViewStyle>
}> }>
export type ItemProps = Omit< export type ItemProps = Omit<
@@ -66,22 +64,15 @@ export type ItemProps = Omit<
function Group({ function Group({
children, children,
values: initialValues, values: providedValues,
onChange, onChange,
disabled = false, disabled = false,
type = 'checkbox', type = 'checkbox',
maxSelections, maxSelections,
style,
label, label,
}: GroupProps) { }: GroupProps) {
if (!initialValues) {
throw new Error(`Don't forget to pass in 'values' to your Toggle.Group`)
}
const groupRole = type === 'radio' ? 'radiogroup' : undefined const groupRole = type === 'radio' ? 'radiogroup' : undefined
const [values, setValues] = React.useState<string[]>( const values = type === 'radio' ? providedValues.slice(0, 1) : providedValues
type === 'radio' ? initialValues.slice(0, 1) : initialValues,
)
const [maxReached, setMaxReached] = React.useState(false) const [maxReached, setMaxReached] = React.useState(false)
const setFieldValue = React.useCallback< const setFieldValue = React.useCallback<
@@ -89,21 +80,16 @@ function Group({
>( >(
({name, value}) => { ({name, value}) => {
if (type === 'checkbox') { if (type === 'checkbox') {
setValues(s => { const pruned = values.filter(v => v !== name)
const state = s.filter(v => v !== name) const next = value ? pruned.concat(name) : pruned
return value ? state.concat(name) : state onChange(next)
})
} else { } else {
setValues([name]) onChange([name])
} }
}, },
[type, setValues], [type, onChange, values],
) )
React.useEffect(() => {
onChange(values)
}, [values, onChange])
React.useEffect(() => { React.useEffect(() => {
if (type === 'checkbox') { if (type === 'checkbox') {
if ( if (
@@ -137,7 +123,6 @@ function Group({
<GroupContext.Provider value={context}> <GroupContext.Provider value={context}>
<View <View
role={groupRole} role={groupRole}
style={style} // TODO
{...(groupRole === 'radiogroup' {...(groupRole === 'radiogroup'
? { ? {
'aria-label': label, 'aria-label': label,
src/components/forms/ToggleButton.tsx
+78
View File
@@ -0,0 +1,78 @@
import React from 'react'
import {View, AccessibilityProps} from 'react-native'
import {atoms as a, useTheme} from '#/alf'
import {Text} from '#/components/Typography'
import Toggle, {
GroupProps as BaseGroupProps,
ItemProps as BaseItemProps,
} from '#/components/forms/Toggle'
export type ItemProps = Omit<BaseItemProps, 'style' | 'role' | 'children'> &
AccessibilityProps &
React.PropsWithChildren<{}>
export type GroupProps = Omit<BaseGroupProps, 'style' | 'type'> & {
multiple?: boolean
}
export function Group({children, multiple, ...props}: GroupProps) {
const t = useTheme()
return (
<Toggle.Group type={multiple ? 'checkbox' : 'radio'} {...props}>
<View
style={[
a.flex_row,
a.border,
a.rounded_sm,
a.overflow_hidden,
t.atoms.border,
]}>
{children}
</View>
</Toggle.Group>
)
}
export function Button({children, ...props}: ItemProps) {
const t = useTheme()
return (
<Toggle.Item {...props}>
{state => (
<View
style={[
a.px_lg,
a.py_md,
t.atoms.bg,
t.atoms.border,
{
borderLeftWidth: 1,
marginLeft: -1, // TODO yuck
backgroundColor: state.selected ? t.palette.black : undefined,
},
]}>
{typeof children === 'string' ? (
<Text
style={[
a.text_center,
a.font_bold,
state.selected
? t.atoms.text_inverted
: t.atoms.text_contrast_500,
]}>
{children}
</Text>
) : (
children
)}
</View>
)}
</Toggle.Item>
)
}
export default {
Group,
Button,
}
src/view/screens/Storybook/Forms.tsx
+83 -67
View File
@@ -9,8 +9,11 @@ import {InputGroup} from '#/components/forms/InputGroup'
import {Logo} from '#/view/icons/Logo' import {Logo} from '#/view/icons/Logo'
import Toggle from '#/components/forms/Toggle' import Toggle from '#/components/forms/Toggle'
import ToggleButton from '#/components/forms/ToggleButton' import ToggleButton from '#/components/forms/ToggleButton'
import {Button} from '#/components/Button'
export function Forms() { export function Forms() {
const [toggleGroupValues, setToggleGroupValues] = React.useState(['a'])
return ( return (
<View style={[a.gap_4xl, a.align_start]}> <View style={[a.gap_4xl, a.align_start]}>
<H1>Forms</H1> <H1>Forms</H1>
@@ -135,85 +138,98 @@ export function Forms() {
type="checkbox" type="checkbox"
maxSelections={2} maxSelections={2}
values={['a', 'b']} values={['a', 'b']}
onChange={e => console.log(e)} onChange={e => console.log(e)}>
style={[a.gap_sm]}> <View style={[a.gap_md]}>
<Toggle.Item name="a" label="Click me"> <Toggle.Item name="a" label="Click me">
<Toggle.Checkbox /> <Toggle.Checkbox />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Toggle.Item name="b" label="Click me"> <Toggle.Item name="b" label="Click me">
<Toggle.Checkbox /> <Toggle.Checkbox />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Toggle.Item name="c" label="Click me"> <Toggle.Item name="c" label="Click me">
<Toggle.Checkbox /> <Toggle.Checkbox />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Toggle.Item name="d" disabled label="Click me"> <Toggle.Item name="d" disabled label="Click me">
<Toggle.Checkbox /> <Toggle.Checkbox />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Toggle.Item name="e" hasError label="Click me"> <Toggle.Item name="e" hasError label="Click me">
<Toggle.Checkbox /> <Toggle.Checkbox />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
</View>
</Toggle.Group> </Toggle.Group>
<Toggle.Group <Toggle.Group
label="Toggle" label="Toggle"
type="checkbox" type="checkbox"
maxSelections={2} maxSelections={2}
values={['a']} values={toggleGroupValues}
onChange={e => console.log(e)} onChange={setToggleGroupValues}>
style={[a.gap_sm]}> <View style={[a.gap_md]}>
<Toggle.Item name="a" label="Click me"> <Toggle.Item name="a" label="Click me">
<Toggle.Switch /> <Toggle.Switch />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Toggle.Item name="b" label="Click me"> <Toggle.Item name="b" label="Click me">
<Toggle.Switch /> <Toggle.Switch />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Toggle.Item name="c" label="Click me"> <Toggle.Item name="c" label="Click me">
<Toggle.Switch /> <Toggle.Switch />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Toggle.Item name="d" disabled label="Click me"> <Toggle.Item name="d" disabled label="Click me">
<Toggle.Switch /> <Toggle.Switch />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Toggle.Item name="e" hasError label="Click me"> <Toggle.Item name="e" hasError label="Click me">
<Toggle.Switch /> <Toggle.Switch />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Button
variant="solid"
color="primary"
size="small"
accessibilityLabel="Reset"
accessibilityHint="Reset"
onPress={() => setToggleGroupValues(['a'])}>
Reset
</Button>
</View>
</Toggle.Group> </Toggle.Group>
<Toggle.Group <Toggle.Group
label="Toggle" label="Toggle"
type="radio" type="radio"
values={['a']} values={['a']}
onChange={e => console.log(e)} onChange={e => console.log(e)}>
style={[a.gap_sm]}> <View style={[a.gap_md]}>
<Toggle.Item name="a" label="Click me"> <Toggle.Item name="a" label="Click me">
<Toggle.Radio /> <Toggle.Radio />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Toggle.Item name="b" label="Click me"> <Toggle.Item name="b" label="Click me">
<Toggle.Radio /> <Toggle.Radio />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Toggle.Item name="c" label="Click me"> <Toggle.Item name="c" label="Click me">
<Toggle.Radio /> <Toggle.Radio />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Toggle.Item name="d" disabled label="Click me"> <Toggle.Item name="d" disabled label="Click me">
<Toggle.Radio /> <Toggle.Radio />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
<Toggle.Item name="e" hasError label="Click me"> <Toggle.Item name="e" hasError label="Click me">
<Toggle.Radio /> <Toggle.Radio />
<Toggle.Label>Click me</Toggle.Label> <Toggle.Label>Click me</Toggle.Label>
</Toggle.Item> </Toggle.Item>
</View>
</Toggle.Group> </Toggle.Group>
</View> </View>