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

package/components/IconButton/utils.ts

@@ -4,6 +4,7 @@ import {
     getRegisteredComponentStylesWithFallback,
     getRegisteredComponentUtilsWithFallback,
 } from './../../core/componentsRegistry';
+import type { IconButtonDefaultProps } from './types';
 
 export type States =
     | 'selectedAndDisabled'
@@ -19,14 +20,31 @@ const iconButtonSizeToIconSizeMapDefault = {
     lg: 26,
 };
 
+const iconButtonConstantsDefault = {
+    minContainerSize: 32,
+    containerPadding: 16,
+    narrowWidthAdjustment: -8,
+    wideWidthAdjustment: 12,
+    squareCornerRadius: 12,
+};
+
+const iconButtonDefaultPropsDefault: IconButtonDefaultProps = {
+    size: 24,
+    variant: 'default',
+    shape: 'round',
+    width: 'default',
+    animated: false,
+};
+
 const iconButtonStylesDefault = StyleSheet.create(theme => ({
     root: {
         borderColor: theme.colors.outline,
-        color: theme.colors.onSurfaceVariant,
         borderRadius: theme.shapes.corner.full,
         overflow: 'hidden',
         borderWidth: 0,
         backgroundColor: 'transparent',
+        justifyContent: 'center',
+        alignItems: 'center',
 
         variants: {
             size: {
@@ -71,16 +89,13 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
 
                 contained: {
                     backgroundColor: theme.colors.surfaceVariant,
-                    color: theme.colors.primary,
                 },
 
                 'contained-tonal': {
                     backgroundColor: theme.colors.surfaceVariant,
-                    color: theme.colors.onSurfaceVariant,
                 },
 
                 outlined: {
-                    color: theme.colors.onSurfaceVariant,
                     borderWidth: 1,
                 },
             },
@@ -90,30 +105,23 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
             {
                 variant: 'default',
                 state: 'selectedAndDisabled',
-                styles: {
-                    color: theme.colors.primary,
-                },
+                styles: {},
             },
             {
                 variant: 'default',
                 state: 'selected',
-                styles: {
-                    color: theme.colors.primary,
-                },
+                styles: {},
             },
             {
                 variant: 'default',
                 state: 'selectedAndHovered',
-                styles: {
-                    color: theme.colors.primary,
-                },
+                styles: {},
             },
             {
                 variant: 'contained',
                 state: 'selectedAndDisabled',
                 styles: {
                     backgroundColor: theme.colors.primary,
-                    color: theme.colors.onPrimary,
                 },
             },
             {
@@ -128,14 +136,13 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selected',
                 styles: {
                     backgroundColor: theme.colors.primary,
-                    color: theme.colors.onPrimary,
                 },
             },
             {
                 variant: 'contained',
                 state: 'selectedAndHovered',
                 styles: {
-                    color: theme.colors.primary,
+                    backgroundColor: theme.colors.primary,
                 },
             },
             {
@@ -143,7 +150,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'hovered',
                 styles: {
                     backgroundColor: theme.colors.primary,
-                    color: theme.colors.onPrimary,
                 },
             },
             {
@@ -151,7 +157,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndDisabled',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -166,7 +171,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selected',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -174,7 +178,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndHovered',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -182,7 +185,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndDisabled',
                 styles: {
                     backgroundColor: theme.colors.inverseSurface,
-                    color: theme.colors.inverseOnSurface,
                     borderWidth: 0,
                 },
             },
@@ -198,7 +200,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selected',
                 styles: {
                     backgroundColor: theme.colors.inverseSurface,
-                    color: theme.colors.inverseOnSurface,
                     borderWidth: 0,
                 },
             },
@@ -207,17 +208,12 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndHovered',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
                 variant: 'outlined',
                 state: 'hovered',
-                styles: {
-                    backgroundColor: theme.colors.inverseSurface,
-                    color: theme.colors.inverseOnSurface,
-                    borderWidth: 0,
-                },
+                styles: {},
             },
         ],
     },
@@ -296,16 +292,146 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 variant: 'outlined',
                 state: 'hovered',
                 styles: {
-                    backgroundColor: theme.colors.stateLayer.hover.inverseOnSurface,
+                    backgroundColor: theme.colors.stateLayer.hover.onSurfaceVariant,
                 },
             },
         ],
     },
 
-    innerContainer: {
-        flexGrow: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
+    icon: {
+        color: theme.colors.onSurfaceVariant,
+
+        variants: {
+            variant: {
+                default: {},
+
+                contained: {
+                    color: theme.colors.primary,
+                },
+
+                'contained-tonal': {
+                    color: theme.colors.onSurfaceVariant,
+                },
+
+                outlined: {
+                    color: theme.colors.onSurfaceVariant,
+                },
+            },
+        },
+
+        compoundVariants: [
+            {
+                variant: 'default',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'default',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'default',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'disabled',
+                styles: {},
+            },
+            {
+                variant: 'contained',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'hovered',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'disabled',
+                styles: {},
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.inverseOnSurface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'disabled',
+                styles: {},
+            },
+            {
+                variant: 'outlined',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.inverseOnSurface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'hovered',
+                styles: {},
+            },
+        ],
     },
 }));
 
