react-native-molecules 0.5.0-beta.10 → 0.5.0-beta.11

package/components/TouchableRipple/TouchableRipple.tsx

@@ -125,7 +125,7 @@ const TouchableRipple = (
     ref: any,
 ) => {
     // TODO - enable ripple onLongPress, need to check for mobile as well
-    const disabled = disabledProp || !onPress;
+    const disabled = disabledProp;
 
     const componentStyles = touchableRippleStyles;
 

package/hooks/index.tsx

@@ -18,11 +18,6 @@ export { useMediaQuery } from './useMediaQuery';
 export { useMergedRefs } from './useMergedRefs';
 export { default as usePrevious } from './usePrevious';
 export * from './useQueryFilter';
-export {
-    default as useSearchable,
-    type UseSearchableProps,
-    useSearchInputProps,
-} from './useSearchable';
 export { default as useSubcomponents, type UseSubcomponentsProps } from './useSubcomponents';
 export * from './useTheme';
 export { default as useToggle } from './useToggle';

package/hooks/useSubcomponents.tsx

@@ -6,7 +6,7 @@ export type UseSubcomponentsProps<T extends string> = {
     /**
      * array of displayName as string
      * */
-    allowedChildren: T[];
+    allowedChildren: (T | { name: T; allowMultiple?: boolean })[];
     /**
      * If true, also returns the remaining children that don't match any of the allowedChildren
      * in a `rest` property
@@ -44,49 +44,47 @@ function useSubcomponents<T extends string = string, IncludeRest extends boolean
     IncludeRest
 > {
     return useMemo(() => {
-        // this will create properties with default empty array values even if they don't exist in the children
-        const defaultContext = allowedChildren.reduce(
-            (context, childName) => {
-                return {
-                    ...context,
-                    [childName]: [],
-                };
-            },
-            includeRest ? { rest: [] as ReactNode[] } : {},
-        ) as UseSubcomponentsResult<T, IncludeRest>;
+        const configs = allowedChildren.map(entry =>
+            typeof entry === 'string'
+                ? { name: entry, allowMultiple: true as boolean }
+                : { name: entry.name, allowMultiple: entry.allowMultiple ?? true },
+        );
 
-        const childArray = Children.toArray(children);
+        const nameSet = new Set(configs.map(c => c.name));
+        const allowMultipleMap = new Map(configs.map(c => [c.name, c.allowMultiple]));
 
-        return childArray.reduce((context, child) => {
+        const result = configs.reduce((acc, { name }) => {
+            (acc as any)[name] = [];
+            return acc;
+        }, (includeRest ? { rest: [] } : {}) as UseSubcomponentsResult<T, IncludeRest>);
+
+        Children.forEach(children, child => {
             if (!isValidElement(child)) {
-                // Non-element children go to rest if includeRest is enabled
                 if (includeRest) {
-                    return {
-                        ...context,
-                        rest: [...(context as any).rest, child],
-                    };
+                    (result as any).rest.push(child);
                 }
-                return context;
+                return;
             }
 
-            const displayName = (child.type as FC)?.displayName as string | undefined;
+            const displayName = (child.type as FC)?.displayName as T | undefined;
 
-            if (!displayName || !allowedChildren.includes(displayName as T)) {
-                // Unmatched elements go to rest if includeRest is enabled
-                if (includeRest) {
-                    return {
-                        ...context,
-                        rest: [...(context as any).rest, child],
-                    };
+            if (displayName && nameSet.has(displayName)) {
+                if (allowMultipleMap.get(displayName)) {
+                    (result as any)[displayName].push(child);
+                } else {
+                    // Only keep the last matching child
+                    (result as any)[displayName] = [child];
                 }
-                return context;
+
+                return;
+            }
+
+            if (includeRest) {
+                (result as any).rest.push(child);
             }
+        });
 
-            return {
-                ...context,
-                [displayName]: [...(context as any)[displayName], child],
-            };
-        }, defaultContext);
+        return result;
     }, [allowedChildren, children, includeRest]);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.10",
+    "version": "0.5.0-beta.11",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",
@@ -56,7 +56,7 @@
         "react": "19.1.0",
         "react-native": "0.81.4",
         "react-native-svg": ">=12.1.0",
-        "react-native-unistyles": "^3.0.15",
+        "react-native-unistyles": "^3.0.22",
         "react-native-web": "~0.21.1",
         "react-native-reanimated": ">=4.0.0",
         "react-native-redash": ">=18.0.0"
@@ -73,7 +73,7 @@
         "react-native": "0.81.4",
         "react-native-builder-bob": "^0.17.1",
         "react-native-reanimated": "~4.1.1",
-        "react-native-unistyles": "^3.0.15",
+        "react-native-unistyles": "^3.0.22",
         "react-native-web": "~0.21.1"
     },
     "eslintIgnore": [

package/hooks/useSearchable.tsx

@@ -1,74 +0,0 @@
-import { type ReactElement, useCallback, useMemo } from 'react';
-
-import { IconButton } from '../components/IconButton';
-import {
-    TextInput,
-    type TextInputElementProps,
-    type TextInputProps,
-} from '../components/TextInput';
-import useControlledValue from './useControlledValue';
-
-export interface UseSearchableProps {
-    searchable?: boolean;
-    onQueryChange?: (search: string) => void;
-    query?: string;
-    searchInputProps?: Omit<TextInputProps, 'value' | 'onChangeText'>;
-}
-
-const useSearchInputProps = (props?: Partial<TextInputProps>) => {
-    const onChange = props?.onChangeText;
-    const onPressClear = useCallback(() => {
-        onChange?.('');
-    }, [onChange]);
-
-    const right = useCallback(
-        ({ color, forceFocus }: TextInputElementProps) => (
-            <IconButton
-                name={props?.value ? 'close-circle-outline' : 'magnify'}
-                onPress={props?.value ? onPressClear : forceFocus}
-                color={color}
-            />
-        ),
-        [onPressClear, props?.value],
-    );
-
-    return useMemo(
-        () => (props?.right === undefined ? props : { right, ...props }),
-        [props, right],
-    );
-};
-
-const useSearchable = ({
-    searchable,
-    onQueryChange,
-    query,
-    searchInputProps,
-}: UseSearchableProps = {}): ReactElement<TextInputProps> | null => {
-    const [value, onValueChange] = useControlledValue({
-        value: query || '',
-        defaultValue: '', // to disable the useControlledValue inside TextInput
-        onChange: onQueryChange,
-        disabled: !searchable,
-    });
-
-    const props = useSearchInputProps(
-        useMemo(
-            () => ({
-                ...searchInputProps,
-                value,
-                onChangeText: onValueChange,
-            }),
-            [onValueChange, searchInputProps, value],
-        ),
-    );
-
-    return useMemo(() => {
-        if (!searchable || !onQueryChange) return null;
-
-        return <TextInput {...props} />;
-    }, [onQueryChange, props, searchable]);
-};
-
-export { useSearchInputProps };
-
-export default useSearchable;