@zjlab-fe/data-hub-ui 0.21.6 → 0.22.0

package/es/components/file-uploader/components/uploading-status.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import './uploading-status.css.js';
+
+const UPLOADING_MESSAGES = [
+    '上传中',
+    '传输数据中',
+    '正在处理',
+    '上传进行中',
+    '传输中，请稍候',
+    '文件上传中',
+    '数据传输中',
+    '上传处理中',
+];
+function UploadingStatus({ interval = 10000, className = '' }) {
+    const [messageIndex, setMessageIndex] = useState(0);
+    const [animationState, setAnimationState] = useState('slide-in');
+    const [dots, setDots] = useState('.');
+    useEffect(() => {
+        const scheduleNextChange = () => {
+            // Random interval: ±30% of base interval (e.g., 3500-6500ms for 5000ms base)
+            const randomInterval = interval + (Math.random() - 0.5) * interval * 0.6;
+            const timer = setTimeout(() => {
+                // Start slide-up animation
+                setAnimationState('slide-up');
+                // Change message after slide-up completes
+                setTimeout(() => {
+                    setMessageIndex((prev) => (prev + 1) % UPLOADING_MESSAGES.length);
+                    setAnimationState('slide-in');
+                    scheduleNextChange(); // Schedule next change
+                }, 400); // Match animation duration
+            }, randomInterval);
+            return timer;
+        };
+        const timer = scheduleNextChange();
+        return () => clearTimeout(timer);
+    }, [interval]);
+    // Animate dots: . -> .. -> ...
+    useEffect(() => {
+        const dotsTimer = setInterval(() => {
+            setDots((prev) => {
+                if (prev === '.')
+                    return '..';
+                if (prev === '..')
+                    return '...';
+                return '.';
+            });
+        }, 500); // Change dots every 500ms
+        return () => clearInterval(dotsTimer);
+    }, []);
+    return (jsxs("span", { className: `uploading-status ${className}`, children: [jsx("span", { className: `uploading-status-text ${animationState}`, children: UPLOADING_MESSAGES[messageIndex] }), jsx("span", { className: "uploading-dots", children: dots })] }));
+}
+
+export { UploadingStatus };

package/es/components/file-uploader/components/utils/directory-reader.js

@@ -0,0 +1,65 @@
+import { __awaiter } from 'tslib';
+
+/**
+ * Recursively reads files from a FileSystemEntry (file or directory)
+ */
+function readEntry(entry_1, acceptFilter_1) {
+    return __awaiter(this, arguments, void 0, function* (entry, acceptFilter, directory = true, basePath = '') {
+        const acceptSet = new Set(acceptFilter ? acceptFilter.split(',').map((s) => s.trim()) : []);
+        if (entry.isFile) {
+            return new Promise((resolve) => {
+                entry.file((file) => {
+                    // Apply accept filter if specified
+                    if (acceptSet.size > 0) {
+                        const matchesFilter = Array.from(acceptSet).some((filter) => {
+                            if (filter.startsWith('.')) {
+                                return file.name.endsWith(filter);
+                            }
+                            if (filter.includes('/*')) {
+                                const mimePrefix = filter.split('/')[0];
+                                return file.type.startsWith(mimePrefix);
+                            }
+                            return file.type === filter;
+                        });
+                        if (!matchesFilter) {
+                            resolve([]);
+                            return;
+                        }
+                    }
+                    const relativePath = basePath || '';
+                    resolve([{ file, relativePath }]);
+                });
+            });
+        }
+        if (entry.isDirectory) {
+            // Skip directories if directory support is disabled
+            if (!directory) {
+                return [];
+            }
+            const dirReader = entry.createReader();
+            const entries = [];
+            const newBasePath = basePath ? `${basePath}/${entry.name}` : entry.name;
+            // Read all entries in directory
+            return new Promise((resolve) => {
+                const readEntries = () => {
+                    dirReader.readEntries((results) => __awaiter(this, void 0, void 0, function* () {
+                        if (results.length === 0) {
+                            // Done reading directory
+                            const filePromises = entries.map((e) => readEntry(e, acceptFilter, directory, newBasePath));
+                            const fileArrays = yield Promise.all(filePromises);
+                            resolve(fileArrays.flat());
+                        }
+                        else {
+                            entries.push(...results);
+                            readEntries(); // Continue reading
+                        }
+                    }));
+                };
+                readEntries();
+            });
+        }
+        return [];
+    });
+}
+
+export { readEntry };

