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

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/useFilePicker.tsx

@@ -7,15 +7,11 @@ import {
 } from '../utils/DocumentPicker';
 import { isNil, omitBy } from '../utils/lodash';
 
-export const useFilePicker = ({
-    multiple,
-    onCancel,
-    onError,
-    ...options
-}: DocumentPickerOptions) => {
+export const useFilePicker = (options: DocumentPickerOptions) => {
     const openFilePicker = useCallback(
-        async (callback: (response: DocumentResult | DocumentResult[]) => void): Promise<void> => {
-            const omittedOptions = omitBy(options, isNil);
+        async (callback: (response: DocumentResult[]) => void) => {
+            const { multiple, ...rest } = options;
+            const omittedOptions = omitBy(rest, isNil);
 
             try {
                 let response;
@@ -30,16 +26,10 @@ export const useFilePicker = ({
             } catch (e: any) {
                 // eslint-disable-next-line no-console
                 console.log('FilePicker Error', e, e?.code);
-
-                if (e?.code === 'DOCUMENT_PICKER_CANCELED.') {
-                    onCancel?.();
-                    return;
-                }
-                // It might result in an error.
-                onError?.(e);
+                // Error and cancel callbacks are handled by DocumentPicker itself
             }
         },
-        [multiple, onCancel, onError, options],
+        [options],
     );
 
     return { openFilePicker };

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.12",
     "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/utils/DocumentPicker/documentPicker.ts

@@ -2,6 +2,14 @@ import { Platform } from 'react-native';
 
 import type { DocumentPickerOptions, DocumentResult } from './types';
 
+class OperationCanceledError extends Error {
+    code = 'OPERATION_CANCELED';
+    constructor() {
+        super('user canceled the document picker');
+        this.name = 'OperationCanceledError';
+    }
+}
+
 const resolveFileData = (file: File): Promise<DocumentResult> => {
     return new Promise((resolve, reject) => {
         const mimeType = file.type;
@@ -31,10 +39,14 @@ const resolveFileData = (file: File): Promise<DocumentResult> => {
 const getDocumentAsyncWeb = async ({
     type = '*/*',
     multiple = false,
-}: DocumentPickerOptions): Promise<DocumentResult | DocumentResult[]> => {
+    onCancel,
+    onError,
+}: DocumentPickerOptions): Promise<DocumentResult[]> => {
     // SSR guard
     if (Platform.OS !== 'web') {
-        return { type: 'cancel' };
+        const error = new OperationCanceledError();
+        onCancel?.();
+        throw error;
     }
 
     const input = document.createElement('input');
@@ -49,19 +61,27 @@ const getDocumentAsyncWeb = async ({
 
     document.body.appendChild(input);
 
-    return new Promise(resolve => {
-        input.addEventListener('change', () => {
-            if (input.files) {
-                const response: Promise<DocumentResult>[] = [];
+    return new Promise((resolve, reject) => {
+        input.addEventListener('change', async () => {
+            try {
+                if (input.files && input.files.length > 0) {
+                    const response: Promise<DocumentResult>[] = [];
 
-                Array.from(input.files).forEach(file => response.push(resolveFileData(file)));
+                    Array.from(input.files).forEach(file => response.push(resolveFileData(file)));
 
-                return resolve(Promise.all(response));
-            } else {
-                resolve({ type: 'cancel' });
+                    const results = await Promise.all(response);
+                    resolve(results);
+                } else {
+                    const error = new OperationCanceledError();
+                    onCancel?.();
+                    reject(error);
+                }
+            } catch (error) {
+                onError?.(error);
+                reject(error);
+            } finally {
+                document.body.removeChild(input);
             }
-
-            document.body.removeChild(input);
         });
 
         const event = new MouseEvent('click');
@@ -69,8 +89,13 @@ const getDocumentAsyncWeb = async ({
     });
 };
 
+const pickSingle = (options: DocumentPickerOptions = {}) =>
+    getDocumentAsyncWeb({ ...options, multiple: false });
+
+const pickMultiple = (options: DocumentPickerOptions = {}) =>
+    getDocumentAsyncWeb({ ...options, multiple: true });
+
 export default {
-    pickSingle: ({ type }: DocumentPickerOptions) => getDocumentAsyncWeb({ type, multiple: false }),
-    pickMultiple: ({ type }: DocumentPickerOptions) =>
-        getDocumentAsyncWeb({ type, multiple: true }),
+    pickSingle,
+    pickMultiple,
 };

package/utils/DocumentPicker/types.ts

@@ -12,7 +12,6 @@ export type DocumentPickerOptions = Omit<RNDocumentPickerOptions, 'allowMultiSel
     multiple?: boolean;
     /**
      * runs when the DocumentPicker is cancelled
-     *  currently, only supported on IOS and Android
      */
     onCancel?: () => void;
     /**

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;