@zjlab-fe/data-hub-ui 0.0.2 → 0.0.4

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.
Files changed (42) hide show
  1. package/README.md +6 -0
  2. package/dist/types/components/input-tag/demo/index.d.ts +1 -0
  3. package/dist/types/components/input-tag/index.d.ts +21 -0
  4. package/dist/types/components/uploadDrawer/UploadStoreProvider.d.ts +36 -0
  5. package/dist/types/components/uploadDrawer/demo/index.d.ts +1 -0
  6. package/dist/types/components/uploadDrawer/fileUploadDrawer.d.ts +11 -0
  7. package/dist/types/components/uploadDrawer/fileUploadDrawerFileDragger.d.ts +9 -0
  8. package/dist/types/components/uploadDrawer/fileUploadDrawerList.d.ts +4 -0
  9. package/dist/types/components/uploadDrawer/fileUploadDrawerListProgressButton.d.ts +5 -0
  10. package/dist/types/components/uploadDrawer/hooks/useCancelUpload.d.ts +2 -0
  11. package/dist/types/components/uploadDrawer/hooks/useFilterFiles.d.ts +7 -0
  12. package/dist/types/components/uploadDrawer/hooks/useFinishUpload.d.ts +2 -0
  13. package/dist/types/components/uploadDrawer/hooks/useFormatFiles.d.ts +1 -0
  14. package/dist/types/components/uploadDrawer/hooks/useProgressButtonRef.d.ts +4 -0
  15. package/dist/types/components/uploadDrawer/hooks/useRemoveFilesInUploadQueue.d.ts +1 -0
  16. package/dist/types/components/uploadDrawer/hooks/useResumeUnfinishedUploads.d.ts +1 -0
  17. package/dist/types/components/uploadDrawer/hooks/useRetryUpload.d.ts +5 -0
  18. package/dist/types/components/uploadDrawer/hooks/useSaveUnfinishedUploads.d.ts +2 -0
  19. package/dist/types/components/uploadDrawer/hooks/useSetupUpload.d.ts +2 -0
  20. package/dist/types/components/uploadDrawer/hooks/useUploadFileToOSS.d.ts +2 -0
  21. package/dist/types/components/uploadDrawer/index.d.ts +44 -0
  22. package/dist/types/components/uploadDrawer/utils/calcDisplaySize.d.ts +1 -0
  23. package/dist/types/components/uploadDrawer/utils/constant.d.ts +14 -0
  24. package/dist/types/components/uploadDrawer/utils/createFileToUpload.d.ts +3 -0
  25. package/dist/types/components/uploadDrawer/utils/fileDB/deleteFileInStore.d.ts +1 -0
  26. package/dist/types/components/uploadDrawer/utils/fileDB/deleteObjectStore.d.ts +1 -0
  27. package/dist/types/components/uploadDrawer/utils/fileDB/handleAddFilesToDB.d.ts +2 -0
  28. package/dist/types/components/uploadDrawer/utils/fileDB/index.d.ts +7 -0
  29. package/dist/types/components/uploadDrawer/utils/fileDB/openDB.d.ts +2 -0
  30. package/dist/types/components/uploadDrawer/utils/index.d.ts +27 -0
  31. package/dist/types/components/uploadDrawer/utils/reloadSaveData.d.ts +2 -0
  32. package/dist/types/components/uploadDrawer/utils/retrieveAllFiles.d.ts +9 -0
  33. package/dist/types/components/uploadDrawer/utils/shouldCreateNewFile.d.ts +2 -0
  34. package/dist/types/components/uploadDrawer/utils/splitFileIntoChunk.d.ts +8 -0
  35. package/dist/types/demo/router/index.d.ts +10 -0
  36. package/dist/types/index.d.ts +3 -0
  37. package/es/index.js +1 -1
  38. package/jest.config.js +10 -0
  39. package/lib/index.js +1 -1
  40. package/package.json +92 -71
  41. package/postcss.config.js +6 -0
  42. package/tailwind.config.js +8 -0
package/README.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # data-hub-ui
2
2
 
3
+ ## 组件文档
4
+
5
+ 组件的详细文档请参考以下链接:
6
+
7
+ - [上传组件](./docs/uploadDrawer.md)
8
+
3
9
  ## 组件开发&调试
4
10
 
5
11
  ### 新建组件
