react-native-molecules 0.5.0-beta.22 → 0.5.0-beta.24

package/components/List/List.tsx

@@ -1,68 +1,35 @@
-import {
-    type ComponentType,
-    memo,
-    type RefObject,
-    useCallback,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
-import { ScrollView, type StyleProp, View, type ViewStyle } from 'react-native';
+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, useControlledValue, useLatest } from '../../hooks';
-import type { WithElements } from '../../types';
+import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
-import { Divider } from '../Divider';
-import { Icon } from '../Icon';
-import { IconButton } from '../IconButton';
 import { StateLayer } from '../StateLayer';
-import { Text } from '../Text';
-import { TextInput, type TextInputHandles, type TextInputProps } from '../TextInput';
-import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
+import { TouchableRipple } from '../TouchableRipple';
 import { ListContextProvider, useListContextValue } from './context';
 import type {
     DefaultListItemT,
     ListContentProps,
     ListContextValue,
-    ListGroupProps,
-    ListItemOptionProps,
+    ListItemId,
+    ListItemProps,
     ListProps,
-    ListSearchInputProps,
 } from './types';
-import { listItemStyles, listStyles } from './utils';
-
-const emptyArr: unknown[] = [];
-
-type InternalListItemProps = Omit<TouchableRippleProps, 'children'> &
-    WithElements<React.ReactNode | ((renderArgs: { hovered: boolean }) => React.ReactNode)> & {
-        ref?: RefObject<any>;
-        hovered?: boolean;
-        children: React.ReactNode;
-        style?: StyleProp<ViewStyle>;
-        divider?: boolean;
-        variant?: 'default' | 'menuItem';
-        selected?: boolean;
-        hoverable?: boolean;
-        contentStyle?: StyleProp<ViewStyle>;
-    };
-
-const _InternalListItem = ({
+import { listItemStyles } from './utils';
+
+const _ListItemBase = ({
     ref,
-    left,
-    right,
     children,
     style: styleProp,
     disabled = false,
-    divider = false,
-    variant = 'default',
+    variant = 'menuItem',
     selected = false,
     onPress,
     hoverable: hoverableProp = false,
     hovered: hoveredProp = false,
-    contentStyle: contentStyleProp,
     ...props
-}: InternalListItemProps) => {
+}: ListItemProps) => {
     const {
         hovered: _hovered,
         focused,
@@ -77,63 +44,140 @@ const _InternalListItem = ({
         disabled,
         hovered: hoverable && hovered,
         focused,
-    }) as any;
+    });
 
     listItemStyles.useVariants({
-        state,
-        variant: variant as any,
+        state: state as never,
+        variant: variant as never,
     });
 
-    const {
-        containerStyles,
-        innerContainerStyle,
-        contentStyle,
-        leftElementStyle,
-        rightElementStyle,
-    } = useMemo(() => {
-        const { innerContainer, content, leftElement, rightElement } = listItemStyles;
-        return {
-            containerStyles: [listItemStyles.root, styleProp],
-            innerContainerStyle: innerContainer,
-            contentStyle: content,
-            leftElementStyle: leftElement,
-            rightElementStyle: rightElement,
-        };
+    const containerStyles = useMemo(
+        () => [listItemStyles.root, styleProp],
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [styleProp, state, variant]);
+        [styleProp, state, variant],
+    );
 
     return (
         <TouchableRipple
             {...props}
-            style={containerStyles}
+            style={containerStyles as StyleProp<ViewStyle>}
             disabled={disabled}
             onPress={onPress}
             ref={actionsRef}>
             <>
-                <View style={innerContainerStyle}>
-                    {left ? (
-                        <View style={leftElementStyle}>
-                            {typeof left === 'function' ? left({ hovered }) : left}
-                        </View>
-                    ) : null}
-                    <View style={[contentStyle, contentStyleProp]}>{children}</View>
-                    {right ? (
-                        <View style={rightElementStyle}>
-                            {typeof right === 'function' ? right({ hovered }) : right}
-                        </View>
-                    ) : null}
-                </View>
-                {divider ? <Divider /> : null}
+                {children}
                 <StateLayer style={listItemStyles.stateLayer} />
             </>
         </TouchableRipple>
     );
 };
 
-const ListItem = memo(_InternalListItem);
+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 DefaultListItemT = DefaultListItemT>({
+    <Option extends object = DefaultListItemT>({
         children,
         value: valueProp,
         defaultValue,
@@ -141,81 +185,54 @@ const ListProvider = typedMemo(
         multiple = false,
         disabled = false,
         error = false,
-        items = emptyArr as Option[],
-        searchKey,
-        onSearchChange,
-        hideSelected: hideSelectedProp,
+        allowDeselect: allowDeselectProp,
     }: ListProps<Option>) => {
-        type ControlledListValue = Option['id'] | Option['id'][] | null;
-        const [value, onValueChange] = useControlledValue<Option['id'] | Option['id'][] | null>({
+        const [value, onValueChange] = useControlledValue<ControlledListValue>({
             value: valueProp,
-            defaultValue: defaultValue ?? (multiple ? (emptyArr as Option['id'][]) : null),
+            defaultValue: defaultValue ?? (multiple ? (emptyArr as ListItemId[]) : null),
             onChange: onChange as
-                | ((value: ControlledListValue, item: Option, event?: any) => void)
+                | ((value: ControlledListValue, item: Option, event?: unknown) => void)
                 | undefined,
         });
         const valueRef = useLatest(value);
-        const [searchQuery, setSearchQuery] = useState('');
 
-        const handleSearchQueryChange = useCallback(
-            (query: string) => {
-                setSearchQuery(query);
-                onSearchChange?.(query);
+        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;
             },
-            [onSearchChange],
+            [multiple, value],
         );
 
-        const hideSelected = hideSelectedProp !== undefined ? hideSelectedProp : multiple;
-
-        const filteredItems = useMemo(() => {
-            let result = items;
-
-            if (hideSelected) {
-                result = result.filter(item => {
-                    if (multiple) {
-                        const values = (value as Option['id'][]) || [];
-                        return !values.some(v => v === item.id);
-                    }
-
-                    const singleValue = value as Option['id'] | null;
-                    return singleValue !== item.id;
-                });
-            }
-
-            if (searchQuery) {
-                const key = searchKey || 'label';
-                const lowerQuery = searchQuery.toLowerCase();
-                result = result.filter(item => {
-                    const itemValue = item[key];
-                    return String(itemValue || '')
-                        .toLowerCase()
-                        .includes(lowerQuery);
-                });
-            }
-
-            return result;
-        }, [hideSelected, items, multiple, searchKey, searchQuery, value]);
-
         const onAdd = useCallback(
             (item: Option) => {
+                const id = (item as { id?: ListItemId }).id as ListItemId;
                 if (multiple) {
-                    const currentValue = (valueRef.current as Option['id'][]) || [];
-                    if (!currentValue.find(v => v === item.id)) {
-                        onValueChange([...currentValue, item.id] as Option['id'][], item);
+                    const currentValue = (valueRef.current as ListItemId[]) || [];
+                    if (!currentValue.find(v => v === id)) {
+                        onValueChange([...currentValue, id], item);
                     }
                     return;
                 }
 
-                onValueChange(item.id, item);
+                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 Option['id'][]) || [];
-                    onValueChange(currentValue.filter(v => v !== item.id) as Option['id'][], item);
+                    const currentValue = (valueRef.current as ListItemId[]) || [];
+                    onValueChange(
+                        currentValue.filter(v => v !== id),
+                        item,
+                    );
                     return;
                 }
 
@@ -229,12 +246,10 @@ const ListProvider = typedMemo(
             multiple,
             onAdd: onAdd as (item: DefaultListItemT) => void,
             onRemove: onRemove as (item: DefaultListItemT) => void,
+            isSelectedId,
             disabled,
             error,
-            items,
-            searchQuery,
-            setSearchQuery: handleSearchQueryChange,
-            filteredItems,
+            allowDeselect,
         } as ListContextValue<DefaultListItemT>;
 
         return <ListContextProvider value={contextValue}>{children}</ListContextProvider>;
@@ -242,266 +257,20 @@ const ListProvider = typedMemo(
 );
 
 const ListContent = typedMemo(
-    <
-        Option extends DefaultListItemT = DefaultListItemT,
-        C extends ComponentType<any> = typeof ScrollView,
-    >({
-        ref,
-        children,
-        ContainerComponent,
-        style,
-        emptyState,
-        processProps,
-        ...rest
-    }: ListContentProps<Option, C> & { ref?: React.ForwardedRef<any> }) => {
-        const { filteredItems, value, multiple, searchQuery, items } = useListContextValue(
-            state => ({
-                filteredItems: state.filteredItems,
-                value: state.value,
-                multiple: state.multiple,
-                searchQuery: state.searchQuery,
-                items: state.items,
-            }),
-        );
-
-        const selectedIds = useMemo(() => {
-            const map: Record<string, true> = {};
-            const values = multiple ? (value as any[]) ?? [] : value == null ? [] : [value];
-            for (const v of values) {
-                const id = v?.id ?? v;
-                if (id != null) map[id] = true;
-            }
-            return map;
-        }, [multiple, value]);
-
-        const isSelected = useCallback(
-            (item: DefaultListItemT) => selectedIds[item.id as any] === true,
-            [selectedIds],
-        );
-
-        const content = useMemo(() => {
-            if (children === undefined) {
-                return null;
-            }
-            return filteredItems.map(item =>
-                children(item as Option, isSelected(item as DefaultListItemT)),
-            );
-        }, [children, filteredItems, isSelected]);
-
-        const defaultEmptyState = useMemo(() => {
-            const hasSearchQuery = searchQuery && searchQuery.trim().length > 0;
-            const hasNoItems = items.length === 0;
-
-            if (hasNoItems) {
-                return (
-                    <View style={listStyles.emptyState}>
-                        <Text style={listStyles.emptyStateText}>No items available</Text>
-                    </View>
-                );
-            }
-
-            if (hasSearchQuery) {
-                return (
-                    <View style={listStyles.emptyState}>
-                        <Text style={listStyles.emptyStateText}>No results found</Text>
-                    </View>
-                );
-            }
-
-            return (
-                <View style={listStyles.emptyState}>
-                    <Text style={listStyles.emptyStateText}>No items</Text>
-                </View>
-            );
-        }, [items.length, searchQuery]);
-
-        const resolvedEmptyState = emptyState ?? defaultEmptyState;
-        const isEmpty = filteredItems.length === 0;
-
-        const Container = (ContainerComponent ?? ScrollView) as ComponentType<any>;
-
-        if (processProps) {
-            const baseProps = { style, ...rest, accessibilityRole: 'listbox' } as Record<
-                string,
-                any
-            >;
-            const processedProps = processProps({
-                props: baseProps as any,
-                items: filteredItems as Option[],
-                isEmpty,
-                emptyState: resolvedEmptyState,
-                isSelected,
-            });
-
-            return <Container {...(processedProps as any)} ref={ref} />;
-        }
-
+    ({ ref, children, style, ...rest }: ListContentProps & { ref?: React.ForwardedRef<any> }) => {
         return (
-            <Container style={style} {...rest} ref={ref} accessibilityRole="listbox">
-                {isEmpty ? resolvedEmptyState : content}
-            </Container>
-        );
-    },
-);
-
-const ListGroup = memo(({ children, label, style, ...rest }: ListGroupProps) => {
-    return (
-        <View style={style} {...rest}>
-            {label ? <Text style={listStyles.groupLabel}>{label}</Text> : null}
-            {children}
-        </View>
-    );
-});
-
-const ListOption = memo(
-    <Option extends DefaultListItemT = DefaultListItemT>({
-        value,
-        children,
-        onPress,
-        disabled: itemDisabledProp = false,
-        shouldToggleOnPress = true,
-        accessibilityRole,
-        accessibilityState,
-        ...rest
-    }: ListItemOptionProps<Option>) => {
-        const {
-            multiple,
-            onAdd,
-            onRemove,
-            disabled: listDisabled,
-            items,
-        } = useListContextValue(state => ({
-            multiple: state.multiple,
-            onAdd: state.onAdd,
-            onRemove: state.onRemove,
-            disabled: state.disabled,
-            items: state.items,
-        }));
-
-        const option = useMemo(() => {
-            const foundItem = items.find(i => i.id === value);
-            if (foundItem) return foundItem as Option;
-
-            return {
-                id: value,
-                ...(itemDisabledProp ? { selectable: false } : {}),
-            } as Option;
-        }, [itemDisabledProp, items, value]);
-
-        const isSelected = useListContextValue(state => {
-            if (multiple) {
-                const values = state.value as any[];
-                return values?.some(v => (v?.id ?? v) === option.id) || false;
-            }
-
-            const singleValue = state.value as any;
-            return (singleValue?.id ?? singleValue) === option.id || false;
-        });
-
-        const isOptionDisabled = Boolean(
-            listDisabled || itemDisabledProp || option.selectable === false,
-        );
-
-        const handlePress = useCallback(
-            (event: any) => {
-                if (isOptionDisabled) return;
-                onPress?.(option, event);
-
-                if (shouldToggleOnPress) {
-                    if (isSelected) {
-                        onRemove(option);
-                    } else {
-                        onAdd(option);
-                    }
-                }
-            },
-            [isOptionDisabled, isSelected, onAdd, onPress, onRemove, option, shouldToggleOnPress],
-        );
-
-        return (
-            <ListItem
-                {...rest}
-                selected={isSelected}
-                disabled={isOptionDisabled}
-                onPress={handlePress}
-                variant={rest.variant || 'menuItem'}
-                accessibilityRole={accessibilityRole}
-                accessibilityState={
-                    accessibilityState ?? { selected: isSelected, disabled: isOptionDisabled }
-                }>
+            <ScrollView style={style} {...rest} ref={ref}>
                 {children}
-            </ListItem>
+            </ScrollView>
         );
     },
 );
 
-const ListSearchInput = memo(({ children, ...textInputProps }: ListSearchInputProps) => {
-    const { searchQuery, setSearchQuery } = useListContextValue(state => ({
-        searchQuery: state.searchQuery,
-        setSearchQuery: state.setSearchQuery,
-    }));
-
-    const textInputRef = useRef<TextInputHandles>(null);
-
-    const handleChangeText = useCallback(
-        (text: string) => {
-            setSearchQuery(text);
-        },
-        [setSearchQuery],
-    );
-
-    const inputProps = {
-        ...textInputProps,
-        value: searchQuery,
-        onChangeText: handleChangeText,
-        placeholder: textInputProps.placeholder || 'Search...',
-        inputStyle: listStyles.searchInputInput,
-    } as TextInputProps;
-
-    const onPressLeftIcon = useCallback(() => {
-        textInputRef.current?.focus();
-    }, []);
-
-    const onClearSearchQuery = useCallback(() => {
-        handleChangeText('');
-    }, [handleChangeText]);
-
-    return (
-        <TextInput
-            ref={textInputRef}
-            style={listStyles.searchInput}
-            size="sm"
-            variant="outlined"
-            {...inputProps}>
-            <TextInput.Left>
-                <Icon onPress={onPressLeftIcon} name="magnify" size={20} />
-            </TextInput.Left>
-            {searchQuery ? (
-                <TextInput.Right>
-                    <IconButton name="close" size={20} onPress={onClearSearchQuery} />
-                </TextInput.Right>
-            ) : null}
-            {children}
-        </TextInput>
-    );
-});
-
 const List = Object.assign(ListProvider, {
     Content: ListContent,
-    Item: ListOption,
-    SearchInput: ListSearchInput,
-    Group: ListGroup,
-    Row: ListItem,
+    Item: ListItem,
 });
 
 export default List;
 
-export {
-    type InternalListItemProps,
-    ListContent,
-    ListGroup,
-    ListItem,
-    ListOption,
-    ListProvider,
-    ListSearchInput,
-};
+export { ListContent, ListItem, ListProvider };

package/components/List/context.tsx

@@ -1,4 +1,5 @@
-import { createFastContext } from '../../fast-context';
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
+
 import { registerPortalContext } from '../Portal';
 import type { DefaultListItemT, ListContextValue } from './types';
 
@@ -7,12 +8,10 @@ const listContextDefaultValue: ListContextValue<DefaultListItemT> = {
     multiple: false,
     onAdd: () => {},
     onRemove: () => {},
+    isSelectedId: () => false,
     disabled: false,
     error: false,
-    items: [],
-    searchQuery: '',
-    setSearchQuery: () => {},
-    filteredItems: [],
+    allowDeselect: false,
 };
 
 const {

package/components/List/index.ts

@@ -1,6 +1,5 @@
 import { getRegisteredComponentWithFallback } from '../../core';
 import ListDefault from './List';
-export type { InternalListItemProps as ListItemProps } from './List';
 
 export const List = getRegisteredComponentWithFallback('List', ListDefault);