package/es/components/file-uploader/constants.js

@@ -0,0 +1,31 @@
+// Size constants
+const KB = 1024;
+const MB = KB * 1024;
+const GB = MB * 1024;
+// Default configuration
+const DEFAULT_CHUNK_SIZE = 10 * MB;
+const DEFAULT_MAX_CHUNK_SIZE = 100 * MB;
+const DEFAULT_MIN_CHUNK_SIZE = 5 * MB;
+const DEFAULT_CONCURRENT_CHUNKS = 2;
+const DEFAULT_CONCURRENT_FILES = 1;
+const DEFAULT_MAX_FILE_SIZE = 10 * GB;
+// Upload status enum
+const UploadStatus = {
+    PENDING: 'pending',
+    PREPARING: 'preparing',
+    UPLOADING: 'uploading',
+    PAUSED: 'paused',
+    MERGING: 'merging',
+    SUCCESS: 'success',
+    FAILED: 'failed',
+    CANCELLED: 'cancelled',
+};
+// Chunk status enum
+const ChunkStatus = {
+    PENDING: 'pending',
+    UPLOADING: 'uploading',
+    COMPLETED: 'completed',
+    FAILED: 'failed',
+};
+
+export { ChunkStatus, DEFAULT_CHUNK_SIZE, DEFAULT_CONCURRENT_CHUNKS, DEFAULT_CONCURRENT_FILES, DEFAULT_MAX_CHUNK_SIZE, DEFAULT_MAX_FILE_SIZE, DEFAULT_MIN_CHUNK_SIZE, GB, KB, MB, UploadStatus };

package/es/components/file-uploader/context/action-registry.js

@@ -0,0 +1,69 @@
+/**
+ * Global action registry for providing fresh context to handlers.
+ *
+ * This registry stores references to the latest upload actions (removeFile, start, etc.)
+ * and state (files). It's updated on every render by useUpload hook, ensuring that
+ * when handlers are invoked, they receive always-current references.
+ *
+ * This solves the stale closure problem where handlers registered at file-add time
+ * would capture outdated versions of functions and state.
+ *
+ * Flow:
+ * 1. useUpload hook updates actionRegistry on every render with fresh refs
+ * 2. QueueManager callbacks (queue-callbacks.ts) invoke handlers
+ * 3. Before invoking, they call actionRegistry.getContext() to get fresh utilities
+ * 4. Handler receives fresh context, avoiding stale closure issues
+ *
+ * @example
+ * ```tsx
+ * // In useUpload hook (automatic):
+ * useEffect(() => {
+ *   actionRegistry.update({ files, removeFile, start, ... });
+ * });
+ *
+ * // In queue-callbacks.ts:
+ * const ctx = actionRegistry.getContext();
+ * handlers.onUploadSuccess?.(file, ctx);
+ * ```
+ */
+class ActionRegistry {
+    constructor() {
+        this.context = null;
+    }
+    /**
+     * Update the stored context with fresh references.
+     * Called by useUpload hook on every render.
+     */
+    update(context) {
+        this.context = context;
+    }
+    /**
+     * Get the current context with fresh references.
+     * Returns null if context hasn't been initialized yet.
+     */
+    getContext() {
+        return this.context;
+    }
+    /**
+     * Check if context is available.
+     */
+    hasContext() {
+        return this.context !== null;
+    }
+    /**
+     * Clear the context.
+     * Mainly for testing or complete reset.
+     */
+    clear() {
+        this.context = null;
+    }
+}
+/**
+ * Singleton instance of the action registry.
+ * This is intentionally a module-level singleton, similar to handlerRegistry,
+ * because it needs to be accessible from queue-callbacks.ts which operates
+ * outside the React component tree.
+ */
+const actionRegistry = new ActionRegistry();
+
+export { actionRegistry };

