@zjlab-fe/data-hub-ui 0.9.1 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,4 +8,7 @@ export interface FileUploadModalProps extends Omit<FileUploaderProps, 'dragAreaC
8
8
  uploadRequest?: FileUploaderProps['uploadRequestConfig'];
9
9
  };
10
10
  }
11
+ /**
12
+ * @deprecated This component is deprecated and will be removed in future releases.
13
+ */
11
14
  export default function FileUploadModal({ config: { modal, dragArea, uploadRequest }, ...props }: FileUploadModalProps): import("react/jsx-runtime").JSX.Element;
@@ -1,2 +1,5 @@
1
1
  import { FileUploaderProps } from './FileUploaderImpl/FileUploader';
2
+ /**
3
+ * @deprecated This component is deprecated and will be removed in future releases.
4
+ */
2
5
  export default function FileUploader(props: FileUploaderProps): import("react/jsx-runtime").JSX.Element;
@@ -9,6 +9,9 @@ export declare const AllOnUploadSuccessesDispatchContext: React.Context<Dispath<
9
9
  export declare const TEMP_STORE: {};
10
10
  export declare const UploadStoreContext: React.Context<UploadStore>;
11
11
  export declare const UploadStoreDispatchContext: React.Context<UploadStoreDispatch>;
12
+ /**
13
+ * @deprecated This component is deprecated and will be removed in future releases.
14
+ */
12
15
  export default function UploadStoreProvider({ locale, children, }: {
13
16
  locale?: 'zh' | 'en';
14
17
  children: React.ReactElement;
@@ -1,6 +1,6 @@
1
1
  import './circle-progress.css';
2
- export declare function CircleProgress({ percent, isFailed, isCompleted, }: {
2
+ export declare function CircleProgress({ percent, isFailed, isSuccess, }: {
3
3
  percent: number;
4
4
  isFailed: boolean;
5
- isCompleted: boolean;
5
+ isSuccess: boolean;
6
6
  }): import("react/jsx-runtime").JSX.Element;
@@ -1,10 +1,11 @@
1
1
  import { type DragEvent } from 'react';
2
+ import { type FileWithPath } from '../utils/directory-reader';
2
3
  import type { DropZoneError } from '../uploader-drop-zone';
3
4
  interface UseDropZoneProps {
4
5
  disabled: boolean;
5
6
  directory: boolean;
6
7
  accept: string;
7
- onFilesReady: (files: File[]) => void;
8
+ onFilesReady: (files: FileWithPath[]) => void;
8
9
  onError?: (error: DropZoneError) => void;
9
10
  }
10
11
  export declare function useDropZone({ disabled, directory, accept, onFilesReady, onError }: UseDropZoneProps): {
@@ -1,12 +1,13 @@
1
1
  import type { DropZoneError } from '../uploader-drop-zone';
2
+ import type { FileWithPath } from '../utils/directory-reader';
2
3
  interface UseFileValidationProps {
3
4
  maxSize?: number;
4
5
  maxFiles?: number;
5
6
  fileValidation?: (file: File) => boolean | Promise<boolean>;
6
- onDrop: (files: File[]) => void;
7
+ onDrop: (files: FileWithPath[]) => void;
7
8
  onError?: (error: DropZoneError) => void;
8
9
  }
9
10
  export declare function useFileValidation({ maxSize, maxFiles, fileValidation, onDrop, onError, }: UseFileValidationProps): {
10
- processFiles: (files: File[]) => Promise<void>;
11
+ processFiles: (files: FileWithPath[]) => Promise<void>;
11
12
  };
12
13
  export {};
@@ -1,7 +1,8 @@
1
1
  import { type ReactNode } from 'react';
2
+ import type { FileWithPath } from './utils/directory-reader';
2
3
  import './theme.css';
3
4
  import './uploader-drop-zone.css';
4
- export interface UploadDropZoneClassNames {
5
+ export interface UploaderDropZoneClassNames {
5
6
  /** Container wrapper class */
6
7
  container?: string;
7
8
  /** Drag area class */
@@ -17,7 +18,7 @@ export interface UploadDropZoneClassNames {
17
18
  /** File input class */
18
19
  input?: string;
19
20
  }
20
- export interface UploadDropZoneProps {
21
+ export interface UploaderDropZoneProps {
21
22
  /** File type filter (e.g., "image/*,video/*" or ".pdf,.doc") */
22
23
  accept?: string;
23
24
  /** Maximum file size in bytes */
@@ -33,9 +34,9 @@ export interface UploadDropZoneProps {
33
34
  /** Custom icon - can be a React component or image/svg path */
34
35
  icon?: ReactNode | string;
35
36
  /** Custom class names for different elements */
36
- classNames?: UploadDropZoneClassNames;
37
+ classNames?: UploaderDropZoneClassNames;
37
38
  /** Callback when files are dropped or selected */
38
- onDrop: (files: File[]) => void;
39
+ onDrop: (files: FileWithPath[]) => void;
39
40
  /** custom file validation callback */
40
41
  fileValidation?: (file: File) => boolean | Promise<boolean>;
41
42
  /** Called when validation fails */
@@ -46,4 +47,4 @@ export interface DropZoneError {
46
47
  message: string;
47
48
  rejectedFiles?: File[];
48
49
  }
49
- export declare function UploadDropZone({ accept, maxSize, maxFiles, directory, disabled, dragAreaDescription, icon, classNames, onDrop, fileValidation, onError, }: UploadDropZoneProps): import("react/jsx-runtime").JSX.Element;
50
+ export declare function UploaderDropZone({ accept, maxSize, maxFiles, directory, disabled, dragAreaDescription, icon, classNames, onDrop, fileValidation, onError, }: UploaderDropZoneProps): import("react/jsx-runtime").JSX.Element;
@@ -10,6 +10,8 @@ export interface UploaderFileItemClassNames {
10
10
  icon?: string;
11
11
  /** File name text */
12
12
  name?: string;
13
+ /** File relative path text */
14
+ relativePath?: string;
13
15
  /** Status section wrapper */
14
16
  status?: string;
15
17
  /** Status text */
@@ -27,6 +29,8 @@ interface FileItemProps {
27
29
  file: UploadFile;
28
30
  /** Custom class names for different elements */
29
31
  classNames?: UploaderFileItemClassNames;
32
+ /** start function passed from parent that has upload handlers */
33
+ onStart?: (id: string) => void;
30
34
  /** Cancel function passed from parent that has upload handlers */
31
35
  onCancel?: (id: string) => void;
32
36
  /** Remove function passed from parent that has upload handlers */
@@ -1,7 +1,7 @@
1
1
  import './theme.css';
2
2
  import './uploader.css';
3
3
  import { type ReactNode } from 'react';
4
- import { type DropZoneError, type UploadDropZoneClassNames } from './uploader-drop-zone';
4
+ import { type DropZoneError, type UploaderDropZoneClassNames } from './uploader-drop-zone';
5
5
  import type { UploadHandlers } from '../types';
6
6
  import { type FileListClassNames } from './uploader-file-list';
7
7
  import { type UploaderFileItemClassNames } from './uploader-file-item';
@@ -23,7 +23,7 @@ interface UploaderProps {
23
23
  /** Additional class name for the uploader container */
24
24
  classNames?: {
25
25
  container?: string;
26
- dragZone?: UploadDropZoneClassNames;
26
+ dragZone?: UploaderDropZoneClassNames;
27
27
  fileList?: UploaderFileItemClassNames;
28
28
  fileItem?: FileListClassNames;
29
29
  };
@@ -0,0 +1,9 @@
1
+ import './uploading-status.css';
2
+ interface UploadingStatusProps {
3
+ /** Interval in ms to shuffle messages (default: 10000) */
4
+ interval?: number;
5
+ /** Custom class name */
6
+ className?: string;
7
+ }
8
+ export declare function UploadingStatus({ interval, className }: UploadingStatusProps): import("react/jsx-runtime").JSX.Element;
9
+ export {};
@@ -1,4 +1,8 @@
1
+ export interface FileWithPath {
2
+ file: File;
3
+ relativePath: string;
4
+ }
1
5
  /**
2
6
  * Recursively reads files from a FileSystemEntry (file or directory)
3
7
  */
4
- export declare function readEntry(entry: FileSystemEntry, acceptFilter: string): Promise<File[]>;
8
+ export declare function readEntry(entry: FileSystemEntry, acceptFilter: string, directory?: boolean, basePath?: string): Promise<FileWithPath[]>;
@@ -13,7 +13,7 @@ export declare const UploadStatus: {
13
13
  readonly UPLOADING: "uploading";
14
14
  readonly PAUSED: "paused";
15
15
  readonly MERGING: "merging";
16
- readonly COMPLETED: "completed";
16
+ readonly SUCCESS: "success";
17
17
  readonly FAILED: "failed";
18
18
  readonly CANCELLED: "cancelled";
19
19
  };
@@ -1,14 +1,15 @@
1
+ import type { AddFilesOptions, UploadFile } from '../types';
2
+ import type { FileWithPath } from '../components/utils/directory-reader';
1
3
  /**
2
- * Main consumer hook for file uploads - Composition of all specialized hooks.
4
+ * Main consumer hook for file uploads - Core functionality.
3
5
  *
4
- * This hook provides the complete upload API by composing:
5
- * - `useUploadFiles` - File state and selectors
6
- * - `useUploadOperations` - File management (add, remove, clear)
7
- * - `useUploadControl` - Single file controls (start, pause, resume, cancel)
8
- * - `useUploadBatch` - Batch operations (startAll, pauseAll, etc.)
6
+ * This hook provides essential upload API with:
7
+ * - `files` - All files in the upload queue
8
+ * - `start`, `pause`, `resume`, `cancel` - Single file controls
9
+ * - `addFiles`, `removeFile` - File operations
9
10
  *
10
- * Use this hook when you need the full upload functionality.
11
- * For more focused components, use the specialized hooks directly.
11
+ * Use this hook for the most common upload scenarios.
12
+ * For extended functionality (batch operations, file selectors), use `useUploadExtend`.
12
13
  *
13
14
  * Global config (chunk sizes, concurrency) comes from UploadProvider.
14
15
  * Handlers are provided per-file at selection time via addFiles options,
@@ -16,59 +17,69 @@
16
17
  *
17
18
  * @example
18
19
  * ```tsx
19
- * // Full featured uploader
20
20
  * function MyUploader({ datasetId }: { datasetId: string }) {
21
- * const { files, addFiles, start, pause, startAll } = useUpload();
21
+ * const { files, addFiles, start, pause } = useUpload();
22
22
  *
23
23
  * return (
24
- * <input
25
- * type="file"
26
- * onChange={(e) =>
27
- * addFiles(e.target.files, {
28
- * getHandlers: (file) => ({
29
- * onGetUploadUrls: (fileName, partCount) =>
30
- * api.getUploadUrls(datasetId, fileName, partCount),
31
- * onPartComplete: (fileName, uploadId, partNum) =>
32
- * api.markPartComplete(datasetId, uploadId, partNum),
33
- * onFileComplete: (fileName, uploadId) =>
34
- * api.completeUpload(datasetId, uploadId),
35
- * }),
36
- * })
37
- * }
38
- * />
24
+ * <>
25
+ * <input
26
+ * type="file"
27
+ * onChange={(e) =>
28
+ * addFiles(e.target.files, {
29
+ * getHandlers: (file) => ({
30
+ * onGetUploadUrls: (fileName, partCount) =>
31
+ * api.getUploadUrls(datasetId, fileName, partCount),
32
+ * onPartComplete: (fileName, uploadId, partNum) =>
33
+ * api.markPartComplete(datasetId, uploadId, partNum),
34
+ * onFileComplete: (fileName, uploadId) =>
35
+ * api.completeUpload(datasetId, uploadId),
36
+ * }),
37
+ * })
38
+ * }
39
+ * />
40
+ * <div>
41
+ * {files.map(f => (
42
+ * <div key={f.id}>
43
+ * {f.fileName}
44
+ * <button onClick={() => start(f.id)}>Start</button>
45
+ * </div>
46
+ * ))}
47
+ * </div>
48
+ * </>
39
49
  * );
40
50
  * }
41
- *
42
- * // Or use specialized hooks for focused components:
43
- * function FileList() {
44
- * const { files, pendingFiles } = useUploadFiles();
45
- * // ...
46
- * }
47
- *
48
- * function ControlButtons({ fileId }) {
49
- * const { start, pause } = useUploadControl();
50
- * // ...
51
- * }
52
51
  * ```
53
52
  */
54
53
  export declare function useUpload(): {
55
- startAll: () => Promise<void>;
56
- pauseAll: () => void;
57
- resumeAll: () => Promise<void>;
58
- cancelAll: () => void;
54
+ files: UploadFile[];
55
+ addFiles: (files: FileWithPath[], addOptions: AddFilesOptions, runtime?: unknown) => undefined;
56
+ removeFile: (id: string) => Promise<void>;
59
57
  start: (id: string) => Promise<void>;
60
58
  pause: (id: string) => void;
61
59
  resume: (id: string) => Promise<void>;
62
60
  cancel: (id: string) => Promise<void>;
63
- addFiles: (files: FileList | File[], addOptions: import("..").AddFilesOptions, runtime?: unknown) => import("..").UploadFile[] | undefined;
64
- removeFile: (id: string) => Promise<void>;
65
- clearCompleted: () => void;
66
- clearAll: () => void;
67
- files: import("..").UploadFile[];
68
- getFileById: (id: string) => import("..").UploadFile | undefined;
69
- pendingFiles: import("..").UploadFile[];
70
- uploadingFiles: import("..").UploadFile[];
71
- completedFiles: import("..").UploadFile[];
72
- failedFiles: import("..").UploadFile[];
73
- pausedFiles: import("..").UploadFile[];
61
+ /** Get a specific file by ID */
62
+ getFileById: (id: string) => UploadFile | undefined;
63
+ /** Files waiting to be uploaded */
64
+ pendingFiles: UploadFile[];
65
+ /** Files currently uploading */
66
+ uploadingFiles: UploadFile[];
67
+ /** Successfully completed uploads */
68
+ successFiles: UploadFile[];
69
+ /** Failed uploads */
70
+ failedFiles: UploadFile[];
71
+ /** Paused uploads */
72
+ pausedFiles: UploadFile[];
73
+ /** Start all pending files */
74
+ startAll: () => Promise<void>;
75
+ /** Pause all uploading files */
76
+ pauseAll: () => void;
77
+ /** Resume all paused files */
78
+ resumeAll: () => Promise<void>;
79
+ /** Cancel all uploads */
80
+ cancelAll: () => void;
81
+ /** Clear all succeeded files */
82
+ clearSucceeded: () => Promise<void>;
83
+ /** Clear all files */
84
+ clearAll: () => Promise<void>;
74
85
  };
@@ -1,15 +1,12 @@
1
1
  export { UploadProvider } from './context/upload-provider';
2
2
  export { Uploader as FileUploader } from './components/uploader';
3
- export { UploadDropZone as UploaderDropZone } from './components/uploader-drop-zone';
3
+ export { UploaderDropZone } from './components/uploader-drop-zone';
4
4
  export { UploaderFileListLayout } from './components/uploader-file-list';
5
5
  export { UploaderFileItem } from './components/uploader-file-item';
6
6
  export { useUpload } from './hooks/use-upload';
7
- export { useUploadFiles } from './hooks/use-upload-files';
8
- export { useUploadOperations } from './hooks/use-upload-operations';
9
- export { useUploadControl } from './hooks/use-upload-control';
10
- export { useUploadBatch } from './hooks/use-upload-batch';
11
7
  export type { UploadFile, ChunkState, UploadHandlers, CallbackResult, GetUploadUrlsResult, UploadUrl, UploadConfig, AddFilesOptions, } from './types';
12
- export type { DropZoneError, UploadDropZoneClassNames, UploadDropZoneProps, } from './components/uploader-drop-zone';
8
+ export type { DropZoneError, UploaderDropZoneClassNames, UploaderDropZoneProps, } from './components/uploader-drop-zone';
9
+ export type { FileWithPath } from './components/utils/directory-reader';
13
10
  export type { FileListClassNames } from './components/uploader-file-list';
14
11
  export type { UploaderFileItemClassNames } from './components/uploader-file-item';
15
12
  export { UploadStatus } from './constants';
@@ -59,7 +59,7 @@ export type RestoreHandlerFn = (runtime: unknown, meta: StoredFileMeta) => Uploa
59
59
  * Stored chunk metadata (without actual data)
60
60
  */
61
61
  export interface StoredChunkMeta {
62
- partNum: number;
62
+ partNum?: number;
63
63
  status: ChunkStatusType;
64
64
  progress: number;
65
65
  uploadUrl?: string;
@@ -76,6 +76,8 @@ export interface StoredFileMeta {
76
76
  fileName: string;
77
77
  /** File size in bytes */
78
78
  fileSize: number;
79
+ /** Relative path of the file */
80
+ relativePath: string;
79
81
  /** File last modified timestamp */
80
82
  lastModified: number;
81
83
  /** Current upload status */
@@ -5,7 +5,7 @@ export interface UploadUrl {
5
5
  partNum: number;
6
6
  }
7
7
  export interface ChunkState {
8
- partNum: number;
8
+ partNum?: number;
9
9
  status: ChunkStatusType;
10
10
  progress: number;
11
11
  uploadUrl?: string;
@@ -22,6 +22,7 @@ export interface UploadFile {
22
22
  uploadId: string;
23
23
  chunks: ChunkState[];
24
24
  chunkSize: number;
25
+ relativePath: string;
25
26
  runtime?: unknown;
26
27
  error?: string;
27
28
  errorCode?: string;
@@ -118,10 +119,6 @@ export type UploadAction = {
118
119
  } | {
119
120
  type: 'REMOVE_FILE';
120
121
  id: string;
121
- } | {
122
- type: 'CLEAR_COMPLETED';
123
- } | {
124
- type: 'CLEAR_ALL';
125
122
  };
126
123
  export interface UploadContextValue {
127
124
  /** Upload state (files list, processing status) */
@@ -11,7 +11,7 @@ export declare function calculateTotalChunks(fileSize: number, chunkSize: number
11
11
  * Create initial chunk states for a file
12
12
  * @param fileSize - Total file size in bytes
13
13
  * @param chunkSize - Size of each chunk in bytes
14
- * @returns Array of ChunkState objects
14
+ * @returns Array of ChunkState objects with status and progress, partNum will be assigned later based on server response
15
15
  */
16
16
  export declare function createChunks(fileSize: number, chunkSize: number): ChunkState[];
17
17
  /**
@@ -3,11 +3,12 @@ export { default as InputTag } from './components/input-tag';
3
3
  export type { IProps as InputTagProps } from './components/input-tag';
4
4
  export { default as FileUploadDrawer } from './components/uploadDrawer';
5
5
  export { UploadDrawerUploadStoreProvider } from './components/uploadDrawer';
6
- export { default as FileUploader } from './components/FileUploader';
6
+ export { default as FileUploaderDeprecated } from './components/FileUploader';
7
7
  export { FileUploadModal } from './components/FileUploader';
8
8
  export { UploadStoreProvider } from './components/FileUploader';
9
9
  export type { FileUploadModalProps } from './components/FileUploader/FileUploadModal';
10
10
  export type { FileUploaderProps } from './components/FileUploader/FileUploaderImpl/FileUploader';
11
+ export * from './components/file-uploader';
11
12
  export { default as FilePreview } from './components/file-preview';
12
13
  export { default as Copy, copy } from './components/copy';
13
14
  export type { ICopy } from './components/copy';