react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.31

package/components/Checkbox/Checkbox.tsx

@@ -1,124 +1,161 @@
-import { forwardRef, memo, useCallback, useMemo } from 'react';
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
+import { forwardRef, memo, useCallback, useContext, useId, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Text } from '../Text';
 import CheckboxBase from './CheckboxBase';
-import type { CheckBoxBaseProps, States } from './types';
-import { styles } from './utils';
-
-export type Props = CheckBoxBaseProps;
+import { CheckboxItemContext } from './context';
+import type { CheckboxLabelProps, CheckboxProps, CheckboxRowProps } from './types';
+import { checkboxRowStyles } from './utils';
 
+/**
+ * The checkbox control (the box). Use inside a CheckboxRow, or standalone with `value`/`onChange`.
+ */
 const Checkbox = (
     {
         value: valueProp,
-        onChange: onChangeProp,
         defaultValue,
-        disabled,
+        onChange: onChangeProp,
         indeterminate,
-        label,
-        labelStyle,
-        containerStyle,
-        labelProps,
-        position = 'leading',
-        accessibilityLabel: accessibilityLabelProp,
+        disabled: disabledProp,
+        size: sizeProp,
         testID,
-        size = 'md',
-        style: styleProp,
         ...rest
-    }: Props,
+    }: CheckboxProps,
     ref: any,
 ) => {
-    const [value, onChange] = useControlledValue({
+    const item = useContext(CheckboxItemContext);
+
+    const [value, setValue] = useControlledValue({
         value: valueProp,
-        onChange: onChangeProp,
         defaultValue,
-        disabled: disabled,
+        onChange: onChangeProp,
+        disabled: disabledProp,
     });
 
-    // Prepare label-related state and styles (always compute, even if not used)
-    const isLeading = position === 'leading';
-    const checked = Boolean(value) && !indeterminate;
-    const state = resolveStateVariant({ disabled: Boolean(disabled), checked });
-    const accessibilityLabel = accessibilityLabelProp ?? label;
-
-    // Use variants only when label is provided
-    if (label) {
-        styles.useVariants({
-            variant: 'item',
-            // @ts-ignore // TODO - fix this
-            state: state as States,
-            isLeading,
-            size,
-        });
-    }
+    // Inside a CheckboxRow the item context drives state; standalone (bare) mode owns its own.
+    const checked = item ? item.checked : Boolean(value);
+    const disabled = disabledProp ?? item?.disabled;
+    const isIndeterminate = item ? item.indeterminate : indeterminate;
+    const size = sizeProp ?? item?.size ?? 'md';
+    const labelId = item?.labelId;
 
-    const { containerStyles, labelStyles, style } = useMemo(() => {
-        return {
-            containerStyles: [styles.itemContainer, containerStyle],
-            labelStyles: [
-                // @ts-ignore
-                styles.label,
-                labelStyle,
-            ],
-            style: [styles.root, styleProp],
-        };
-    }, [containerStyle, labelStyle, styleProp]);
-
-    const onLabelPress = useCallback(() => {
-        if (!disabled) {
-            onChange(!value);
-        }
-    }, [onChange, value, disabled]);
-
-    const accessibilityState = useMemo(
-        () => ({
-            checked: Boolean(value),
-            disabled,
-        }),
-        [disabled, value],
+    const onChange = useCallback(
+        (next: boolean) => {
+            if (item) {
+                item.onToggle();
+            } else {
+                setValue(next);
+            }
+        },
+        [item, setValue],
     );
 
-    const checkboxStyle = label ? style : styleProp;
-    const checkboxAccessibilityLabel = label ? undefined : accessibilityLabelProp;
-
-    const checkbox = (
+    return (
         <CheckboxBase
-            ref={label ? undefined : ref}
-            value={value}
+            {...rest}
+            ref={ref}
+            value={checked}
             onChange={onChange}
+            indeterminate={isIndeterminate}
             disabled={disabled}
-            indeterminate={indeterminate}
             size={size}
-            style={checkboxStyle}
             testID={testID}
-            accessibilityLabel={checkboxAccessibilityLabel}
-            {...rest}
+            accessibilityLabelledBy={labelId}
         />
     );
+};
+
+/**
+ * The label for a CheckboxRow. Pressing it toggles the checkbox, and it is wired to the control via
+ * `nativeID` / `accessibilityLabelledBy` (web `id` / `aria-labelledby`).
+ */
+export const CheckboxLabel = memo(({ children, style, ...rest }: CheckboxLabelProps) => {
+    const item = useContext(CheckboxItemContext);
 
-    if (!label) {
-        return checkbox;
+    const state = resolveStateVariant({
+        disabled: !!item?.disabled,
+        checked: !!item?.checked,
+    });
+
+    checkboxRowStyles.useVariants({ state: state as any });
+
+    if (!item) {
+        return (
+            <Text style={style} {...rest}>
+                {children}
+            </Text>
+        );
     }
 
     return (
-        <View style={containerStyles} ref={ref}>
-            {isLeading && checkbox}
-            <Text
-                onPress={onLabelPress}
-                disabled={disabled}
-                selectable={false}
-                accessibilityLabel={accessibilityLabel}
-                accessibilityRole="checkbox"
-                accessibilityState={accessibilityState}
-                {...labelProps}
-                style={labelStyles}>
-                {label}
-            </Text>
-            {!isLeading && checkbox}
-        </View>
+        <Text
+            nativeID={item.labelId}
+            onPress={item.disabled ? undefined : item.onToggle}
+            disabled={item.disabled}
+            selectable={false}
+            style={[checkboxRowStyles.label, style]}
+            {...rest}>
+            {children}
+        </Text>
     );
-};
+});
+
+CheckboxLabel.displayName = 'Checkbox_Label';
+
+/**
+ * A row that binds checked state to a Checkbox control and its Checkbox.Label. The row itself is not
+ * pressable — only the Checkbox and Checkbox.Label inside it are. Children may be in any order.
+ */
+export const CheckboxRow = memo(
+    forwardRef(
+        (
+            {
+                value: valueProp,
+                defaultValue,
+                onChange,
+                indeterminate,
+                disabled,
+                size,
+                style,
+                children,
+                ...rest
+            }: CheckboxRowProps,
+            ref: any,
+        ) => {
+            const labelId = useId();
+
+            const [value, setValue] = useControlledValue({
+                value: valueProp,
+                defaultValue,
+                onChange,
+                disabled,
+            });
+
+            const checked = Boolean(value);
+
+            const onToggle = useCallback(() => {
+                if (disabled) return;
+                setValue(indeterminate ? true : !checked);
+            }, [disabled, setValue, checked, indeterminate]);
+
+            const contextValue = useMemo(
+                () => ({ checked, onToggle, disabled, indeterminate, size, labelId }),
+                [checked, onToggle, disabled, indeterminate, size, labelId],
+            );
+
+            return (
+                <CheckboxItemContext.Provider value={contextValue}>
+                    <View ref={ref} style={[checkboxRowStyles.row, style]} {...rest}>
+                        {children}
+                    </View>
+                </CheckboxItemContext.Provider>
+            );
+        },
+    ),
+);
+
+CheckboxRow.displayName = 'Checkbox_Row';
 
 export default memo(forwardRef(Checkbox));

package/components/Checkbox/CheckboxBase.ios.tsx

@@ -1,16 +1,13 @@
-import setColor from 'color';
 import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 
 import { resolveStateVariant } from '../../utils';
 import { Icon } from '../Icon';
 import { TouchableRipple } from '../TouchableRipple';
-import type { CheckBoxBaseProps, States } from './types';
+import type { CheckboxBaseProps, States } from './types';
 import { iconSizeMap, styles } from './utils';
 
-export type Props = Omit<CheckBoxBaseProps, 'uncheckedColor' | 'value' | 'defaultValue'> & {
-    value: boolean;
-};
+export type Props = Omit<CheckboxBaseProps, 'uncheckedColor'>;
 
 const CheckboxIOS = (
     {
@@ -37,24 +34,19 @@ const CheckboxIOS = (
         state: state as States,
         size,
     });
+    const checkedColor = colorProp;
 
-    const { checkedColor, iconSize, rippleColor, rippleContainerStyles, iconContainerStyles } =
-        useMemo(() => {
-            const _checkedColor = colorProp;
-
-            return {
-                checkedColor: _checkedColor,
-                iconSize: iconSizeMap[size],
-                rippleColor: setColor(_checkedColor).fade(0.32).rgb().string(),
-                rippleContainerStyles: [styles.root, style],
-                iconContainerStyles: { opacity: indeterminate || checked ? 1 : 0 },
-            };
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [checked, colorProp, indeterminate, style, state, size]);
+    const { rippleContainerStyles, iconContainerStyles } = useMemo(() => {
+        return {
+            rippleContainerStyles: [styles.root, style],
+            iconContainerStyles: { opacity: indeterminate || checked ? 1 : 0 },
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [checked, colorProp, indeterminate, style, state, size, checkedColor]);
 
     const onChange = useCallback(() => {
-        onChangeProp?.(!checked);
-    }, [checked, onChangeProp]);
+        onChangeProp?.(indeterminate ? true : !checked);
+    }, [checked, indeterminate, onChangeProp]);
 
     const icon = indeterminate ? 'minus' : 'check';
 
@@ -62,11 +54,10 @@ const CheckboxIOS = (
         <TouchableRipple
             {...rest}
             borderless
-            rippleColor={rippleColor}
             onPress={onChange}
             disabled={disabled}
             accessibilityRole="checkbox"
-            accessibilityState={{ disabled, checked }}
+            accessibilityState={{ disabled, checked: indeterminate ? false : checked }}
             accessibilityLiveRegion="polite"
             style={rippleContainerStyles}
             testID={testID}
@@ -76,7 +67,7 @@ const CheckboxIOS = (
                     allowFontScaling={false}
                     type="material-community"
                     name={icon}
-                    size={iconSize}
+                    size={iconSizeMap[size]}
                     color={checkedColor}
                 />
             </View>

package/components/Checkbox/CheckboxBase.tsx

@@ -1,15 +1,4 @@
-import setColor from 'color';
-import {
-    forwardRef,
-    memo,
-    type PropsWithoutRef,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-} from 'react';
-import { Animated, Platform, View, type ViewProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
+import { forwardRef, memo, useCallback, useMemo } from 'react';
 
 import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
@@ -17,16 +6,10 @@ import { tokenStylesParser } from '../../utils/tokenStylesParser';
 import { Icon } from '../Icon';
 import { StateLayer } from '../StateLayer';
 import { TouchableRipple } from '../TouchableRipple';
-import type { CheckBoxBaseProps, States } from './types';
+import type { CheckboxBaseProps, States } from './types';
 import { iconSizeMap, styles } from './utils';
 
-export type Props = Omit<CheckBoxBaseProps, 'value' | 'defaultValue'> & {
-    value: boolean;
-    /**
-     * props for the stateLayer
-     */
-    stateLayerProps?: PropsWithoutRef<ViewProps>;
-};
+export type Props = CheckboxBaseProps;
 
 const CheckboxAndroid = (
     {
@@ -44,9 +27,6 @@ const CheckboxAndroid = (
     }: Props,
     ref: any,
 ) => {
-    const { current: scaleAnim } = useRef<Animated.Value>(new Animated.Value(1));
-    const isFirstRendering = useRef<boolean>(true);
-
     const { actionsRef, hovered } = useActionState({ ref, actionsToListen: ['hover'] });
 
     const state = resolveStateVariant({
@@ -63,105 +43,19 @@ const CheckboxAndroid = (
         size,
     });
 
-    // const componentStyles = useComponentStyles('Checkbox', style, {
-    //     variant: 'android',
-    //     state: resolveStateVariant({
-    //         disabled,
-    //         checkedAndHovered: checked && !indeterminate && hovered,
-    //         checked: checked && !indeterminate,
-    //         hovered,
-    //     }),
-    //     size,
-    // });
-
-    const borderWidth = scaleAnim.interpolate({
-        inputRange: [0.8, 1],
-        outputRange: [7, 0],
-    });
-
-    const {
-        iconSize,
-        rippleColor,
-        scale,
-        animationDuration,
-        rippleContainerStyles,
-        filledContainerStyles,
-        animatedContainerStyles,
-        animatedFillStyles,
-        stateLayerStyle,
-        iconStyle,
-    } = useMemo(() => {
-        // const {
-        //     color: checkedColor,
-        //     uncheckedColor,
-        //     animationScale: _scale,
-        //     animationDuration: _animationDuration,
-        //     iconSize: _iconSize,
-        //     padding,
-        //     width,
-        //     height,
-        //     borderRadius,
-        //     ...checkboxStyles
-        //     // @ts-ignore
-        // } = styles.root;
-
+    const { rippleContainerStyles, iconStyle } = useMemo(() => {
         const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
 
         return {
             iconStyle: [styles.icon, _color],
-            iconSize: iconSizeMap[size],
-            // TODO - fix this on web
-            rippleColor:
-                Platform.OS === 'web' ? undefined : setColor(_color).fade(0.32).rgb().string(),
-            checkboxStyle: [styles.root, style],
-            scale: 1,
-            animationDuration: 100,
-            rippleContainerStyles: [styles.root],
-            animatedContainerStyles: { transform: [{ scale: scaleAnim }] },
-            filledContainerStyles: [StyleSheet.absoluteFill, styles.fillContainer],
-            // for toggle animation // This needs to be computed because it's opinionated animation
-            animatedFillStyles: [
-                styles.animatedFill, // 4 because padding - border(which is 1px each side)
-                tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp, 'borderColor'),
-                { borderWidth },
-            ],
-            stateLayerStyle: [styles.stateLayer, stateLayerProps?.style],
+            rippleContainerStyles: [styles.root, style],
         };
-    }, [
-        borderWidth,
-        checked,
-        colorProp,
-        scaleAnim,
-        stateLayerProps?.style,
-        style,
-        uncheckedColorProp,
-        size,
-    ]);
-
-    useEffect(() => {
-        // Do not run animation on very first rendering
-        if (isFirstRendering.current) {
-            isFirstRendering.current = false;
-            return;
-        }
-
-        Animated.sequence([
-            Animated.timing(scaleAnim, {
-                toValue: 0.85,
-                duration: checked ? animationDuration * scale : 0,
-                useNativeDriver: false,
-            }),
-            Animated.timing(scaleAnim, {
-                toValue: 1,
-                duration: checked ? animationDuration * scale : animationDuration * scale * 1.75,
-                useNativeDriver: false,
-            }),
-        ]).start();
-    }, [checked, scaleAnim, scale, animationDuration]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [checked, colorProp, uncheckedColorProp, style, size, state]);
 
     const onChange = useCallback(() => {
-        onChangeProp?.(!checked);
-    }, [checked, onChangeProp]);
+        onChangeProp?.(indeterminate ? true : !checked);
+    }, [checked, indeterminate, onChangeProp]);
 
     const icon = indeterminate
         ? 'minus-box'
@@ -169,13 +63,15 @@ const CheckboxAndroid = (
         ? 'checkbox-marked'
         : 'checkbox-blank-outline';
 
-    const accessibilityState = useMemo(() => ({ disabled, checked }), [checked, disabled]);
+    const accessibilityState = useMemo(
+        () => ({ disabled, checked: indeterminate ? false : checked }),
+        [checked, disabled, indeterminate],
+    );
 
     return (
         <TouchableRipple
             {...rest}
             borderless
-            rippleColor={rippleColor}
             onPress={onChange}
             disabled={disabled}
             accessibilityRole="checkbox"
@@ -185,33 +81,21 @@ const CheckboxAndroid = (
             testID={testID}
             ref={actionsRef}>
             <>
-                <Animated.View style={animatedContainerStyles}>
-                    <Icon
-                        allowFontScaling={false}
-                        type="material-community"
-                        name={icon}
-                        size={iconSize}
-                        style={iconStyle}
-                    />
-                    <View style={filledContainerStyles}>
-                        <Animated.View style={animatedFillStyles} />
-                    </View>
-                </Animated.View>
+                <Icon
+                    allowFontScaling={false}
+                    type="material-community"
+                    name={icon}
+                    size={iconSizeMap[size]}
+                    style={iconStyle}
+                />
                 <StateLayer
                     testID={testID ? `${testID}-stateLayer` : ''}
                     {...stateLayerProps}
-                    style={stateLayerStyle}
+                    style={[styles.stateLayer, stateLayerProps?.style]}
                 />
             </>
         </TouchableRipple>
     );
 };
 
-// const styles = StyleSheet.create({
-//     fillContainer: {
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//     },
-// });
-
 export default memo(forwardRef(CheckboxAndroid));

package/components/Checkbox/context.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+import type { Size } from './types';
+
+export type CheckboxItemContextType = {
+    checked: boolean;
+    onToggle: () => void;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    size?: Size;
+    labelId: string;
+};
+
+export const CheckboxItemContext = createContext<CheckboxItemContextType | null>(null);

package/components/Checkbox/index.tsx

@@ -1,7 +1,14 @@
 import { getRegisteredComponentWithFallback } from '../../core';
-import CheckboxComponent from './Checkbox';
+// @component ./Checkbox.tsx
+import CheckboxBox, { CheckboxLabel, CheckboxRow as CheckboxRowComponent } from './Checkbox';
 
-export const Checkbox = getRegisteredComponentWithFallback('Checkbox', CheckboxComponent);
+const CheckboxDefault = Object.assign(CheckboxBox, {
+    Label: CheckboxLabel,
+    Row: CheckboxRowComponent,
+});
 
-export type { Props as CheckboxProps } from './Checkbox';
-export { styles as checkboxStyles } from './utils';
+export const Checkbox = getRegisteredComponentWithFallback('Checkbox', CheckboxDefault);
+export const CheckboxRow = CheckboxRowComponent;
+
+export type { CheckboxLabelProps, CheckboxProps, CheckboxRowProps } from './types';
+export { checkboxRowStyles, styles as checkboxStyles } from './utils';