@@ -318,3 +444,11 @@ export const iconButtonSizeToIconSizeMap = getRegisteredComponentUtilsWithFallba
     iconButtonSizeToIconSizeMapDefault,
     'iconButtonSizeToIconSizeMap',
 );
+export const iconButtonConstants = {
+    ...iconButtonConstantsDefault,
+    ...getRegisteredComponentUtilsWithFallback('IconButton', {}, 'iconButtonConstants'),
+};
+export const iconButtonDefaultProps: IconButtonDefaultProps = {
+    ...iconButtonDefaultPropsDefault,
+    ...getRegisteredComponentUtilsWithFallback('IconButton', {}, 'iconButtonDefaultProps'),
+};

package/components/List/List.tsx

@@ -0,0 +1,276 @@
+import { useControlledValue, useLatest } from '@react-native-molecules/utils/hooks';
+import { memo, useCallback, useMemo } from 'react';
+import { ScrollView, type StyleProp, type ViewStyle } from 'react-native';
+
+import { typedMemo } from '../../hocs';
+import { useActionState } from '../../hooks';
+import { resolveStateVariant } from '../../utils';
+import { StateLayer } from '../StateLayer';
+import { TouchableRipple } from '../TouchableRipple';
+import { ListContextProvider, useListContextValue } from './context';
+import type {
+    DefaultListItemT,
+    ListContentProps,
+    ListContextValue,
+    ListItemId,
+    ListItemProps,
+    ListProps,
+} from './types';
+import { listItemStyles } from './utils';
+
+const _ListItemBase = ({
+    ref,
+    children,
+    style: styleProp,
+    disabled = false,
+    variant = 'menuItem',
+    selected = false,
+    onPress,
+    hoverable: hoverableProp = false,
+    hovered: hoveredProp = false,
+    ...props
+}: ListItemProps) => {
+    const {
+        hovered: _hovered,
+        focused,
+        actionsRef,
+    } = useActionState({ ref, actionsToListen: ['hover', 'focus'] });
+    const hoverable = hoverableProp || !!onPress;
+    const hovered = hoveredProp || _hovered;
+
+    const state = resolveStateVariant({
+        selectedAndFocused: selected && focused,
+        selected,
+        disabled,
+        hovered: hoverable && hovered,
+        focused,
+    });
+
+    listItemStyles.useVariants({
+        state: state as never,
+        variant: variant as never,
+    });
+
+    const containerStyles = useMemo(
+        () => [listItemStyles.root, styleProp],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [styleProp, state, variant],
+    );
+
+    return (
+        <TouchableRipple
+            {...props}
+            style={containerStyles as StyleProp<ViewStyle>}
+            disabled={disabled}
+            onPress={onPress}
+            ref={actionsRef}>
+            <>
+                {children}
+                <StateLayer style={listItemStyles.stateLayer} />
+            </>
+        </TouchableRipple>
+    );
+};
+
+const ListItemBase = memo(_ListItemBase);
+
+const _ListItemSelectable = <Option extends object = DefaultListItemT>({
+    value,
+    children,
+    onPress,
+    onBeforeToggle,
+    disabled: itemDisabledProp = false,
+    shouldToggleOnPress = true,
+    accessibilityRole,
+    accessibilityState,
+    variant,
+    ...rest
+}: ListItemProps<Option> & { value: ListItemId }) => {
+    const {
+        onAdd,
+        onRemove,
+        disabled: listDisabled,
+        allowDeselect,
+        isSelectedId,
+    } = useListContextValue(state => ({
+        onAdd: state.onAdd as (item: Option) => void,
+        onRemove: state.onRemove as (item: Option) => void,
+        disabled: state.disabled,
+        allowDeselect: state.allowDeselect,
+        isSelectedId: state.isSelectedId,
+    }));
+
+    const option = useMemo(
+        () =>
+            ({
+                id: value,
+                ...(itemDisabledProp ? { selectable: false } : {}),
+            } as Option),
+        [itemDisabledProp, value],
+    );
+
+    const isSelected = isSelectedId(value);
+
+    const isSelectable = (option as Record<string, unknown>).selectable;
+    const isOptionDisabled = Boolean(listDisabled || itemDisabledProp || isSelectable === false);
+
+    const handlePress = useCallback(
+        (
+            event: NonNullable<ListItemProps<Option>['onPress']> extends (event: infer E) => void
+                ? E
+                : never,
+        ) => {
+            if (isOptionDisabled) return;
+            onPress?.(event);
+
+            if (!shouldToggleOnPress) return;
+            onBeforeToggle?.(event);
+
+            if (isSelected) {
+                if (allowDeselect) onRemove(option);
+                return;
+            }
+            onAdd(option);
+        },
+        [
+            allowDeselect,
+            isOptionDisabled,
+            isSelected,
+            onAdd,
+            onBeforeToggle,
+            onPress,
+            onRemove,
+            option,
+            shouldToggleOnPress,
+        ],
+    );
+
+    return (
+        <ListItemBase
+            {...(rest as ListItemProps)}
+            selected={isSelected}
+            disabled={isOptionDisabled}
+            onPress={handlePress}
+            variant={variant ?? 'menuItem'}
+            accessibilityRole={accessibilityRole}
+            accessibilityState={
+                accessibilityState ?? { selected: isSelected, disabled: isOptionDisabled }
+            }>
+            {children}
+        </ListItemBase>
+    );
+};
+
+const ListItemSelectable = typedMemo(_ListItemSelectable);
+
+const _ListItem = <Option extends object = DefaultListItemT>(props: ListItemProps<Option>) => {
+    if (props.value !== undefined) {
+        return <ListItemSelectable {...(props as ListItemProps<Option> & { value: ListItemId })} />;
+    }
+    return <ListItemBase {...(props as ListItemProps)} />;
+};
+
+const ListItem = typedMemo(_ListItem);
+
+type ControlledListValue = ListItemId | ListItemId[] | null;
+
+const emptyArr: ListItemId[] = [];
+
+const ListProvider = typedMemo(
+    <Option extends object = DefaultListItemT>({
+        children,
+        value: valueProp,
+        defaultValue,
+        onChange,
+        multiple = false,
+        disabled = false,
+        error = false,
+        allowDeselect: allowDeselectProp,
+    }: ListProps<Option>) => {
+        const [value, onValueChange] = useControlledValue<ControlledListValue>({
+            value: valueProp,
+            defaultValue: defaultValue ?? (multiple ? (emptyArr as ListItemId[]) : null),
+            onChange: onChange as
+                | ((value: ControlledListValue, item: Option, event?: unknown) => void)
+                | undefined,
+        });
+        const valueRef = useLatest(value);
+
+        const allowDeselect = allowDeselectProp !== undefined ? allowDeselectProp : multiple;
+        const isSelectedId = useCallback(
+            (id: ListItemId) => {
+                if (multiple) {
+                    const values = (value as ListItemId[] | null | undefined) ?? [];
+                    return values.some(v => v === id);
+                }
+                return (value as ListItemId | null) === id;
+            },
+            [multiple, value],
+        );
+
+        const onAdd = useCallback(
+            (item: Option) => {
+                const id = (item as { id?: ListItemId }).id as ListItemId;
+                if (multiple) {
+                    const currentValue = (valueRef.current as ListItemId[]) || [];
+                    if (!currentValue.find(v => v === id)) {
+                        onValueChange([...currentValue, id], item);
+                    }
+                    return;
+                }
+
+                onValueChange(id, item);
+            },
+            [multiple, onValueChange, valueRef],
+        );
+
+        const onRemove = useCallback(
+            (item: Option) => {
+                const id = (item as { id?: ListItemId }).id as ListItemId;
+                if (multiple) {
+                    const currentValue = (valueRef.current as ListItemId[]) || [];
+                    onValueChange(
+                        currentValue.filter(v => v !== id),
+                        item,
+                    );
+                    return;
+                }
+
+                onValueChange(null, item);
+            },
+            [multiple, onValueChange, valueRef],
+        );
+
+        const contextValue = {
+            value,
+            multiple,
+            onAdd: onAdd as (item: DefaultListItemT) => void,
+            onRemove: onRemove as (item: DefaultListItemT) => void,
+            isSelectedId,
+            disabled,
+            error,
+            allowDeselect,
+        } as ListContextValue<DefaultListItemT>;
+
+        return <ListContextProvider value={contextValue}>{children}</ListContextProvider>;
+    },
+);
+
+const ListContent = typedMemo(
+    ({ ref, children, style, ...rest }: ListContentProps & { ref?: React.ForwardedRef<any> }) => {
+        return (
+            <ScrollView style={style} {...rest} ref={ref}>
+                {children}
+            </ScrollView>
+        );
+    },
+);
+
+const List = Object.assign(ListProvider, {
+    Content: ListContent,
+    Item: ListItem,
+});
+
+export default List;
+
+export { ListContent, ListItem, ListProvider };

package/components/List/context.tsx

@@ -0,0 +1,27 @@
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
+
+import { registerPortalContext } from '../Portal';
+import type { DefaultListItemT, ListContextValue } from './types';
+
+const listContextDefaultValue: ListContextValue<DefaultListItemT> = {
+    value: null,
+    multiple: false,
+    onAdd: () => {},
+    onRemove: () => {},
+    isSelectedId: () => false,
+    disabled: false,
+    error: false,
+    allowDeselect: false,
+};
+
+const {
+    useStoreRef: useListStoreRef,
+    Provider: ListContextProvider,
+    useContext: useListContext,
+    useContextValue: useListContextValue,
+    Context: ListContext,
+} = createFastContext<ListContextValue<DefaultListItemT>>(listContextDefaultValue, true);
+
+export { ListContext, ListContextProvider, useListContext, useListContextValue, useListStoreRef };
+
+registerPortalContext([ListContext]);

package/components/List/index.ts

@@ -0,0 +1,8 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+import ListDefault from './List';
+
+export const List = getRegisteredComponentWithFallback('List', ListDefault);
+
+export * from './context';
+export type * from './types';
+export * from './utils';