package/es/components/file-uploader/context/file-state-store.js

@@ -0,0 +1,83 @@
+/**
+ * Global file state store for background uploads.
+ *
+ * This store maintains a copy of file state that can be accessed
+ * even when the originating React component is unmounted.
+ *
+ * The store is updated whenever React state changes, ensuring
+ * QueueManager callbacks always have access to fresh file data.
+ *
+ * Flow:
+ * 1. UploadProvider updates state via reducer
+ * 2. Provider syncs state to this store via useEffect
+ * 3. QueueManager callbacks access files via getFile()
+ * 4. Even if user navigates away, store still has current data
+ *
+ * @example
+ * ```tsx
+ * // In UploadProvider - sync state to store
+ * useEffect(() => {
+ *   fileStateStore.syncFiles(state.files);
+ * }, [state.files]);
+ *
+ * // In queue callbacks - get fresh file data
+ * const file = fileStateStore.getFile(fileId);
+ * ```
+ */
+class FileStateStore {
+    constructor() {
+        /** Current files indexed by ID for O(1) lookup */
+        this.filesMap = new Map();
+    }
+    /**
+     * Sync files from React state to the global store.
+     * Called by UploadProvider whenever state.files changes.
+     */
+    syncFiles(files) {
+        // Clear and rebuild map for simplicity
+        // Could be optimized with incremental updates if needed
+        this.filesMap.clear();
+        for (const file of files) {
+            this.filesMap.set(file.id, file);
+        }
+    }
+    /**
+     * Get a file by ID.
+     * Returns undefined if file not found.
+     */
+    getFile(fileId) {
+        return this.filesMap.get(fileId);
+    }
+    /**
+     * Check if a file exists in the store.
+     */
+    hasFile(fileId) {
+        return this.filesMap.has(fileId);
+    }
+    /**
+     * Get all files (for debugging).
+     */
+    getAllFiles() {
+        return Array.from(this.filesMap.values());
+    }
+    /**
+     * Clear all files from the store.
+     * Called when UploadProvider unmounts.
+     */
+    clear() {
+        this.filesMap.clear();
+    }
+    /**
+     * Get the number of files in the store.
+     */
+    get size() {
+        return this.filesMap.size;
+    }
+}
+/**
+ * Singleton instance of the file state store.
+ * Shared across all upload components and QueueManager.
+ */
+const fileStateStore = new FileStateStore();
+
+export { fileStateStore };

package/es/components/file-uploader/context/handler-registry.js