@@ -0,0 +1 @@
1
+ export default function Demo(): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,21 @@
1
+ export interface IProps {
2
+ /** 值变更回调时,期望传回的值的类型是数组,还是字符串 */
3
+ valueType: 'array' | 'string';
4
+ /** 值的类型是字符串数组,或者是以分号分隔的字符串 */
5
+ value?: string[] | string | undefined;
6
+ /** 值变更回调,如果值无效(空数组|空串),将传回undefined */
7
+ onChange?: (value: string[] | string | undefined) => void;
8
+ placeholder?: string;
9
+ maxLength?: number;
10
+ size?: 'large' | 'middle' | 'small';
11
+ /** 是否禁用,默认false */
12
+ disabled?: boolean;
13
+ /** 是否去重,默认true */
14
+ deduplicated?: boolean;
15
+ }
16
+ /**
17
+ * 输入标签
18
+ * @param props
19
+ * @returns
20
+ */
21
+ export default function InputTag(props: IProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,36 @@
1
+ import React from 'react';
2
+ import { UploadableFile } from './utils';
3
+ export type UploadStore = {
4
+ [key: string]: UploadableFile[];
5
+ };
6
+ type UploadStoreAction = {
7
+ type: 'add';
8
+ identifier: string | number;
9
+ } | {
10
+ type: 'edit_file';
11
+ identifier: string | number;
12
+ file: UploadableFile;
13
+ } | {
14
+ type: 'remove_file';
15
+ identifier: string | number;
16
+ file: UploadableFile;
17
+ } | {
18
+ type: 'add_file';
19
+ identifier: string | number;
20
+ file: UploadableFile;
21
+ } | {
22
+ type: 'clear_finished';
23
+ identifier: string | number;
24
+ } | {
25
+ type: 'add_files';
26
+ identifier: string | number;
27
+ files: UploadableFile[];
28
+ };
29
+ type UploadStoreDispatch = React.Dispatch<UploadStoreAction>;
30
+ export declare const TEMP_STORE: {};
31
+ export declare const UploadStoreContext: React.Context<UploadStore>;
32
+ export declare const UploadStoreDispatchContext: React.Context<UploadStoreDispatch>;
33
+ export default function UploadStoreProvider({ children }: {
34
+ children: React.ReactElement;
35
+ }): import("react/jsx-runtime").JSX.Element;
36
+ export {};
@@ -0,0 +1 @@
1
+ export default function Demo(): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ export type FileUploadDrawerProps = {
3
+ open: boolean;
4
+ identifier: string;
5
+ accept?: string;
6
+ dragAreaDescription?: React.ReactNode;
7
+ footer?: React.ReactNode;
8
+ directory?: boolean;
9
+ onClose: () => void;
10
+ };
11
+ export default function FileUploadDrawer({ open, identifier, accept, dragAreaDescription, footer, directory, onClose, }: FileUploadDrawerProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from 'react';
2
+ type FileDraggerProps = {
3
+ accept?: string;
4
+ directory?: boolean;
5
+ dragAreaDescription?: ReactNode;
6
+ onFileReceived: (_files: File[]) => void;
7
+ };
8
+ export default function FileUploadDrawerFileDragger({ accept, directory, dragAreaDescription, onFileReceived, }: FileDraggerProps): import("react/jsx-runtime").JSX.Element;
9
+ export {};
@@ -0,0 +1,4 @@
1
+ export default function FileUploading({ identifier, showFinished, }: {
2
+ identifier: string;
3
+ showFinished: boolean;
4
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,5 @@
1
+ export default function FileUploadDrawerListProgressButton({ percent, status, onClick, }: {
2
+ percent: number;
3
+ status: number;
4
+ onClick: () => void;
5
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { UploadableFile } from '../utils';
2
+ export declare function useCancelUpload(): (file: UploadableFile) => Promise<void>;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * useFilterFiles hook用于过滤上传文件
3
+ * 主要功能:
4
+ * 1. 检查文件大小是否超过限制
5
+ * 2. 检查是否有重复文件名
6
+ */
7
+ export declare function useFilterFiles(): (files: File[]) => Promise<[Set<string>, Set<string>]>;
@@ -0,0 +1,2 @@
1
+ import { UploadableFile } from '../utils';
2
+ export declare function useFinishUpload(): (file: UploadableFile) => Promise<void>;
@@ -0,0 +1 @@
1
+ export declare function useFormatFiles(): (allFiles: File[]) => Promise<void>;
@@ -0,0 +1,4 @@
1
+ export declare function useProgressButtonRef(): {
2
+ progressButtonRef: import("react").RefObject<HTMLButtonElement>;
3
+ buttonInHover: boolean;
4
+ };
@@ -0,0 +1 @@
1
+ export declare function useRemoveFilesInUploadQueue(): (duplicationOfName: Set<string>) => void;
@@ -0,0 +1 @@
1
+ export declare function useResumeUnfinishedUploads(identifier: string): () => Promise<void>;
@@ -0,0 +1,5 @@
1
+ import { UploadableFile } from '../utils';
2
+ /**
3
+ * 自定义钩子函数,用于重试文件上传
4
+ */
5
+ export declare function useRetryUpload(): (file: UploadableFile) => Promise<void>;
@@ -0,0 +1,2 @@
1
+ import { UploadStore } from '../UploadStoreProvider';
2
+ export declare function useSaveUnfinishedUploads(uploadStore: UploadStore): void;
@@ -0,0 +1,2 @@
1
+ import { UploadableFile } from '../utils';
2
+ export declare function useSetupUpload(): (file: UploadableFile) => Promise<false | undefined>;
@@ -0,0 +1,2 @@
1
+ import { UploadableFile } from '../utils';
2
+ export declare function useUploadFileToOSS(): (file: UploadableFile, onSuccess?: (_file: UploadableFile) => void) => Promise<void>;
@@ -0,0 +1,44 @@
1
+ import UploadStoreProvider from './UploadStoreProvider';
2
+ import { FileUploadDrawerProps } from './fileUploadDrawer';
3
+ import './index.css';
4
+ export type UploadUrl = {
5
+ uploadUrl: string;
6
+ partNum: number;
7
+ };
8
+ export type FileInfo = {
9
+ fileName: string;
10
+ isFolder?: boolean;
11
+ };
12
+ export type UploadInfoErrorResult = {
13
+ status: false;
14
+ reason?: string;
15
+ };
16
+ type UploadInfoSuccessResult = {
17
+ status: true;
18
+ uploadInfo: {
19
+ uploadUrls: UploadUrl[];
20
+ uploadId: string;
21
+ };
22
+ };
23
+ export type UploadInfoResult = UploadInfoErrorResult | UploadInfoSuccessResult;
24
+ export type FileUploadDrawerContextProps = {
25
+ identifier: string;
26
+ maxSizePerFile?: number;
27
+ directory?: boolean;
28
+ root?: string;
29
+ uploadHistory?: FileInfo[];
30
+ onSuccess?: (_file: FileInfo) => void;
31
+ getUploadUrls: (_fileName: string, _partCount: number) => Promise<UploadInfoResult>;
32
+ onCancelUpload: (_fileName: string, _uploadId: string) => Promise<UploadInfoErrorResult | {
33
+ status: true;
34
+ }>;
35
+ onOnePartDone: (_fileName: string, _uploadId: string, _partNum: number) => Promise<UploadInfoErrorResult | {
36
+ status: true;
37
+ }>;
38
+ onAllPartDone: (_fileName: string, _uploadId: string) => Promise<UploadInfoErrorResult | {
39
+ status: true;
40
+ }>;
41
+ };
42
+ export declare const FileUploadDrawerContext: import("react").Context<FileUploadDrawerContextProps>;
43
+ export { UploadStoreProvider };
44
+ export default function FileUploadDrawer(props: FileUploadDrawerContextProps & FileUploadDrawerProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare function calcDisplaySize(size: number): string;
@@ -0,0 +1,14 @@
1
+ export declare const KB: 1024;
2
+ export declare const MB: 1048576;
3
+ export declare const GB: 1073741824;
4
+ export declare const enum FILE_UPLOAD_STATUS {
5
+ INIT = 1,
6
+ UPLOADING = 2,
7
+ FINISHED = 3,
8
+ FAILED = 4,
9
+ PAUSED = 5,
10
+ CANCELED = 6
11
+ }
12
+ export declare const NEW: 1;
13
+ export declare const STILL_NEED_CHECK: 0;
14
+ export declare const USE_OLD_INFO: 2;
@@ -0,0 +1,3 @@
1
+ import { UploadableFile } from '.';
2
+ import { FileUploadDrawerContextProps } from '..';
3
+ export declare function createFileToUpload(raw: File, root: string | undefined, getUploadUrls: FileUploadDrawerContextProps['getUploadUrls']): Promise<UploadableFile>;
@@ -0,0 +1 @@
1
+ export declare function deleteFileInStore(storeName: string, fileName: string): void;
@@ -0,0 +1 @@
1
+ export declare function deleteObjectStore(storeNames: string[]): Promise<void>;
@@ -0,0 +1,2 @@
1
+ import { UploadableFile } from '..';
2
+ export declare function handleAddFilesToDB(storeName: string, files: UploadableFile[]): void;
@@ -0,0 +1,7 @@
1
+ export declare const DATABASE_NAME = "uploadStore";
2
+ export declare let UPLOADS_DATABASE: IDBDatabase;
3
+ export declare function updateUploadsDatabase(db: IDBDatabase): void;
4
+ export { openDB } from './openDB';
5
+ export { handleAddFilesToDB } from './handleAddFilesToDB';
6
+ export { deleteFileInStore } from './deleteFileInStore';
7
+ export { deleteObjectStore } from './deleteObjectStore';
@@ -0,0 +1,2 @@
1
+ import { UploadableFile } from '..';
2
+ export declare function openDB(storeName: string): Promise<UploadableFile[]>;
@@ -0,0 +1,27 @@
1
+ import { UploadUrl } from '..';
2
+ export type UploadableFile = {
3
+ raw?: File;
4
+ fileStatus: 0 | 1 | 2 | 3 | 4 | 5 | 6;
5
+ partCount: number;
6
+ chunkSize: number;
7
+ uploadId: string;
8
+ fileName: string;
9
+ expiryTime?: string;
10
+ uploadUrls: UploadUrl[];
11
+ completeSeq: UploadUrl[];
12
+ failSeq: UploadUrl[];
13
+ cancelControllers: {
14
+ [key: string]: AbortController;
15
+ };
16
+ displaySize: string;
17
+ percentage: number;
18
+ uploadStatus: number[];
19
+ };
20
+ export * from './shouldCreateNewFile';
21
+ export * from './constant';
22
+ export * from './createFileToUpload';
23
+ export * from './reloadSaveData';
24
+ export * from './splitFileIntoChunk';
25
+ export * from './calcDisplaySize';
26
+ export { deleteFileInStore, deleteObjectStore, handleAddFilesToDB, openDB } from './fileDB';
27
+ export * from './retrieveAllFiles';
@@ -0,0 +1,2 @@
1
+ import { UploadableFile } from '.';
2
+ export declare function reloadSaveData(identifier: string): Promise<UploadableFile[]>;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * 递归检索所有文件
3
+ * @param item - 文件系统条目
4
+ * @param directory - 是否允许处理目录
5
+ * @param acceptList - 可接受的文件扩展名集合
6
+ * @param fileNameWithLocation - 文件的完整路径
7
+ * @returns 符合条件的文件数组
8
+ */
9
+ export declare function retrieveAllFiles(item: FileSystemEntry, directory: boolean, acceptList: Set<string>, fileNameWithLocation?: string): Promise<File[]>;
@@ -0,0 +1,2 @@
1
+ import { NEW, USE_OLD_INFO, UploadableFile } from '.';
2
+ export declare function checkExpiryTime(file: UploadableFile): typeof NEW | typeof USE_OLD_INFO;
@@ -0,0 +1,8 @@
1
+ import { UploadableFile } from '.';
2
+ import { UploadUrl } from '..';
3
+ type ChunkInfo = {
4
+ url: UploadUrl;
5
+ chunk: Blob;
6
+ };
7
+ export declare function splitFileIntoChunk(file: UploadableFile): ChunkInfo[];
8
+ export {};
@@ -0,0 +1,10 @@
1
+ import { createBrowserRouter } from 'react-router-dom';
2
+ export declare const routerConfig: {
3
+ path: string;
4
+ element: import("react/jsx-runtime").JSX.Element;
5
+ children: {
6
+ path: string;
7
+ element: import("react/jsx-runtime").JSX.Element;
8
+ }[];
9
+ }[];
10
+ export declare const router: ReturnType<typeof createBrowserRouter>;
@@ -1 +1,4 @@
1
1
  export { default as Header } from './components/header';
2
+ export { default as InputTag } from './components/input-tag';
3
+ export type { IProps as InputTagProps } from './components/input-tag';
4
+ export { default as FileUploadDrawer, UploadStoreProvider } from './components/uploadDrawer';