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

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.11",
+    "version": "0.5.0-beta.13",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",

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,46 +39,89 @@ 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');
-    input.style.display = 'none';
-    input.setAttribute('type', 'file');
-    // @ts-expect-error
-    input.setAttribute('accept', Array.isArray(type) ? type.join(',') : type);
+    return new Promise((resolve, reject) => {
+        try {
+            const input = document.createElement('input');
+            input.style.display = 'none';
+            input.setAttribute('type', 'file');
+            // @ts-expect-error
+            input.setAttribute('accept', Array.isArray(type) ? type.join(',') : type);
 
-    if (multiple) {
-        input.setAttribute('multiple', 'multiple');
-    }
+            if (multiple) {
+                input.setAttribute('multiple', 'multiple');
+            }
 
-    document.body.appendChild(input);
+            document.body.appendChild(input);
 
-    return new Promise(resolve => {
-        input.addEventListener('change', () => {
-            if (input.files) {
-                const response: Promise<DocumentResult>[] = [];
+            const cleanup = () => {
+                try {
+                    document.body.removeChild(input);
+                } catch (e) {
+                    // Input already removed, ignore
+                }
+            };
 
-                Array.from(input.files).forEach(file => response.push(resolveFileData(file)));
+            input.addEventListener('change', async () => {
+                try {
+                    if (input.files && input.files.length > 0) {
+                        const response: Promise<DocumentResult>[] = [];
 
-                return resolve(Promise.all(response));
-            } else {
-                resolve({ type: 'cancel' });
-            }
+                        Array.from(input.files).forEach(file =>
+                            response.push(resolveFileData(file)),
+                        );
 
-            document.body.removeChild(input);
-        });
+                        const results = await Promise.all(response);
+                        resolve(results);
+                    }
+                } catch (error) {
+                    onError?.(error);
+                    reject(error);
+                } finally {
+                    cleanup();
+                }
+            });
 
-        const event = new MouseEvent('click');
-        input.dispatchEvent(event);
+            input.addEventListener('cancel', () => {
+                const error = new OperationCanceledError();
+                onCancel?.();
+                cleanup();
+                reject(error);
+            });
+
+            input.addEventListener('error', () => {
+                const error = new Error('File picker error occurred');
+                onError?.(error);
+                cleanup();
+                reject(error);
+            });
+
+            const event = new MouseEvent('click');
+            input.dispatchEvent(event);
+        } catch (error) {
+            // Handle errors from file picker setup or opening
+            onError?.(error);
+            reject(error);
+        }
     });
 };
 
+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;
     /**