@@ -0,0 +1,119 @@
+/**
+ * Global handler registry for background uploads.
+ *
+ * This registry stores handlers per-file, allowing uploads to continue
+ * even when the user navigates away from the page that initiated the upload.
+ *
+ * Flow:
+ * 1. Component calls addFiles() -> handlers are registered per file ID
+ * 2. User navigates away -> component unmounts but handlers persist
+ * 3. QueueManager continues -> looks up handlers by file ID
+ * 4. Upload completes -> handlers are cleaned up
+ *
+ * @example
+ * ```tsx
+ * // In page component
+ * const { addFiles } = useUpload();
+ * addFiles(files, {
+ *   getHandlers: (file) => ({
+ *     onGetUploadUrls: (name, parts) => api.getUrls(datasetId, name, parts, folderFromUI()),
+ *     // ... other handlers
+ *   })
+ * });
+ *
+ * // When user adds files, handlers are registered:
+ * // handlerRegistry.register(file.id, handlers)
+ *
+ * // User navigates away - no problem!
+ * // QueueManager uses: handlerRegistry.get(fileId)
+ * ```
+ */
+class HandlerRegistry {
+    constructor() {
+        this.registry = new Map();
+    }
+    /**
+     * Register handlers for a file.
+     * Called when a file is added for upload.
+     */
+    register(fileId, handlers, context) {
+        this.registry.set(fileId, {
+            handlers,
+            registeredAt: Date.now(),
+            context,
+        });
+    }
+    /**
+     * Get handlers for a file.
+     * Returns undefined if file has no registered handlers.
+     */
+    get(fileId) {
+        var _a;
+        return (_a = this.registry.get(fileId)) === null || _a === void 0 ? void 0 : _a.handlers;
+    }
+    /**
+     * Check if handlers exist for a file.
+     */
+    has(fileId) {
+        return this.registry.has(fileId);
+    }
+    /**
+     * Remove handlers for a file.
+     * Called when upload completes, fails permanently, or is cancelled.
+     */
+    unregister(fileId) {
+        this.registry.delete(fileId);
+    }
+    /**
+     * Get all registered file IDs.
+     * Useful for debugging and cleanup.
+     */
+    getRegisteredFileIds() {
+        return Array.from(this.registry.keys());
+    }
+    /**
+     * Get entry with metadata for debugging.
+     */
+    getEntry(fileId) {
+        return this.registry.get(fileId);
+    }
+    /**
+     * Clear all registrations.
+     * Use with caution - mainly for testing or complete reset.
+     */
+    clear() {
+        this.registry.clear();
+    }
+    /**
+     * Get count of registered handlers.
+     */
+    get size() {
+        return this.registry.size;
+    }
+}
+/**
+ * Singleton instance of the handler registry.
+ * This is intentionally a module-level singleton, not React context,
+ * because it needs to persist completely independently of React lifecycle.
+ */
+const handlerRegistry = new HandlerRegistry();
+/**
+ * Debug helper to log current registry state.
+ */
+// export function debugHandlerRegistry(): void {
+//   console.group('🔧 Handler Registry Debug');
+//   console.log('Registered files:', handlerRegistry.getRegisteredFileIds());
+//   handlerRegistry.getRegisteredFileIds().forEach(id => {
+//     const entry = handlerRegistry.getEntry(id);
+//     console.log(`  ${id}:`, {
+//       context: entry?.context,
+//       registeredAt: entry?.registeredAt ? new Date(entry.registeredAt).toISOString() : 'N/A',
+//       hasOnGetUploadUrls: !!entry?.handlers.onGetUploadUrls,
+//       hasOnPartComplete: !!entry?.handlers.onPartComplete,
+//       hasOnFileComplete: !!entry?.handlers.onFileComplete,
+//     });
+//   });
+//   console.groupEnd();
+// }
+
+export { handlerRegistry };

package/es/components/file-uploader/context/upload-context.js

@@ -0,0 +1,36 @@
+import { createContext, useContext } from 'react';
+import { DEFAULT_CONCURRENT_FILES, DEFAULT_CONCURRENT_CHUNKS, DEFAULT_MIN_CHUNK_SIZE, DEFAULT_MAX_CHUNK_SIZE } from '../constants.js';
+
+// Initial empty upload state
+const initialUploadState = {
+    files: [],
+};
+/**
+ * Default upload configuration (Provider level).
+ * Controls chunk sizes and concurrency - typically same across app.
+ */
+const defaultUploadConfig = {
+    maxChunkSize: DEFAULT_MAX_CHUNK_SIZE,
+    minChunkSize: DEFAULT_MIN_CHUNK_SIZE,
+    concurrentChunks: DEFAULT_CONCURRENT_CHUNKS,
+    concurrentFiles: DEFAULT_CONCURRENT_FILES,
+};
+// Upload context - null before provider mounts
+const UploadContext = createContext(null);
+// Display name for React DevTools
+UploadContext.displayName = 'UploadContext';
+/**
+ * Hook to consume upload context
+ * Must be used within UploadProvider
+ * @throws Error if used outside of UploadProvider
+ */
+function useUploadContext() {
+    const context = useContext(UploadContext);
+    if (!context) {
+        throw new Error('useUploadContext must be used within UploadProvider. ' +
+            'Make sure your component is wrapped with <UploadProvider>.');
+    }
+    return context;
+}
+
+export { UploadContext, defaultUploadConfig, initialUploadState, useUploadContext };

