react-native-molecules 0.5.0-beta.0

package/components/Switch/Switch.tsx

@@ -0,0 +1,278 @@
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+    Animated,
+    Easing,
+    Pressable,
+    type StyleProp,
+    type SwitchProps,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native';
+
+import { useActionState, useControlledValue, useLatest } from '../../hooks';
+import { resolveStateVariant } from '../../utils';
+import { Icon, type IconType } from '../Icon';
+import { switchStyles, useSwitchColors } from './utils';
+
+export type Props = SwitchProps & {
+    checkedIcon?: string;
+    unCheckedIcon?: string;
+    size?: number;
+    checkedIconType?: IconType;
+    uncheckedIconType?: IconType;
+    thumbStyle?: ViewStyle;
+    thumbContainerStyle?: ViewStyle;
+    switchOverlayStyle?: ViewStyle;
+    iconStyle?: TextStyle;
+};
+
+const MOTION_OVERSHOOT = Easing.bezier(0.175, 0.885, 0.32, 1.275);
+const MIN_SIZE_OFFSET = 0.5;
+const CHECKED_OR_WITH_UNCHECKED_ICON_INITIAL_SIZE_OFFSET = 0.74;
+const MAX_INITIAL_SIZE_OFFSET = 0.88;
+const CHECKED_PRESSED_FINAL_SIZE_OFFSET = 0.81;
+const MIN_FINAL_SIZE_OFFSET = 0.75;
+const UN_CHECKED_INITIAL_MARGIN_OFFSET = 0.04;
+const DEFAULT_INITIAL_MARGIN_OFFSET = 0.2;
+const PRESSED_FINAL_MARGIN_OFFSET = 0.74;
+const DEFAULT_FINAL_MARGIN_OFFSET = 0.75;
+const SWITCH_SIZE_OFFSET = 1.62;
+const SWITCH_BORDER_OFFSET = 0.0625;
+const SWITCH_OVERLAY_SIZE_OFFSET = 1.2;
+const MAX_SIZE_OFFSET = 0.88;
+const DEFAULT_OVERLAY_OFFSET = -0.16;
+const SELECTED_PRESSED_OVERLAY_OFFSET = -0.21;
+const SELECTED_OR_WITH_ICON_OVERLAY_OFFSET = -0.22;
+const WITHOUT_ICON_OVERLAY_OFFSET = -0.36;
+
+const Switch = (
+    {
+        trackColor,
+        size = 32,
+        thumbColor,
+        onValueChange,
+        disabled,
+        value: valueProp,
+        checkedIcon = 'check',
+        unCheckedIcon,
+        style,
+        checkedIconType,
+        uncheckedIconType,
+        thumbStyle: _thumbStyle,
+        thumbContainerStyle: _thumbContainerStyle,
+        switchOverlayStyle: _switchOverlayStyle,
+        iconStyle: _iconStyle,
+        ...rest
+    }: Props,
+    ref: any,
+) => {
+    const { focused, hovered, pressed, actionsRef } = useActionState({
+        ref,
+        actionsToListen: ['focus', 'hover', 'press'],
+    });
+
+    const [value, onChange] = useControlledValue({
+        value: valueProp,
+        onChange: onValueChange as any,
+        defaultValue: !!valueProp,
+        disabled,
+    });
+
+    const switchValueRef = useLatest(value);
+
+    const state = resolveStateVariant({
+        selected_hovered_pressed: !!value && !!hovered && !!pressed,
+        selected_focused_pressed: !!value && !!focused && !!pressed,
+        selected_hovered: !!value && !!hovered,
+        selected_disabled: !!value && !!disabled,
+        selected_pressed: !!value && !!pressed,
+        selected_focused: !!value && !!focused && !!hovered,
+        selected: !!value,
+        hovered_pressed: !!hovered && !!pressed,
+        disabled: !!disabled,
+        hovered: !!hovered,
+        focused: !!focused && !!hovered,
+        pressed: !!pressed,
+    });
+    switchStyles.useVariants({
+        state,
+    });
+
+    const toggleMarginAnimation = useRef(new Animated.Value(value ? 0 : 1)).current;
+    const toggleSizeAnimation = useRef(new Animated.Value(value ? 0 : 1)).current;
+
+    const thumbPosition = toggleMarginAnimation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [
+            !value && pressed && !unCheckedIcon
+                ? 0
+                : unCheckedIcon
+                ? size * UN_CHECKED_INITIAL_MARGIN_OFFSET
+                : size * DEFAULT_INITIAL_MARGIN_OFFSET,
+            pressed ? size * PRESSED_FINAL_MARGIN_OFFSET : size * DEFAULT_FINAL_MARGIN_OFFSET,
+        ],
+    });
+
+    const thumbSize = toggleSizeAnimation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [
+            !value && !pressed && !unCheckedIcon
+                ? size * MIN_SIZE_OFFSET
+                : value || unCheckedIcon
+                ? size * CHECKED_OR_WITH_UNCHECKED_ICON_INITIAL_SIZE_OFFSET
+                : size * MAX_INITIAL_SIZE_OFFSET,
+            pressed && !value
+                ? size
+                : pressed && value
+                ? size * CHECKED_PRESSED_FINAL_SIZE_OFFSET
+                : size * MIN_FINAL_SIZE_OFFSET,
+        ],
+    });
+
+    useEffect(() => {
+        Animated.timing(toggleMarginAnimation, {
+            toValue: value ? 1 : 0,
+            duration: 300,
+            easing: MOTION_OVERSHOOT,
+            useNativeDriver: false,
+        }).start();
+        Animated.timing(toggleSizeAnimation, {
+            toValue: value ? 1 : 0,
+            duration: 250,
+            easing: Easing.ease,
+            useNativeDriver: false,
+        }).start();
+    }, [value, toggleMarginAnimation, toggleSizeAnimation]);
+
+    const thumbOverlay = useMemo(() => {
+        let left = size * DEFAULT_OVERLAY_OFFSET;
+
+        if (value && pressed) {
+            left = size * SELECTED_PRESSED_OVERLAY_OFFSET;
+        } else if (value || unCheckedIcon) {
+            left = size * SELECTED_OR_WITH_ICON_OVERLAY_OFFSET;
+        } else if (!unCheckedIcon && !pressed) {
+            left = size * WITHOUT_ICON_OVERLAY_OFFSET;
+        }
+
+        return {
+            left,
+            height: size * SWITCH_OVERLAY_SIZE_OFFSET,
+            width: size * SWITCH_OVERLAY_SIZE_OFFSET,
+            borderRadius: (size * SWITCH_OVERLAY_SIZE_OFFSET) / 2,
+        };
+    }, [pressed, size, unCheckedIcon, value]);
+
+    const {
+        uncheckedColor: _uncheckedColor,
+        checkedColor: _checkedColor,
+        thumbColor: _thumbColor,
+    } = useSwitchColors(state as any);
+
+    const { switchStyle, thumbContainerStyle, thumbStyle, thumbOverlayStyle, iconStyle } =
+        useMemo(() => {
+            const { switchContainer, thumbContainer, thumb, icon, overlay } = switchStyles;
+
+            const borderWidth = Math.floor(size * SWITCH_BORDER_OFFSET);
+
+            return {
+                switchStyle: [
+                    switchContainer,
+                    {
+                        height: size,
+                        width: size * SWITCH_SIZE_OFFSET,
+                        borderRadius: size / SWITCH_SIZE_OFFSET,
+                        borderWidth: borderWidth <= 1 ? 1 : borderWidth,
+                        backgroundColor: value
+                            ? trackColor?.true || _checkedColor
+                            : trackColor?.false || _uncheckedColor,
+                    },
+                    value && { borderWidth: 0 },
+                    style,
+                ],
+                thumbContainerStyle: [
+                    thumbContainer,
+                    {
+                        height: size,
+                        width: size * SWITCH_SIZE_OFFSET,
+                        borderRadius: size / SWITCH_SIZE_OFFSET,
+                    },
+                    _thumbContainerStyle,
+                ],
+                thumbStyle: [
+                    thumb,
+                    {
+                        marginLeft: thumbPosition,
+                        width: thumbSize,
+                        height: thumbSize,
+                        borderRadius: (size * MAX_SIZE_OFFSET) / 2,
+                        backgroundColor: thumbColor || _thumbColor,
+                    },
+                    !value &&
+                        !unCheckedIcon &&
+                        !pressed && {
+                            borderRadius: (size * MIN_SIZE_OFFSET) / 2,
+                        },
+                    pressed && {
+                        borderRadius: (size * (!value ? 1 : MAX_SIZE_OFFSET)) / 2,
+                    },
+                    _thumbStyle,
+                ],
+                thumbOverlayStyle: [
+                    thumb,
+                    {
+                        marginLeft: thumbPosition,
+                    },
+                    thumbOverlay,
+                    overlay,
+                    _switchOverlayStyle,
+                ],
+                iconStyle: [icon, _iconStyle],
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [
+            state,
+            size,
+            value,
+            trackColor?.true,
+            trackColor?.false,
+            _checkedColor,
+            _uncheckedColor,
+            style,
+            _thumbContainerStyle,
+            thumbPosition,
+            thumbSize,
+            thumbColor,
+            _thumbColor,
+            unCheckedIcon,
+            pressed,
+            _thumbStyle,
+            thumbOverlay,
+            _switchOverlayStyle,
+            _iconStyle,
+        ]);
+
+    const handleValueChange = useCallback(() => {
+        onChange(!switchValueRef.current);
+    }, [onChange, switchValueRef]);
+
+    return (
+        <Pressable ref={actionsRef} style={switchStyle} onPress={handleValueChange} {...rest}>
+            <Animated.View style={thumbContainerStyle as StyleProp<ViewStyle>}>
+                <Animated.View style={thumbStyle}>
+                    {checkedIcon || unCheckedIcon ? (
+                        <Icon
+                            style={iconStyle}
+                            name={(value ? checkedIcon : unCheckedIcon) as string}
+                            size={size * MIN_SIZE_OFFSET}
+                            type={value ? checkedIconType : uncheckedIconType}
+                        />
+                    ) : null}
+                </Animated.View>
+            </Animated.View>
+            <Animated.View style={thumbOverlayStyle} />
+        </Pressable>
+    );
+};
+
+export default memo(forwardRef(Switch));

package/components/Switch/index.tsx

@@ -0,0 +1,11 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import SwitchDefault from './Switch';
+
+registerMoleculesComponents({
+    Switch: SwitchDefault,
+});
+
+export const Switch = getRegisteredComponentWithFallback('Switch', SwitchDefault);
+
+export { type Props as SwitchProps } from './Switch';
+export { switchStyles as defaultSwitchStyles } from './utils';

package/components/Switch/utils.ts

@@ -0,0 +1,283 @@
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+
+import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+
+type States =
+    | 'selected'
+    | 'selected_disabled'
+    | 'selected_pressed'
+    | 'disabled'
+    | 'hovered'
+    | 'focused'
+    | 'pressed'
+    | 'hovered_pressed'
+    | 'selected_hovered'
+    | 'selected_focused'
+    | 'selected_hovered_pressed'
+    | 'selected_focused_pressed';
+
+export const useSwitchColors = (state: States) => {
+    const theme = useUnistyles().theme;
+
+    return (
+        {
+            selected: {
+                thumbColor: theme.colors.onPrimary,
+                checkedColor: theme.colors.primary,
+            },
+            selected_hovered: {
+                thumbColor: theme.colors.primaryContainer,
+                checkedColor: theme.colors.primary,
+            },
+            selected_focused: {
+                thumbColor: theme.colors.primaryContainer,
+                checkedColor: theme.colors.primary,
+            },
+            disabled: {
+                thumbColor: theme.colors.onSurfaceDisabled,
+                uncheckedColor: theme.colors.surfaceContainerHighest,
+            },
+            selected_disabled: {
+                checkedColor: theme.colors.onSurface,
+            },
+            selected_pressed: {
+                thumbColor: theme.colors.primaryContainer,
+                checkedColor: theme.colors.primary,
+            },
+            selected_hovered_pressed: {
+                thumbColor: theme.colors.primaryContainer,
+                checkedColor: theme.colors.primary,
+            },
+            selected_focused_pressed: {
+                thumbColor: theme.colors.primaryContainer,
+                checkedColor: theme.colors.primary,
+            },
+            hovered_pressed: {
+                thumbColor: theme.colors.onSurfaceVariant,
+            },
+            pressed: {
+                thumbColor: theme.colors.onSurfaceVariant,
+            },
+            hovered: {
+                thumbColor: theme.colors.onSurfaceVariant,
+            },
+            focused: {
+                thumbColor: theme.colors.onSurfaceVariant,
+            },
+        }[state] ?? {
+            uncheckedColor: theme.colors.surfaceContainerHighest,
+            checkedColor: theme.colors.primary,
+            thumbColor: theme.colors.outline,
+        }
+    );
+};
+
+const switchStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        ...({
+            uncheckedColor: theme.colors.surfaceContainerHighest,
+            checkedColor: theme.colors.primary,
+            thumbColor: theme.colors.outline,
+        } as any),
+
+        variants: {
+            state: {
+                selected: {
+                    thumbColor: theme.colors.onPrimary,
+                    checkedColor: theme.colors.primary,
+                },
+                selected_hovered: {
+                    thumbColor: theme.colors.primaryContainer,
+                    checkedColor: theme.colors.primary,
+                },
+                selected_focused: {
+                    thumbColor: theme.colors.primaryContainer,
+                    checkedColor: theme.colors.primary,
+                },
+                disabled: {
+                    thumbColor: theme.colors.onSurfaceDisabled,
+                    uncheckedColor: theme.colors.surfaceContainerHighest,
+                },
+                selected_disabled: {
+                    checkedColor: theme.colors.onSurface,
+                },
+                selected_pressed: {
+                    thumbColor: theme.colors.primaryContainer,
+                    checkedColor: theme.colors.primary,
+                },
+                selected_hovered_pressed: {
+                    thumbColor: theme.colors.primaryContainer,
+                    checkedColor: theme.colors.primary,
+                },
+                selected_focused_pressed: {
+                    thumbColor: theme.colors.primaryContainer,
+                    checkedColor: theme.colors.primary,
+                },
+                hovered_pressed: {
+                    thumbColor: theme.colors.onSurfaceVariant,
+                },
+                pressed: {
+                    thumbColor: theme.colors.onSurfaceVariant,
+                },
+                hovered: {
+                    thumbColor: theme.colors.onSurfaceVariant,
+                },
+                focused: {
+                    thumbColor: theme.colors.onSurfaceVariant,
+                },
+            },
+        },
+    },
+
+    switchContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        backgroundColor: theme.colors.surfaceContainerHighest,
+        borderColor: theme.colors.outline,
+
+        variants: {
+            state: {
+                selected: {
+                    borderWidth: 0,
+                },
+                selected_hovered: {
+                    borderWidth: 0,
+                },
+                selected_focused: {
+                    borderWidth: 0,
+                },
+                disabled: {
+                    opacity: 0.2,
+                    borderColor: theme.colors.onSurface,
+                },
+                selected_disabled: {
+                    opacity: 0.2,
+                },
+                selected_pressed: {
+                    borderWidth: 0,
+                },
+                selected_hovered_pressed: {
+                    borderWidth: 0,
+                },
+                selected_focused_pressed: {
+                    borderWidth: 0,
+                },
+                hovered_pressed: {},
+                pressed: {},
+                hovered: {},
+                focused: {},
+            },
+        },
+    },
+
+    thumbContainer: { flexDirection: 'row', alignItems: 'center' },
+
+    overlay: {
+        display: 'none',
+        position: 'absolute',
+        right: 0,
+
+        variants: {
+            state: {
+                selected: {},
+                selected_hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                    display: 'flex',
+                },
+                selected_focused: {
+                    backgroundColor: theme.colors.stateLayer.focussed.primary,
+                    display: 'flex',
+                },
+                disabled: {},
+                selected_disabled: {},
+                selected_pressed: {
+                    backgroundColor: theme.colors.stateLayer.pressed.primary,
+                    display: 'flex',
+                },
+                selected_hovered_pressed: {
+                    backgroundColor: theme.colors.stateLayer.pressed.primary,
+                    display: 'flex',
+                },
+                selected_focused_pressed: {
+                    backgroundColor: theme.colors.stateLayer.pressed.primary,
+                    display: 'flex',
+                },
+                hovered_pressed: {
+                    backgroundColor: theme.colors.stateLayer.pressed.onSurface,
+                    display: 'flex',
+                },
+                pressed: {
+                    backgroundColor: theme.colors.stateLayer.pressed.onSurface,
+                    display: 'flex',
+                },
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                    display: 'flex',
+                },
+                focused: {
+                    backgroundColor: theme.colors.stateLayer.focussed.onSurface,
+                    display: 'flex',
+                },
+            },
+        },
+    },
+
+    thumb: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        elevation: 1.5,
+
+        variants: {
+            state: {
+                disabled: {
+                    // opacity: 0.38,
+                },
+                selected_disabled: {
+                    opacity: 1,
+                },
+            },
+        },
+    },
+
+    icon: {
+        color: theme.colors.surfaceContainerHighest,
+
+        variants: {
+            state: {
+                selected: {
+                    color: theme.colors.onPrimaryContainer,
+                },
+                selected_hovered: {
+                    color: theme.colors.onPrimaryContainer,
+                },
+                selected_focused: {
+                    color: theme.colors.onPrimaryContainer,
+                },
+                disabled: {
+                    color: theme.colors.surfaceContainerHighest,
+                    opacity: 0.38,
+                },
+                selected_disabled: {
+                    color: theme.colors.onSurface,
+                    opacity: 0.38,
+                },
+                selected_pressed: {
+                    color: theme.colors.onPrimaryContainer,
+                },
+                selected_hovered_pressed: {
+                    color: theme.colors.onPrimaryContainer,
+                },
+                selected_focused_pressed: {
+                    color: theme.colors.onPrimaryContainer,
+                },
+            },
+        },
+    },
+}));
+
+registerComponentsStyles({
+    Switch: switchStylesDefault,
+});
+
+export const switchStyles = getRegisteredMoleculesComponentStyles('Switch');