ToggleButton styles

src/components/forms/Toggle.tsx

@@ -60,6 +60,10 @@ export type ItemProps = {
   children: ((props: ItemState) => React.ReactNode) | React.ReactNode
 }
 
+export function useItemContext() {
+  return React.useContext(ItemContext)
+}
+
 function Group({
   children,
   values: providedValues,
@@ -228,7 +232,7 @@ function Item({
 
 function Label({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
-  const {disabled} = React.useContext(ItemContext)
+  const {disabled} = useItemContext()
   return (
     <Text
       style={[
@@ -319,8 +323,7 @@ function createSharedToggleStyles({
 
 function Checkbox() {
   const t = useTheme()
-  const {selected, hovered, focused, disabled, hasError} =
-    React.useContext(ItemContext)
+  const {selected, hovered, focused, disabled, hasError} = useItemContext()
   const {baseStyles, baseHoverStyles, indicatorStyles} =
     createSharedToggleStyles({
       theme: t,
@@ -368,8 +371,7 @@ function Checkbox() {
 
 function Switch() {
   const t = useTheme()
-  const {selected, hovered, focused, disabled, hasError} =
-    React.useContext(ItemContext)
+  const {selected, hovered, focused, disabled, hasError} = useItemContext()
   const {baseStyles, baseHoverStyles, indicatorStyles} =
     createSharedToggleStyles({
       theme: t,

src/components/forms/ToggleButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {View, AccessibilityProps} from 'react-native'
+import {View, AccessibilityProps, TextStyle, ViewStyle} from 'react-native'
 
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
@@ -7,6 +7,7 @@ import {Text} from '#/components/Typography'
 import Toggle, {
   GroupProps as BaseGroupProps,
   ItemProps as BaseItemProps,
+  useItemContext,
 } from '#/components/forms/Toggle'
 
 export type ItemProps = Omit<BaseItemProps, 'style' | 'role' | 'children'> &
@@ -36,42 +37,91 @@ export function Group({children, multiple, ...props}: GroupProps) {
 }
 
 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>
-      )}
+      <ButtonInner>{children}</ButtonInner>
     </Toggle.Item>
   )
 }
 
+function ButtonInner({children}: React.PropsWithChildren<{}>) {
+  const t = useTheme()
+  const state = useItemContext()
+
+  const {baseStyles, hoverStyles, activeStyles, textStyles} =
+    React.useMemo(() => {
+      const base: ViewStyle[] = []
+      const hover: ViewStyle[] = []
+      const active: ViewStyle[] = []
+      const text: TextStyle[] = []
+
+      hover.push(t.atoms.bg_contrast_100)
+
+      if (state.selected) {
+        active.push({
+          backgroundColor: t.palette.contrast_800,
+        })
+        text.push(t.atoms.text_inverted)
+        hover.push({
+          backgroundColor: t.palette.contrast_800,
+        })
+
+        if (state.disabled) {
+          active.push({
+            backgroundColor: t.palette.contrast_500,
+          })
+        }
+      }
+
+      if (state.disabled) {
+        base.push({
+          backgroundColor: t.palette.contrast_100,
+        })
+        text.push({
+          opacity: 0.5,
+        })
+      }
+
+      return {
+        baseStyles: base,
+        hoverStyles: hover,
+        activeStyles: active,
+        textStyles: text,
+      }
+    }, [t, state])
+
+  return (
+    <View
+      style={[
+        a.px_lg,
+        a.py_md,
+        t.atoms.bg,
+        t.atoms.border,
+        {
+          borderLeftWidth: 1,
+          marginLeft: -1,
+        },
+        baseStyles,
+        activeStyles,
+        (state.hovered || state.focused || state.pressed) && hoverStyles,
+      ]}>
+      {typeof children === 'string' ? (
+        <Text
+          style={[
+            a.text_center,
+            a.font_bold,
+            t.atoms.text_contrast_500,
+            textStyles,
+          ]}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  )
+}
+
 export default {
   Group,
   Button,

src/view/screens/Storybook/Forms.tsx

@@ -15,6 +15,7 @@ export function Forms() {
   const [toggleGroupAValues, setToggleGroupAValues] = React.useState(['a'])
   const [toggleGroupBValues, setToggleGroupBValues] = React.useState(['a', 'b'])
   const [toggleGroupCValues, setToggleGroupCValues] = React.useState(['a', 'b'])
+  const [toggleGroupDValues, setToggleGroupDValues] = React.useState(['warn'])
 
   return (
     <View style={[a.gap_4xl, a.align_start]}>
@@ -240,8 +241,8 @@ export function Forms() {
 
         <ToggleButton.Group
           label="Preferences"
-          values={['warn']}
-          onChange={e => console.log(e)}>
+          values={toggleGroupDValues}
+          onChange={setToggleGroupDValues}>
           <ToggleButton.Button name="hide" label="Hide">
             Hide
           </ToggleButton.Button>