package/es/components/file-uploader/context/upload-provider.js

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import { useReducer, useMemo, useRef, useEffect, useCallback } from 'react';
+import { initialUploadState, defaultUploadConfig, UploadContext } from './upload-context.js';
+import { uploadReducer } from './upload-reducer.js';
+import { fileStateStore } from './file-state-store.js';
+import { QueueManager } from '../engine/queue-manager.js';
+import { createQueueCallbacks } from '../engine/queue-callbacks.js';
+
+/**
+ * Upload Provider Component
+ *
+ * Provides shared upload state and global configuration across the application.
+ * Manages:
+ * - Files state (list of files, their status, progress)
+ * - QueueManager singleton (shared upload queue)
+ * - Global config (chunk sizes, concurrency)
+ *
+ * For persistence support, wrap your app with PersistenceProvider inside UploadProvider:
+ *
+ * @example
+ * ```tsx
+ * // App level - state management + global config
+ * <UploadProvider config={{ concurrentFiles: 3 }}>
+ *   <PersistenceProvider config={{ mode: 'indexeddb' }}>
+ *     <App />
+ *   </PersistenceProvider>
+ * </UploadProvider>
+ *
+ * // In App - use persistence hook
+ * const { pendingFiles, restoreFiles } = usePersistence();
+ *
+ * // Component level - provide handlers & per-usage options
+ * const { addFiles } = useUpload();
+ * ```
+ */
+function UploadProvider({ config, children }) {
+    // State management with reducer
+    const [state, dispatch] = useReducer(uploadReducer, initialUploadState);
+    // Merge user config with defaults
+    const mergedConfig = useMemo(() => (Object.assign(Object.assign({}, defaultUploadConfig), config)), [config]);
+    // Shared QueueManager ref - singleton across all useUploadEngine consumers
+    const queueManagerRef = useRef(null);
+    // Sync file state to global store for background upload support
+    // This ensures QueueManager callbacks always have fresh file data
+    useEffect(() => {
+        fileStateStore.syncFiles(state.files);
+    }, [state.files]);
+    /**
+     * Get or create QueueManager instance with lazy initialization.
+     * This is stable across renders and shared by all consumers.
+     */
+    const getQueueManager = useCallback(() => {
+        if (queueManagerRef.current) {
+            return queueManagerRef.current;
+        }
+        const queueConfig = {
+            concurrentFiles: mergedConfig.concurrentFiles,
+            concurrentChunks: mergedConfig.concurrentChunks,
+        };
+        const callbacks = createQueueCallbacks({ dispatch });
+        queueManagerRef.current = new QueueManager(queueConfig, callbacks);
+        return queueManagerRef.current;
+    }, [mergedConfig.concurrentFiles, mergedConfig.concurrentChunks, dispatch]);
+    // Memoize context value to prevent unnecessary re-renders
+    const contextValue = useMemo(() => ({
+        state,
+        dispatch,
+        config: mergedConfig,
+        queueManagerRef,
+        getQueueManager,
+    }), [state, mergedConfig, getQueueManager]);
+    return jsx(UploadContext.Provider, { value: contextValue, children: children });
+}
+// Display name for React DevTools
+UploadProvider.displayName = 'UploadProvider';
+
+export { UploadProvider };

package/es/components/file-uploader/context/upload-reducer.js

@@ -0,0 +1,21 @@
+/**
+ * Reducer for upload state management
+ * Handles all file upload state transitions
+ */
+function uploadReducer(state, action) {
+    switch (action.type) {
+        case 'ADD_FILES':
+            return Object.assign(Object.assign({}, state), { files: [...state.files, ...action.files] });
+        case 'UPDATE_FILE':
+            return Object.assign(Object.assign({}, state), { files: state.files.map((file) => (file.id === action.id ? Object.assign(Object.assign({}, file), action.updates) : file)) });
+        case 'UPDATE_CHUNK':
+            return Object.assign(Object.assign({}, state), { files: state.files.map((file) => file.id === action.fileId
+                    ? Object.assign(Object.assign({}, file), { chunks: file.chunks.map((chunk) => chunk.partNum === action.partNum ? Object.assign(Object.assign({}, chunk), action.updates) : chunk) }) : file) });
+        case 'REMOVE_FILE':
+            return Object.assign(Object.assign({}, state), { files: state.files.filter((file) => file.id !== action.id) });
+        default:
+            return state;
+    }
+}
+
+export { uploadReducer };