@zjlab-fe/data-hub-ui 0.2.0 → 0.2.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.
- package/dist/types/components/FileUploader/FileUploadModal.d.ts +17 -0
- package/dist/types/components/FileUploader/FileUploader.d.ts +9 -0
- package/dist/types/components/FileUploader/FileUploaderContextProvider.d.ts +9 -0
- package/dist/types/components/FileUploader/FileUploaderFileDragger.d.ts +9 -0
- package/dist/types/components/FileUploader/FileUploaderFileDraggerDragAreaDescription.d.ts +4 -0
- package/dist/types/components/FileUploader/FileUploaderList.d.ts +1 -0
- package/dist/types/components/FileUploader/FileUploaderListItem.d.ts +26 -0
- package/dist/types/components/FileUploader/FileUploaderListItemFail.d.ts +5 -0
- package/dist/types/components/FileUploader/FileUploaderListItemPaused.d.ts +5 -0
- package/dist/types/components/FileUploader/FileUploaderListItemUploading.d.ts +2 -0
- package/dist/types/components/FileUploader/FileUploaderMain.d.ts +7 -0
- package/dist/types/components/FileUploader/FileUploaderlListItemFinished.d.ts +5 -0
- package/dist/types/components/FileUploader/UploadStoreProvider.d.ts +36 -0
- package/dist/types/components/FileUploader/hooks/useCancelUpload.d.ts +2 -0
- package/dist/types/components/FileUploader/hooks/useCheckForDuplicates.d.ts +1 -0
- package/dist/types/components/FileUploader/hooks/useCurrentFIleOnInit.d.ts +5 -0
- package/dist/types/components/FileUploader/hooks/useCurrentFile.d.ts +14 -0
- package/dist/types/components/FileUploader/hooks/useCurrentFileOnAllUploaded.d.ts +1 -0
- package/dist/types/components/FileUploader/hooks/useCurrentFileOnCancel.d.ts +2 -0
- package/dist/types/components/FileUploader/hooks/useCurrentFileOnFail.d.ts +2 -0
- package/dist/types/components/FileUploader/hooks/useCurrentFileOnFinished.d.ts +2 -0
- package/dist/types/components/FileUploader/hooks/useCurrentFileOnUploading.d.ts +5 -0
- package/dist/types/components/FileUploader/hooks/useFileDragAndDrop.d.ts +9 -0
- package/dist/types/components/FileUploader/hooks/useFormatFiles.d.ts +1 -0
- package/dist/types/components/FileUploader/hooks/useOnMounted.d.ts +1 -0
- package/dist/types/components/FileUploader/hooks/useRemoveFilesInUploadQueue.d.ts +1 -0
- package/dist/types/components/FileUploader/hooks/useResumeUnfinishedUploads.d.ts +3 -0
- package/dist/types/components/FileUploader/hooks/useRetryUpload.d.ts +2 -0
- package/dist/types/components/FileUploader/hooks/useSaveUnfinishedUploads.d.ts +11 -0
- package/dist/types/components/FileUploader/hooks/useUploadContext.d.ts +26 -0
- package/dist/types/components/FileUploader/hooks/useWathUploadQueueAndSetupCurrentFile.d.ts +1 -0
- package/dist/types/components/FileUploader/icons/CloseFilled.d.ts +1 -0
- package/dist/types/components/FileUploader/icons/UnkownFileIcon.d.ts +1 -0
- package/dist/types/components/FileUploader/icons/UploadIcon.d.ts +1 -0
- package/dist/types/components/FileUploader/index.d.ts +6 -0
- package/dist/types/components/FileUploader/types.d.ts +60 -0
- package/dist/types/components/FileUploader/utils/calcDisplaySize.d.ts +4 -0
- package/dist/types/components/FileUploader/utils/checkExpiryTime.d.ts +5 -0
- package/dist/types/components/FileUploader/utils/createFileToUpload.d.ts +2 -0
- package/dist/types/components/FileUploader/utils/fileDB/addFilesToIndexdb.d.ts +1 -0
- package/dist/types/components/FileUploader/utils/fileDB/deleteFileInStore.d.ts +1 -0
- package/dist/types/components/FileUploader/utils/fileDB/deleteObjectStore.d.ts +1 -0
- package/dist/types/components/FileUploader/utils/fileDB/index.d.ts +75 -0
- package/dist/types/components/FileUploader/utils/fileDB/openDBAndRetrieveData.d.ts +29 -0
- package/dist/types/components/FileUploader/utils/fileDB/retrieveExistingData.d.ts +22 -0
- package/dist/types/components/FileUploader/utils/index.d.ts +6 -0
- package/dist/types/components/FileUploader/utils/retrieveAllFiles.d.ts +7 -0
- package/dist/types/components/FileUploader/utils/splitFileIntoChunk.d.ts +8 -0
- package/dist/types/components/copy/demo/index.d.ts +1 -0
- package/dist/types/components/copy/index.d.ts +21 -0
- package/dist/types/components/uploadDrawer/UploadStoreProvider.d.ts +4 -1
- package/dist/types/components/uploadDrawer/index.d.ts +5 -2
- package/dist/types/index.d.ts +7 -1
- package/es/index.js +1 -1
- package/lib/index.js +1 -1
- package/package.json +105 -102
- package/tailwind.config.js +43 -2
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ModalProps } from 'antd';
|
|
2
|
+
import { FileDraggerProps } from './FileUploaderFileDragger';
|
|
3
|
+
import { FileInfo, UploadManager } from './types';
|
|
4
|
+
export default function FileUploadModal({ config: { modal, dragArea }, ...props }: {
|
|
5
|
+
root?: string;
|
|
6
|
+
identifier: string;
|
|
7
|
+
showFinished?: boolean;
|
|
8
|
+
externalUploadContext?: FileInfo[];
|
|
9
|
+
onUploadSuccess?: (file: {
|
|
10
|
+
fileName: string;
|
|
11
|
+
}) => void;
|
|
12
|
+
extra?: React.ReactNode;
|
|
13
|
+
config: {
|
|
14
|
+
modal: ModalProps;
|
|
15
|
+
dragArea?: Omit<FileDraggerProps, 'onFileReceived'>;
|
|
16
|
+
};
|
|
17
|
+
} & UploadManager): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FileInfo, UploadableFile, UploadManager } from './types';
|
|
2
|
+
import { FileUploaderProps } from './FileUploaderMain';
|
|
3
|
+
export default function FileUploader(props: {
|
|
4
|
+
root?: string;
|
|
5
|
+
identifier: string;
|
|
6
|
+
showFinished?: boolean;
|
|
7
|
+
externalUploadContext?: FileInfo[];
|
|
8
|
+
onUploadSuccess?: (file: UploadableFile) => void;
|
|
9
|
+
} & UploadManager & FileUploaderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FileInfo, UploadableFile, UploadManager } from './types';
|
|
2
|
+
import { FileUploaderProps } from './FileUploaderMain';
|
|
3
|
+
export default function FileUploaderContextProvider({ extra, dragAreaConfig, ...props }: {
|
|
4
|
+
root?: string;
|
|
5
|
+
identifier: string;
|
|
6
|
+
showFinished?: boolean;
|
|
7
|
+
externalUploadContext?: FileInfo[];
|
|
8
|
+
onUploadSuccess?: (file: UploadableFile) => void;
|
|
9
|
+
} & UploadManager & FileUploaderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface FileDraggerProps {
|
|
3
|
+
accept?: string;
|
|
4
|
+
directory?: boolean;
|
|
5
|
+
dragAreaDescription?: ReactNode;
|
|
6
|
+
maxSizePerFile?: number;
|
|
7
|
+
onFileReceived: (_files: File[]) => void;
|
|
8
|
+
}
|
|
9
|
+
export default function FileUploaderFileDragger({ accept, directory, dragAreaDescription, maxSizePerFile, onFileReceived, }: FileDraggerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function FileUploadModalList(): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ProgressProps } from 'antd';
|
|
2
|
+
import { UploadableFile } from './types';
|
|
3
|
+
export declare const progressStyleProps: ProgressProps;
|
|
4
|
+
declare const _default: import("react").NamedExoticComponent<{
|
|
5
|
+
file: UploadableFile;
|
|
6
|
+
}>;
|
|
7
|
+
export default _default;
|
|
8
|
+
export declare function ListItemOutline({ children, className }: {
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
className?: string;
|
|
11
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare function ListItemName({ fileName, className }: {
|
|
13
|
+
fileName: string;
|
|
14
|
+
className?: string;
|
|
15
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare function ListItemStatus({ className, fileStatus, percentage, strokeColor, }: {
|
|
17
|
+
className?: string;
|
|
18
|
+
fileStatus: string;
|
|
19
|
+
percentage: number;
|
|
20
|
+
strokeColor?: string;
|
|
21
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare function ListItemActions({ onDelete, extraActions, className, }: {
|
|
23
|
+
onDelete: () => void;
|
|
24
|
+
extraActions?: React.ReactNode;
|
|
25
|
+
className?: string;
|
|
26
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FileDraggerProps } from './FileUploaderFileDragger';
|
|
3
|
+
export type FileUploaderProps = {
|
|
4
|
+
extra?: React.ReactNode;
|
|
5
|
+
dragAreaConfig?: Omit<FileDraggerProps, 'onFileReceived'>;
|
|
6
|
+
};
|
|
7
|
+
export default function FileUploaderMain({ extra, dragAreaConfig }: FileUploaderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { UploadableFile } from './types';
|
|
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
|
+
fileName: string;
|
|
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 declare function useCheckForDuplicates(): (files: File[]) => Promise<[boolean, Set<string>]>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { UploadableFile, FILE_UPLOAD_STATUS } from '../types';
|
|
2
|
+
export declare const currentFileAtom: import("jotai").PrimitiveAtom<UploadableFile | null> & {
|
|
3
|
+
init: UploadableFile | null;
|
|
4
|
+
};
|
|
5
|
+
export declare const currentFileNameAtom: import("jotai").Atom<string | undefined>;
|
|
6
|
+
export declare const currentFileStatusAtom: import("jotai").Atom<FILE_UPLOAD_STATUS | undefined>;
|
|
7
|
+
export declare const currentFileExpiryTimeAtom: import("jotai").Atom<string | undefined>;
|
|
8
|
+
export declare const currentFileUploadIdAtom: import("jotai").Atom<string | undefined>;
|
|
9
|
+
export declare const currentFileRawAtom: import("jotai").Atom<File | undefined>;
|
|
10
|
+
export declare const currentFilePercentageAtom: import("jotai").Atom<number | undefined>;
|
|
11
|
+
export declare const currentFileCancelControllersAtom: import("jotai").Atom<{
|
|
12
|
+
[key: string]: AbortController;
|
|
13
|
+
} | undefined>;
|
|
14
|
+
export declare function useCurrentFile(): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useOnAllUploaded(): (allSuccess: boolean) => Promise<void>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare function useFileDragAndDrop(directory: boolean, acceptList: Set<string>, triggerOnFileReceived: (files: File[]) => void): {
|
|
2
|
+
isDragOver: boolean;
|
|
3
|
+
handleDragEvents: {
|
|
4
|
+
onDrop: (e: React.DragEvent<HTMLDivElement>) => Promise<void>;
|
|
5
|
+
onDragLeave: () => void;
|
|
6
|
+
onDragEnter: (e: React.DragEvent) => void;
|
|
7
|
+
onDragOver: (e: React.DragEvent) => void;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useFormatFiles(): (allFiles: File[]) => Promise<void>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useOnMounted(): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useRemoveFilesInUploadQueue(): (duplicationOfName: Set<string>) => void;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { UploadStore } from '../UploadStoreProvider';
|
|
2
|
+
import { UploadableFile } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* 未完成任务信息存储在localStorage而不是indexdb中,需要分别处理
|
|
5
|
+
* 因为之前的测试中发现,indexdb的存储方式在某些浏览器中会丢失数据
|
|
6
|
+
* 所以需要将未完成任务信息存储在localStorage中
|
|
7
|
+
*
|
|
8
|
+
* TODO: 将未完成任务信息存储在indexdb中
|
|
9
|
+
*/
|
|
10
|
+
export declare function useSaveUnfinishedUploads(uploadStore: UploadStore): void;
|
|
11
|
+
export declare function formatUnfinishedUploads(uploads: UploadableFile[]): string;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { FileInfo, UploadableFile, UploadManager } from '../types';
|
|
2
|
+
export declare const rootAtom: import("jotai").PrimitiveAtom<string> & {
|
|
3
|
+
init: string;
|
|
4
|
+
};
|
|
5
|
+
export declare const identifierAtom: import("jotai").PrimitiveAtom<string> & {
|
|
6
|
+
init: string;
|
|
7
|
+
};
|
|
8
|
+
export declare const showFinishedAtom: import("jotai").PrimitiveAtom<boolean> & {
|
|
9
|
+
init: boolean;
|
|
10
|
+
};
|
|
11
|
+
export declare const uploadManagerAtom: import("jotai").PrimitiveAtom<UploadManager | null> & {
|
|
12
|
+
init: UploadManager | null;
|
|
13
|
+
};
|
|
14
|
+
export declare const onUploadSuccessAtom: import("jotai").PrimitiveAtom<((file: UploadableFile) => void) | null> & {
|
|
15
|
+
init: ((file: UploadableFile) => void) | null;
|
|
16
|
+
};
|
|
17
|
+
export declare const externalUploadContextAtom: import("jotai").PrimitiveAtom<FileInfo[]> & {
|
|
18
|
+
init: FileInfo[];
|
|
19
|
+
};
|
|
20
|
+
export declare function useUploadContext({ root, identifier, showFinished, externalUploadContext, getUploadUrls, onCancelUpload, onOnePartDone, onAllPartDone, onUploadSuccess, onDeleteFile, }: {
|
|
21
|
+
root?: string;
|
|
22
|
+
identifier: string;
|
|
23
|
+
showFinished?: boolean;
|
|
24
|
+
externalUploadContext?: FileInfo[];
|
|
25
|
+
onUploadSuccess?: (file: UploadableFile) => void;
|
|
26
|
+
} & UploadManager): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useWathUploadQueueAndSetupCurrentFile(): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function CloseFilled(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function UnkownFileIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function UploadIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
export type UploadUrl = {
|
|
2
|
+
uploadUrl: string;
|
|
3
|
+
partNum: number;
|
|
4
|
+
};
|
|
5
|
+
export declare const enum FILE_UPLOAD_STATUS {
|
|
6
|
+
INIT = 1,
|
|
7
|
+
UPLOADING = 2,
|
|
8
|
+
ALL_UPLOADED = 3,
|
|
9
|
+
FINISHED = 4,
|
|
10
|
+
FAILED = 5,
|
|
11
|
+
PAUSED = 6,
|
|
12
|
+
CANCELED = 7
|
|
13
|
+
}
|
|
14
|
+
export type UploadableFile = {
|
|
15
|
+
raw?: File;
|
|
16
|
+
uploadId: string;
|
|
17
|
+
fileName: string;
|
|
18
|
+
chunkSize: number;
|
|
19
|
+
partCount: number;
|
|
20
|
+
percentage: number;
|
|
21
|
+
expiryTime?: string;
|
|
22
|
+
uploadStatus: number[];
|
|
23
|
+
failSeq: UploadUrl[];
|
|
24
|
+
uploadUrls: UploadUrl[];
|
|
25
|
+
completeSeq: UploadUrl[];
|
|
26
|
+
fileStatus: FILE_UPLOAD_STATUS;
|
|
27
|
+
cancelControllers: {
|
|
28
|
+
[key: string]: AbortController;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
export type FileInfo = {
|
|
32
|
+
fileName: string;
|
|
33
|
+
isFolder?: boolean;
|
|
34
|
+
};
|
|
35
|
+
type UploadInfoErrorResult = {
|
|
36
|
+
status: false;
|
|
37
|
+
reason?: string;
|
|
38
|
+
};
|
|
39
|
+
type UploadInfoSuccessResult = {
|
|
40
|
+
status: true;
|
|
41
|
+
uploadInfo: {
|
|
42
|
+
uploadUrls: UploadUrl[];
|
|
43
|
+
uploadId: string;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
type UploadInfoResult = UploadInfoErrorResult | UploadInfoSuccessResult;
|
|
47
|
+
export type UploadManager = {
|
|
48
|
+
getUploadUrls: (fileName: string, partCount: number) => Promise<UploadInfoResult>;
|
|
49
|
+
onCancelUpload: (fileName: string, uploadId: string) => Promise<UploadInfoErrorResult | {
|
|
50
|
+
status: true;
|
|
51
|
+
}>;
|
|
52
|
+
onOnePartDone: (fileName: string, uploadId: string, partNum: number) => Promise<UploadInfoErrorResult | {
|
|
53
|
+
status: true;
|
|
54
|
+
}>;
|
|
55
|
+
onAllPartDone: (fileName: string, uploadId: string) => Promise<UploadInfoErrorResult | {
|
|
56
|
+
status: true;
|
|
57
|
+
}>;
|
|
58
|
+
onDeleteFile?: (filePath: string) => Promise<boolean>;
|
|
59
|
+
};
|
|
60
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function addFilesToIndexdb(storeName: string, files: File[]): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function deleteFileInStore(storeName: string, fileName: string): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function deleteObjectStore(storeName: string): Promise<void>;
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* IndexedDB 是一个底层的 API,用于在客户端存储大量的结构化数据。
|
|
3
|
+
* 它是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。
|
|
4
|
+
*
|
|
5
|
+
* 事务是一组原子性的数据库操作,具有以下特点(ACID):
|
|
6
|
+
* 1. 原子性(Atomicity): 事务中的所有操作要么全部成功,要么全部失败回滚
|
|
7
|
+
* 2. 一致性(Consistency): 事务执行前后数据库必须处于一致状态
|
|
8
|
+
* 3. 隔离性(Isolation): 多个事务并发执行时不会相互影响
|
|
9
|
+
* 4. 持久性(Durability): 事务一旦提交,其结果就是永久性的
|
|
10
|
+
*
|
|
11
|
+
* 一致状态(Consistency)是指数据库在事务执行前后都必须满足预定的规则和约束条件,保持数据的完整性和有效性。
|
|
12
|
+
*
|
|
13
|
+
* 在 IndexedDB 中:
|
|
14
|
+
* - 所有数据操作都必须在事务中进行
|
|
15
|
+
* - 事务可以是只读或读写的
|
|
16
|
+
* - 事务有自动提交和回滚机制
|
|
17
|
+
* - 事务具有作用域,只能访问指定的对象仓库
|
|
18
|
+
*
|
|
19
|
+
* 基本概念:
|
|
20
|
+
* - Database: 数据库
|
|
21
|
+
* - ObjectStore: 对象仓库,类似于关系型数据库中的表
|
|
22
|
+
* - Index: 索引,用于加快数据检索
|
|
23
|
+
* - Transaction: 事务,确保数据操作的原子性
|
|
24
|
+
* - Cursor: 游标,用于遍历数据
|
|
25
|
+
*
|
|
26
|
+
* 主要 API:
|
|
27
|
+
* 1. 打开数据库:
|
|
28
|
+
* const request = indexedDB.open(dbName, version)
|
|
29
|
+
*
|
|
30
|
+
* 2. 创建对象仓库:
|
|
31
|
+
* db.createObjectStore(storeName, { keyPath: 'id' })
|
|
32
|
+
*
|
|
33
|
+
* 3. 事务操作:
|
|
34
|
+
* const transaction = db.transaction([storeName], 'readwrite')
|
|
35
|
+
* const store = transaction.objectStore(storeName)
|
|
36
|
+
*
|
|
37
|
+
* 4. 数据操作:
|
|
38
|
+
* - 添加: store.add(data)
|
|
39
|
+
* - 获取: store.get(key)
|
|
40
|
+
* - 更新: store.put(data)
|
|
41
|
+
* - 删除: store.delete(key)
|
|
42
|
+
*
|
|
43
|
+
* 5. 索引操作:
|
|
44
|
+
* - 创建: store.createIndex(indexName, keyPath)
|
|
45
|
+
* - 使用: store.index(indexName).get(value)
|
|
46
|
+
*
|
|
47
|
+
* KeyPath 说明:
|
|
48
|
+
* - keyPath 是对象仓库中用于唯一标识记录的属性路径
|
|
49
|
+
* - 它类似于关系型数据库中的主键(Primary Key)
|
|
50
|
+
* - keyPath 可以是:
|
|
51
|
+
* 1. 简单字符串: { keyPath: 'id' }
|
|
52
|
+
* 示例数据: { id: 1, name: 'file1' }
|
|
53
|
+
*
|
|
54
|
+
* 2. 点符号路径: { keyPath: 'user.id' }
|
|
55
|
+
* 示例数据: { user: { id: 1 }, name: 'file1' }
|
|
56
|
+
*
|
|
57
|
+
* 3. 数组路径: { keyPath: ['userId', 'timestamp'] }
|
|
58
|
+
* 示例数据: { userId: 1, timestamp: 123456, name: 'file1' }
|
|
59
|
+
*
|
|
60
|
+
* - 如果不指定 keyPath,可以使用自动生成的键:
|
|
61
|
+
* db.createObjectStore(storeName, { autoIncrement: true })
|
|
62
|
+
*
|
|
63
|
+
* - keyPath 的值必须是:
|
|
64
|
+
* - 唯一的
|
|
65
|
+
* - 非空的
|
|
66
|
+
* - 可以是数字、字符串或日期类型
|
|
67
|
+
* - 不能是数组或对象类型(除非是复合键)
|
|
68
|
+
*/
|
|
69
|
+
export declare const DATABASE_NAME = "uploadStore";
|
|
70
|
+
export declare let CURRENT_DATABASE_CONNECTION: IDBDatabase;
|
|
71
|
+
export declare function updateUploadsDatabase(db: IDBDatabase): void;
|
|
72
|
+
export { openDBAndRetrieveData } from './openDBAndRetrieveData';
|
|
73
|
+
export { addFilesToIndexdb } from './addFilesToIndexdb';
|
|
74
|
+
export { deleteFileInStore } from './deleteFileInStore';
|
|
75
|
+
export { deleteObjectStore } from './deleteObjectStore';
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* IndexedDB 数据库操作说明:
|
|
3
|
+
*
|
|
4
|
+
* 1. 版本升级机制
|
|
5
|
+
* - 每个数据库都有一个版本号,用于管理数据库结构的变化
|
|
6
|
+
* - 当需要修改数据库结构(如添加/删除对象仓库)时,必须升级数据库版本
|
|
7
|
+
* - 版本号必须递增,不能降级或重用相同版本号
|
|
8
|
+
*
|
|
9
|
+
* 2. 升级流程
|
|
10
|
+
* - 首先关闭现有数据库连接
|
|
11
|
+
* - 使用新版本号打开数据库,触发 onupgradeneeded 事件
|
|
12
|
+
* - 在 onupgradeneeded 事件中进行数据库结构修改(这是唯一可以修改数据库结构的地方)
|
|
13
|
+
*
|
|
14
|
+
* 3. 注意事项
|
|
15
|
+
* - 升级过程中需要处理各种错误情况(如被阻塞、升级失败等)
|
|
16
|
+
* - 需要监听 versionchange 事件,确保数据库连接正确关闭
|
|
17
|
+
* - 建议在升级完成后重新检查对象仓库是否创建成功
|
|
18
|
+
*
|
|
19
|
+
* 4. 事件执行顺序
|
|
20
|
+
* - 当打开数据库时:
|
|
21
|
+
* a. 如果数据库不需要升级:直接触发 onsuccess
|
|
22
|
+
* b. 如果数据库需要升级:
|
|
23
|
+
* 1. 先触发 onupgradeneeded(在此事件中修改数据库结构)
|
|
24
|
+
* 2. 再触发 onsuccess(表示数据库打开成功)
|
|
25
|
+
* - 错误处理:
|
|
26
|
+
* - onerror:在任何阶段发生错误时触发
|
|
27
|
+
* - onblocked:当其他标签页正在使用旧版本数据库时触发
|
|
28
|
+
*/
|
|
29
|
+
export declare function openDBAndRetrieveData(storeName: string): Promise<File[]>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* IDBDatabase.transaction 使用说明:
|
|
3
|
+
* - 用于创建一个事务,以便在 IndexedDB 数据库中执行一系列的操作。
|
|
4
|
+
* - 语法: const transaction = db.transaction(storeNames, mode);
|
|
5
|
+
* - `storeNames`: 字符串或字符串数组,表示要访问的对象仓库名称。
|
|
6
|
+
* - `mode`: 事务模式,'readonly' 或 'readwrite',默认 'readonly'。
|
|
7
|
+
* - 事务模式:
|
|
8
|
+
* - `readonly`: 只能读取数据。
|
|
9
|
+
* - `readwrite`: 可以进行读写操作。
|
|
10
|
+
* - 注意:
|
|
11
|
+
* - 事务只能访问在创建时指定的对象仓库。
|
|
12
|
+
* - 事务在所有操作完成后会自动提交,失败则回滚。
|
|
13
|
+
* - 事务和请求都有各自的事件处理程序。
|
|
14
|
+
*
|
|
15
|
+
* objectStore.openCursor 使用说明:
|
|
16
|
+
* - 游标的遍历是异步的,使用事件驱动机制:
|
|
17
|
+
* - `onsuccess` 事件在游标初始化/游标成功移动到一条记录时触发。
|
|
18
|
+
* - 当游标指向一条记录时,可以访问该记录的 key 和 value。
|
|
19
|
+
* - 调用 cursor.continue() 会将游标移动到下一条记录,并再次触发 onsuccess 事件。
|
|
20
|
+
* - 这个过程会一直持续,直到游标遍历完所有记录。当游标遍历完所有记录时,`onsuccess` 事件中 `cursor.result` 为 `null`,此时解析 Promise。
|
|
21
|
+
*/
|
|
22
|
+
export declare function retrieveExistingData(storeName: string): Promise<File[]>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 文件系统 API 中,FileSystemEntry 是表示文件系统中的条目(项目)的基础接口, 它可以是文件或目录,主要有两种类型的 Entry:
|
|
3
|
+
* 1. FileSystemFileEntry(文件条目)代表一个文件, 可以通过 file() 方法获取实际的 File 对象
|
|
4
|
+
* 2. FileSystemDirectoryEntry(目录条目)代表一个文件夹/目录, 可以包含其他文件或目录, 可以通过 createReader() 方法读取目录内容
|
|
5
|
+
*/
|
|
6
|
+
declare function retrieveFilesFromEntry(item: FileSystemEntry, directory: boolean, acceptList: Set<string>, fileNameWithLocation?: string): Promise<File[]>;
|
|
7
|
+
export { retrieveFilesFromEntry as retrieveAllFiles };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function Demo(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export interface ICopy {
|
|
2
|
+
/** 是否展示复制成功后的反馈信息,默认展示 */
|
|
3
|
+
showFeedback?: boolean;
|
|
4
|
+
/** 待复制到粘贴板的文本,如果传入为null or undefined,将不会自动复制到粘贴板 */
|
|
5
|
+
text?: string;
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
/** 语言,默认:zh */
|
|
8
|
+
lang?: 'zh' | 'en';
|
|
9
|
+
}
|
|
10
|
+
export default function Copy(props: ICopy): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
/**
|
|
12
|
+
* 复制文本内容到粘贴板
|
|
13
|
+
* @param text {string} 文本内容
|
|
14
|
+
* @param options {object} 其它选项
|
|
15
|
+
* @param options.showFeedback {boolean} 是否展示复制成功的反馈信息,默认展示
|
|
16
|
+
* @param options.lang {string} 语言,默认:zh
|
|
17
|
+
*/
|
|
18
|
+
export declare function copy(text: string, options?: {
|
|
19
|
+
showFeedback?: boolean;
|
|
20
|
+
lang?: 'zh' | 'en';
|
|
21
|
+
}): void;
|
|
@@ -30,7 +30,10 @@ type UploadStoreDispatch = React.Dispatch<UploadStoreAction>;
|
|
|
30
30
|
export declare const TEMP_STORE: {};
|
|
31
31
|
export declare const UploadStoreContext: React.Context<UploadStore>;
|
|
32
32
|
export declare const UploadStoreDispatchContext: React.Context<UploadStoreDispatch>;
|
|
33
|
-
|
|
33
|
+
/**
|
|
34
|
+
* @deprecated This component is deprecated and will be removed in future releases.
|
|
35
|
+
*/
|
|
36
|
+
export default function UploadDrawerUploadStoreProvider({ children }: {
|
|
34
37
|
children: React.ReactElement;
|
|
35
38
|
}): import("react/jsx-runtime").JSX.Element;
|
|
36
39
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import UploadDrawerUploadStoreProvider from './UploadStoreProvider';
|
|
2
2
|
import { FileUploadDrawerProps } from './fileUploadDrawer';
|
|
3
3
|
import './index.css';
|
|
4
4
|
export type UploadUrl = {
|
|
@@ -40,5 +40,8 @@ export type FileUploadDrawerContextProps = {
|
|
|
40
40
|
}>;
|
|
41
41
|
};
|
|
42
42
|
export declare const FileUploadDrawerContext: import("react").Context<FileUploadDrawerContextProps>;
|
|
43
|
-
export {
|
|
43
|
+
export { UploadDrawerUploadStoreProvider };
|
|
44
|
+
/**
|
|
45
|
+
* @deprecated This component is deprecated and will be removed in future releases.
|
|
46
|
+
*/
|
|
44
47
|
export default function FileUploadDrawer(props: FileUploadDrawerContextProps & FileUploadDrawerProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
export { default as Header } from './components/header';
|
|
2
2
|
export { default as InputTag } from './components/input-tag';
|
|
3
3
|
export type { IProps as InputTagProps } from './components/input-tag';
|
|
4
|
-
export { default as FileUploadDrawer
|
|
4
|
+
export { default as FileUploadDrawer } from './components/uploadDrawer';
|
|
5
|
+
export { UploadDrawerUploadStoreProvider } from './components/uploadDrawer';
|
|
6
|
+
export { default as FileUploader } from './components/FileUploader';
|
|
7
|
+
export { FileUploadModal } from './components/FileUploader';
|
|
8
|
+
export { UploadStoreProvider } from './components/FileUploader';
|
|
5
9
|
export { default as FilePreview } from './components/file-preview';
|
|
10
|
+
export { default as Copy, copy } from './components/copy';
|
|
11
|
+
export type { ICopy } from './components/copy';
|
|
6
12
|
export { default as ConfirmAgain } from './components/confirm-again';
|
|
7
13
|
export { default as FloatingLayer } from './components/floating-layer';
|
|
8
14
|
export type { IFilePreviewProps } from './components/file-preview/interface';
|