@oxyhq/services 22.12.1 → 22.12.3

package/src/ui/screens/fileManagement/hooks/useFileUploadState.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { toast } from '@oxyhq/bloom';
 import type { AssetUploadInput, FileMetadata } from '@oxyhq/core';
@@ -58,8 +58,12 @@ export interface UseFileUploadStateParams {
     multiSelect: boolean;
     afterSelect: 'close' | 'back' | 'none';
     onSelect?: (file: FileMetadata) => void;
+    /** Forward-navigation picker: see {@link FileManagementScreenProps.onPicked}. */
+    onPicked?: (file: FileMetadata) => void;
     goBack?: () => void;
     onClose?: () => void;
+    /** When true, the document picker and pre-upload validation accept images only. */
+    imagesOnly?: boolean;
     selectedIds: Set<string>;
     setSelectedIds: React.Dispatch<React.SetStateAction<Set<string>>>;
     t: (key: string, vars?: Record<string, string | number>) => string;
@@ -94,8 +98,10 @@ export const useFileUploadState = ({
     multiSelect,
     afterSelect,
     onSelect,
+    onPicked,
     goBack,
     onClose,
+    imagesOnly = false,
     selectedIds,
     setSelectedIds,
     t,
@@ -108,6 +114,23 @@ export const useFileUploadState = ({
 
     const queryClient = useQueryClient();
     const uploadStartRef = useRef<number | null>(null);
+    const postSelectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const isActiveRef = useRef(true);
+
+    const clearPostSelectTimer = useCallback(() => {
+        if (postSelectTimerRef.current) {
+            clearTimeout(postSelectTimerRef.current);
+            postSelectTimerRef.current = null;
+        }
+    }, []);
+
+    useEffect(() => {
+        isActiveRef.current = true;
+        return () => {
+            isActiveRef.current = false;
+            clearPostSelectTimer();
+        };
+    }, [clearPostSelectTimer]);
 
     const endUpload = useCallback(() => {
         const started = uploadStartRef.current;
@@ -274,6 +297,11 @@ export const useFileUploadState = ({
 
             const fileType = candidateType(file);
 
+            if (imagesOnly && !fileType.startsWith('image/')) {
+                toast.error(t('fileManagement.toasts.imagesOnlyRequired'));
+                continue;
+            }
+
             // Generate preview for images - unified approach
             let preview: string | undefined;
             if (fileType.startsWith('image/')) {
@@ -308,7 +336,7 @@ export const useFileUploadState = ({
         // Show preview modal for user to review files before upload
         setPendingFiles(processedFiles);
         setShowUploadPreview(true);
-    }, [t]);
+    }, [imagesOnly, t]);
 
     const handleConfirmUpload = async () => {
         if (pendingFiles.length === 0) return;
@@ -332,15 +360,26 @@ export const useFileUploadState = ({
             // If in selectMode, automatically select the uploaded file(s)
             if (selectMode && uploadedFiles.length > 0) {
                 // Defer one tick so the query cache has settled before selecting.
-                setTimeout(() => {
+                clearPostSelectTimer();
+                postSelectTimerRef.current = setTimeout(() => {
+                    postSelectTimerRef.current = null;
+                    if (!isActiveRef.current) return;
+
                     const fileToSelect = uploadedFiles[0];
                     if (!multiSelect && fileToSelect) {
-                        // Single select mode - directly call onSelect callback
-                        onSelect?.(fileToSelect);
-                        if (afterSelect === 'back') {
-                            goBack?.();
-                        } else if (afterSelect === 'close') {
-                            onClose?.();
+                        if (onPicked) {
+                            // Forward-navigation picker (avatar flow): hand the
+                            // freshly-uploaded file onward (to the cropper). No
+                            // dismiss/close — the picker frame stays below.
+                            onPicked(fileToSelect);
+                        } else {
+                            // Single select mode - directly call onSelect callback
+                            onSelect?.(fileToSelect);
+                            if (afterSelect === 'back') {
+                                goBack?.();
+                            } else if (afterSelect === 'close') {
+                                onClose?.();
+                            }
                         }
                     } else if (multiSelect) {
                         // Multi-select mode - add all uploaded files to selection
@@ -361,6 +400,8 @@ export const useFileUploadState = ({
     };
 
     const handleCancelUpload = () => {
+        clearPostSelectTimer();
+
         // Cleanup preview URLs
         for (const pf of pendingFiles) {
             revokePreviewUrl(pf.preview);
@@ -402,7 +443,7 @@ export const useFileUploadState = ({
             // Use expo-document-picker (works on all platforms including web)
             // On web, it uses the native file input and provides File objects directly
             const result = await picker.getDocumentAsync({
-                type: '*/*',
+                type: imagesOnly ? 'image/*' : '*/*',
                 multiple: true,
                 copyToCacheDirectory: true,
             });

package/src/ui/types/fileManagement.ts

@@ -14,6 +14,16 @@ export interface FileManagementScreenProps extends BaseScreenProps {
     multiSelect?: boolean;
     // Callback when a file is selected (single select mode)
     onSelect?: (file: FileMetadata) => void;
+    /**
+     * Forward-navigation picker: called with the picked file in single-select
+     * mode when the picker is one FRAME of a larger in-surface flow. Unlike
+     * {@link onSelect}, the caller is expected to NAVIGATE the surface onward
+     * (e.g. the avatar flow pushes the cropper on top of this picker) — so on
+     * select the picker neither dismisses nor closes the session, and its
+     * Cancel/back pops THIS frame (returning to the frame that opened the picker)
+     * rather than closing. Takes precedence over `onSelect`/`dismiss` when set.
+     */
+    onPicked?: (file: FileMetadata) => void;
     // Callback when confirm pressed in multi-select mode
     onConfirmSelection?: OnConfirmFileSelection;
     // Initial selected file IDs for multi-select