Make Toggle controlled

src/components/forms/Toggle.tsx

@@ -4,7 +4,6 @@ import {Pressable, PressableProps, View, ViewStyle} from 'react-native'
 import {useTheme, atoms as a, web} from '#/alf'
 import {Text} from '#/components/Typography'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {StyleProp} from 'react-native'
 
 type ItemState = {
   name: string
@@ -47,7 +46,6 @@ export type GroupProps = React.PropsWithChildren<{
   disabled?: boolean
   onChange: (value: string[]) => void
   label: string
-  style?: StyleProp<ViewStyle>
 }>
 
 export type ItemProps = Omit<
@@ -66,22 +64,15 @@ export type ItemProps = Omit<
 
 function Group({
   children,
-  values: initialValues,
+  values: providedValues,
   onChange,
   disabled = false,
   type = 'checkbox',
   maxSelections,
-  style,
   label,
 }: GroupProps) {
-  if (!initialValues) {
-    throw new Error(`Don't forget to pass in 'values' to your Toggle.Group`)
-  }
-
   const groupRole = type === 'radio' ? 'radiogroup' : undefined
-  const [values, setValues] = React.useState<string[]>(
-    type === 'radio' ? initialValues.slice(0, 1) : initialValues,
-  )
+  const values = type === 'radio' ? providedValues.slice(0, 1) : providedValues
   const [maxReached, setMaxReached] = React.useState(false)
 
   const setFieldValue = React.useCallback<
@@ -89,21 +80,16 @@ function Group({
   >(
     ({name, value}) => {
       if (type === 'checkbox') {
-        setValues(s => {
-          const state = s.filter(v => v !== name)
-          return value ? state.concat(name) : state
-        })
+        const pruned = values.filter(v => v !== name)
+        const next = value ? pruned.concat(name) : pruned
+        onChange(next)
       } else {
-        setValues([name])
+        onChange([name])
       }
     },
-    [type, setValues],
+    [type, onChange, values],
   )
 
-  React.useEffect(() => {
-    onChange(values)
-  }, [values, onChange])
-
   React.useEffect(() => {
     if (type === 'checkbox') {
       if (
@@ -137,7 +123,6 @@ function Group({
     <GroupContext.Provider value={context}>
       <View
         role={groupRole}
-        style={style} // TODO
         {...(groupRole === 'radiogroup'
           ? {
               'aria-label': label,

src/components/forms/ToggleButton.tsx

@@ -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

@@ -9,8 +9,11 @@ import {InputGroup} from '#/components/forms/InputGroup'
 import {Logo} from '#/view/icons/Logo'
 import Toggle from '#/components/forms/Toggle'
 import ToggleButton from '#/components/forms/ToggleButton'
+import {Button} from '#/components/Button'
 
 export function Forms() {
+  const [toggleGroupValues, setToggleGroupValues] = React.useState(['a'])
+
   return (
     <View style={[a.gap_4xl, a.align_start]}>
       <H1>Forms</H1>
@@ -135,85 +138,98 @@ export function Forms() {
           type="checkbox"
           maxSelections={2}
           values={['a', 'b']}
-          onChange={e => console.log(e)}
-          style={[a.gap_sm]}>
-          <Toggle.Item name="a" label="Click me">
-            <Toggle.Checkbox />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
-          <Toggle.Item name="b" label="Click me">
-            <Toggle.Checkbox />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
-          <Toggle.Item name="c" label="Click me">
-            <Toggle.Checkbox />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
-          <Toggle.Item name="d" disabled label="Click me">
-            <Toggle.Checkbox />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
-          <Toggle.Item name="e" hasError label="Click me">
-            <Toggle.Checkbox />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
+          onChange={e => console.log(e)}>
+          <View style={[a.gap_md]}>
+            <Toggle.Item name="a" label="Click me">
+              <Toggle.Checkbox />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="b" label="Click me">
+              <Toggle.Checkbox />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="c" label="Click me">
+              <Toggle.Checkbox />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="d" disabled label="Click me">
+              <Toggle.Checkbox />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="e" hasError label="Click me">
+              <Toggle.Checkbox />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+          </View>
         </Toggle.Group>
 
         <Toggle.Group
           label="Toggle"
           type="checkbox"
           maxSelections={2}
-          values={['a']}
-          onChange={e => console.log(e)}
-          style={[a.gap_sm]}>
-          <Toggle.Item name="a" label="Click me">
-            <Toggle.Switch />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
-          <Toggle.Item name="b" label="Click me">
-            <Toggle.Switch />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
-          <Toggle.Item name="c" label="Click me">
-            <Toggle.Switch />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
-          <Toggle.Item name="d" disabled label="Click me">
-            <Toggle.Switch />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
-          <Toggle.Item name="e" hasError label="Click me">
-            <Toggle.Switch />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
+          values={toggleGroupValues}
+          onChange={setToggleGroupValues}>
+          <View style={[a.gap_md]}>
+            <Toggle.Item name="a" label="Click me">
+              <Toggle.Switch />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="b" label="Click me">
+              <Toggle.Switch />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="c" label="Click me">
+              <Toggle.Switch />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="d" disabled label="Click me">
+              <Toggle.Switch />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="e" hasError label="Click me">
+              <Toggle.Switch />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+
+            <Button
+              variant="solid"
+              color="primary"
+              size="small"
+              accessibilityLabel="Reset"
+              accessibilityHint="Reset"
+              onPress={() => setToggleGroupValues(['a'])}>
+              Reset
+            </Button>
+          </View>
         </Toggle.Group>
 
         <Toggle.Group
           label="Toggle"
           type="radio"
           values={['a']}
-          onChange={e => console.log(e)}
-          style={[a.gap_sm]}>
-          <Toggle.Item name="a" label="Click me">
-            <Toggle.Radio />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
-          <Toggle.Item name="b" label="Click me">
-            <Toggle.Radio />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
-          <Toggle.Item name="c" label="Click me">
-            <Toggle.Radio />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
-          <Toggle.Item name="d" disabled label="Click me">
-            <Toggle.Radio />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
-          <Toggle.Item name="e" hasError label="Click me">
-            <Toggle.Radio />
-            <Toggle.Label>Click me</Toggle.Label>
-          </Toggle.Item>
+          onChange={e => console.log(e)}>
+          <View style={[a.gap_md]}>
+            <Toggle.Item name="a" label="Click me">
+              <Toggle.Radio />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="b" label="Click me">
+              <Toggle.Radio />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="c" label="Click me">
+              <Toggle.Radio />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="d" disabled label="Click me">
+              <Toggle.Radio />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+            <Toggle.Item name="e" hasError label="Click me">
+              <Toggle.Radio />
+              <Toggle.Label>Click me</Toggle.Label>
+            </Toggle.Item>
+          </View>
         </Toggle.Group>
       </View>