deepsea-components 5.9.7 → 5.10.0
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/cjs/components/ImportExcel.d.ts +4 -4
- package/dist/cjs/components/ImportExcel.js +4 -5
- package/dist/cjs/components/ImportExcel.js.map +2 -2
- package/dist/cjs/components/InputFile.d.ts +16 -43
- package/dist/cjs/components/InputFile.js +16 -75
- package/dist/cjs/components/InputFile.js.map +2 -2
- package/dist/cjs/components/InputFileButton.d.ts +10 -0
- package/dist/cjs/components/InputFileButton.js +109 -0
- package/dist/cjs/components/InputFileButton.js.map +7 -0
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/components/ImportExcel.d.ts +4 -4
- package/dist/esm/components/ImportExcel.js +4 -8
- package/dist/esm/components/ImportExcel.js.map +1 -1
- package/dist/esm/components/InputFile.d.ts +16 -43
- package/dist/esm/components/InputFile.js +21 -104
- package/dist/esm/components/InputFile.js.map +1 -1
- package/dist/esm/components/InputFileButton.d.ts +10 -0
- package/dist/esm/components/InputFileButton.js +90 -0
- package/dist/esm/components/InputFileButton.js.map +1 -0
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/ImportExcel.tsx +7 -7
- package/src/components/InputFile.tsx +39 -128
- package/src/components/InputFileButton.tsx +102 -0
- package/src/index.ts +1 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import { FC } from "react";
|
|
2
2
|
import { InputFileProps } from "./InputFile";
|
|
3
|
-
export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "
|
|
4
|
-
|
|
3
|
+
export interface ImportExcelProps extends Omit<InputFileProps<false, "arrayBuffer">, "multiple" | "accept" | "type" | "onValueChange"> {
|
|
4
|
+
onValueChange?: (data: Record<string, any>[]) => void;
|
|
5
5
|
}
|
|
6
6
|
/** 专门用于读取 excel 的组件 */
|
|
7
|
-
export declare const ImportExcel:
|
|
7
|
+
export declare const ImportExcel: FC<ImportExcelProps>;
|
|
@@ -23,13 +23,12 @@ __export(ImportExcel_exports, {
|
|
|
23
23
|
ImportExcel: () => ImportExcel
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(ImportExcel_exports);
|
|
26
|
-
var import_react = require("react");
|
|
27
26
|
var import_deepsea_tools = require("deepsea-tools");
|
|
28
27
|
var import_InputFile = require("./InputFile");
|
|
29
|
-
var ImportExcel = (
|
|
30
|
-
const {
|
|
31
|
-
return /* @__PURE__ */ React.createElement(import_InputFile.InputFile, {
|
|
32
|
-
}
|
|
28
|
+
var ImportExcel = (props) => {
|
|
29
|
+
const { onValueChange, ...rest } = props;
|
|
30
|
+
return /* @__PURE__ */ React.createElement(import_InputFile.InputFile, { accept: ".xlsx", type: "arrayBuffer", onValueChange: (data) => onValueChange?.((0, import_deepsea_tools.readExcel)(data)), ...rest });
|
|
31
|
+
};
|
|
33
32
|
// Annotate the CommonJS export names for ESM import in node:
|
|
34
33
|
0 && (module.exports = {
|
|
35
34
|
ImportExcel
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/ImportExcel.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\"\n\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,
|
|
4
|
+
"sourcesContent": ["\"use client\"\n\nimport { readExcel } from \"deepsea-tools\"\nimport { FC } from \"react\"\n\nimport { InputFile, InputFileProps } from \"./InputFile\"\n\nexport interface ImportExcelProps extends Omit<InputFileProps<false, \"arrayBuffer\">, \"multiple\" | \"accept\" | \"type\" | \"onValueChange\"> {\n onValueChange?: (data: Record<string, any>[]) => void\n}\n\n/** 专门用于读取 excel 的组件 */\nexport const ImportExcel: FC<ImportExcelProps> = props => {\n const { onValueChange, ...rest } = props\n\n return <InputFile accept=\".xlsx\" type=\"arrayBuffer\" onValueChange={data => onValueChange?.(readExcel(data))} {...rest} />\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAA0B;AAG1B,uBAA0C;AAOnC,IAAM,cAAoC,WAAS;AACtD,QAAM,EAAE,eAAe,GAAG,KAAK,IAAI;AAEnC,SAAO,oCAAC,8BAAU,QAAO,SAAQ,MAAK,eAAc,eAAe,UAAQ,oBAAgB,gCAAU,IAAI,CAAC,GAAI,GAAG,MAAM;AAC3H;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,53 +1,26 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export interface
|
|
1
|
+
import { ComponentProps, ReactNode } from "react";
|
|
2
|
+
export interface InputFileDataTypeMap {
|
|
3
3
|
base64: string;
|
|
4
4
|
text: string;
|
|
5
5
|
arrayBuffer: ArrayBuffer;
|
|
6
6
|
binary: string;
|
|
7
7
|
file: File;
|
|
8
8
|
}
|
|
9
|
-
export type InputFileDataType = keyof
|
|
10
|
-
export
|
|
11
|
-
|
|
12
|
-
file: File;
|
|
9
|
+
export type InputFileDataType = keyof InputFileDataTypeMap;
|
|
10
|
+
export declare function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypeMap[T]>;
|
|
11
|
+
export interface InputFileBaseProps extends Omit<ComponentProps<"input">, "multiple" | "type"> {
|
|
13
12
|
}
|
|
14
|
-
export type
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
onChange?: (data: InputFileData<ArrayBuffer>) => void;
|
|
22
|
-
} | {
|
|
23
|
-
multiple?: false;
|
|
24
|
-
type?: "file";
|
|
25
|
-
onChange?: (data: InputFileData<File>) => void;
|
|
26
|
-
} | {
|
|
27
|
-
multiple: true;
|
|
28
|
-
type: "base64" | "text" | "binary";
|
|
29
|
-
onChange?: (data: InputFileData<string>[]) => void;
|
|
30
|
-
} | {
|
|
31
|
-
multiple: true;
|
|
32
|
-
type: "arrayBuffer";
|
|
33
|
-
onChange?: (data: InputFileData<ArrayBuffer>[]) => void;
|
|
34
|
-
} | {
|
|
35
|
-
multiple: true;
|
|
36
|
-
type?: "file";
|
|
37
|
-
onChange?: (data: InputFileData<File>[]) => void;
|
|
38
|
-
}) & Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "multiple" | "type"> & {
|
|
13
|
+
export type FileType<Multiple extends boolean> = Multiple extends true ? File[] : File;
|
|
14
|
+
export type ValueType<Multiple extends boolean, Type extends InputFileDataType> = Multiple extends true ? InputFileDataTypeMap[Type][] : InputFileDataTypeMap[Type];
|
|
15
|
+
export interface InputFileExtraProps<Multiple extends boolean = false, Type extends InputFileDataType = "file"> {
|
|
16
|
+
multiple?: Multiple;
|
|
17
|
+
type?: Type;
|
|
18
|
+
onValueChange?: (data: ValueType<Multiple, Type>) => void;
|
|
19
|
+
onFileChange?: (data: FileType<Multiple>) => void;
|
|
39
20
|
/** 是否在捕获文件后清除 input 上的文件,默认为 false,主要区别在于如果不清除,连续两次选择同样的文件不会触发 onChange 事件,如果用于 form 表单,请设置为 flase */
|
|
40
21
|
clearAfterChange?: boolean;
|
|
41
|
-
}
|
|
42
|
-
export
|
|
22
|
+
}
|
|
23
|
+
export interface InputFileProps<Multiple extends boolean = false, Type extends InputFileDataType = "file"> extends InputFileBaseProps, InputFileExtraProps<Multiple, Type> {
|
|
24
|
+
}
|
|
43
25
|
/** 专用于读取文件的组件 */
|
|
44
|
-
export declare
|
|
45
|
-
export type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
46
|
-
input: InputFileProps;
|
|
47
|
-
dragFile?: boolean;
|
|
48
|
-
};
|
|
49
|
-
/** 专用于读取文件的 button 组件 */
|
|
50
|
-
export declare const InputFileButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
51
|
-
input: InputFileProps;
|
|
52
|
-
dragFile?: boolean | undefined;
|
|
53
|
-
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
26
|
+
export declare function InputFile<Multiple extends boolean = false, Type extends InputFileDataType = "file">(props: InputFileProps<Multiple, Type>): ReactNode;
|
|
@@ -21,7 +21,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
var InputFile_exports = {};
|
|
22
22
|
__export(InputFile_exports, {
|
|
23
23
|
InputFile: () => InputFile,
|
|
24
|
-
InputFileButton: () => InputFileButton,
|
|
25
24
|
getFileData: () => getFileData
|
|
26
25
|
});
|
|
27
26
|
module.exports = __toCommonJS(InputFile_exports);
|
|
@@ -50,10 +49,11 @@ async function getFileData(file, type) {
|
|
|
50
49
|
});
|
|
51
50
|
});
|
|
52
51
|
}
|
|
53
|
-
|
|
54
|
-
const { multiple = false, type = "file", onChange, disabled:
|
|
52
|
+
function InputFile(props) {
|
|
53
|
+
const { multiple = false, type = "file", onChange: _onChange, disabled: _disabled, clearAfterChange, onValueChange, onFileChange, ...rest } = props;
|
|
55
54
|
const [disabled, setDisabled] = (0, import_react.useState)(false);
|
|
56
|
-
async function
|
|
55
|
+
async function onChange(e) {
|
|
56
|
+
_onChange?.(e);
|
|
57
57
|
const input = e.target;
|
|
58
58
|
const { files } = input;
|
|
59
59
|
if (!files || files.length === 0)
|
|
@@ -61,19 +61,18 @@ var InputFile = (0, import_react.forwardRef)((props, ref) => {
|
|
|
61
61
|
setDisabled(true);
|
|
62
62
|
try {
|
|
63
63
|
if (multiple) {
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
});
|
|
64
|
+
const files2 = Array.from(files);
|
|
65
|
+
const values = [];
|
|
66
|
+
for (const file of files2) {
|
|
67
|
+
const value = await getFileData(file, type);
|
|
68
|
+
values.push(value);
|
|
70
69
|
}
|
|
71
|
-
|
|
70
|
+
onFileChange?.(files2);
|
|
71
|
+
onValueChange?.(values);
|
|
72
72
|
} else {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
});
|
|
73
|
+
const file = files[0];
|
|
74
|
+
onFileChange?.(file);
|
|
75
|
+
onValueChange?.(await getFileData(file, type));
|
|
77
76
|
}
|
|
78
77
|
} finally {
|
|
79
78
|
if (clearAfterChange)
|
|
@@ -81,69 +80,11 @@ var InputFile = (0, import_react.forwardRef)((props, ref) => {
|
|
|
81
80
|
setDisabled(false);
|
|
82
81
|
}
|
|
83
82
|
}
|
|
84
|
-
return /* @__PURE__ */ React.createElement("input", {
|
|
85
|
-
}
|
|
86
|
-
var InputFileButton = (0, import_react.forwardRef)((props, ref) => {
|
|
87
|
-
const { onClick: _onClick, input: inputProps, onDrop: _onDrop, onDragOver: _onDragOver, dragFile, disabled: _disabled, ...rest } = props;
|
|
88
|
-
const { style, disabled: __disabled, multiple, onChange, type = "file", ...restInputProps } = inputProps;
|
|
89
|
-
const [disabled, setDisabled] = (0, import_react.useState)(false);
|
|
90
|
-
const input = (0, import_react.useRef)(null);
|
|
91
|
-
function onClick(e) {
|
|
92
|
-
input.current?.click();
|
|
93
|
-
_onClick?.(e);
|
|
94
|
-
}
|
|
95
|
-
async function onDrop(e) {
|
|
96
|
-
_onDrop?.(e);
|
|
97
|
-
if (disabled || !dragFile)
|
|
98
|
-
return;
|
|
99
|
-
e.preventDefault();
|
|
100
|
-
const { files } = e.dataTransfer;
|
|
101
|
-
if (!files || files.length === 0)
|
|
102
|
-
return;
|
|
103
|
-
setDisabled(true);
|
|
104
|
-
try {
|
|
105
|
-
if (multiple) {
|
|
106
|
-
const result = [];
|
|
107
|
-
for (const file of Array.from(files)) {
|
|
108
|
-
result.push({
|
|
109
|
-
result: await getFileData(file, type),
|
|
110
|
-
file
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
onChange?.(result);
|
|
114
|
-
} else {
|
|
115
|
-
onChange?.({
|
|
116
|
-
result: await getFileData(files[0], type),
|
|
117
|
-
file: files[0]
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
} finally {
|
|
121
|
-
setDisabled(false);
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
function onDragOver(e) {
|
|
125
|
-
_onDragOver?.(e);
|
|
126
|
-
if (disabled || !dragFile)
|
|
127
|
-
return;
|
|
128
|
-
e.preventDefault();
|
|
129
|
-
}
|
|
130
|
-
return /* @__PURE__ */ React.createElement(import_react.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
131
|
-
InputFile,
|
|
132
|
-
{
|
|
133
|
-
ref: input,
|
|
134
|
-
disabled: disabled || _disabled || __disabled,
|
|
135
|
-
style: { display: "none", ...style },
|
|
136
|
-
multiple,
|
|
137
|
-
onChange,
|
|
138
|
-
type,
|
|
139
|
-
...restInputProps
|
|
140
|
-
}
|
|
141
|
-
), /* @__PURE__ */ React.createElement("button", { ref, type: "button", disabled: disabled || _disabled, onClick, onDrop, onDragOver, ...rest }));
|
|
142
|
-
});
|
|
83
|
+
return /* @__PURE__ */ React.createElement("input", { disabled: disabled || _disabled, type: "file", multiple, onChange, ...rest });
|
|
84
|
+
}
|
|
143
85
|
// Annotate the CommonJS export names for ESM import in node:
|
|
144
86
|
0 && (module.exports = {
|
|
145
87
|
InputFile,
|
|
146
|
-
InputFileButton,
|
|
147
88
|
getFileData
|
|
148
89
|
});
|
|
149
90
|
//# sourceMappingURL=InputFile.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/InputFile.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\"\n\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["\"use client\"\n\nimport { ChangeEvent, ComponentProps, ReactNode, useState } from \"react\"\n\nexport interface InputFileDataTypeMap {\n base64: string\n text: string\n arrayBuffer: ArrayBuffer\n binary: string\n file: File\n}\n\nexport type InputFileDataType = keyof InputFileDataTypeMap\n\nexport async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypeMap[T]> {\n const fileReader = new FileReader()\n switch (type) {\n case \"arrayBuffer\":\n fileReader.readAsArrayBuffer(file)\n break\n case \"binary\":\n fileReader.readAsBinaryString(file)\n break\n case \"base64\":\n fileReader.readAsDataURL(file)\n break\n case \"text\":\n fileReader.readAsText(file)\n break\n default:\n return file as any\n }\n return new Promise(resolve => {\n fileReader.addEventListener(\"load\", () => {\n resolve(fileReader.result as any)\n })\n })\n}\n\nexport interface InputFileBaseProps extends Omit<ComponentProps<\"input\">, \"multiple\" | \"type\"> {}\n\nexport type FileType<Multiple extends boolean> = Multiple extends true ? File[] : File\nexport type ValueType<Multiple extends boolean, Type extends InputFileDataType> = Multiple extends true\n ? InputFileDataTypeMap[Type][]\n : InputFileDataTypeMap[Type]\n\nexport interface InputFileExtraProps<Multiple extends boolean = false, Type extends InputFileDataType = \"file\"> {\n multiple?: Multiple\n type?: Type\n onValueChange?: (data: ValueType<Multiple, Type>) => void\n onFileChange?: (data: FileType<Multiple>) => void\n /** 是否在捕获文件后清除 input 上的文件,默认为 false,主要区别在于如果不清除,连续两次选择同样的文件不会触发 onChange 事件,如果用于 form 表单,请设置为 flase */\n clearAfterChange?: boolean\n}\n\nexport interface InputFileProps<Multiple extends boolean = false, Type extends InputFileDataType = \"file\">\n extends InputFileBaseProps,\n InputFileExtraProps<Multiple, Type> {}\n\n/** 专用于读取文件的组件 */\nexport function InputFile<Multiple extends boolean = false, Type extends InputFileDataType = \"file\">(props: InputFileProps<Multiple, Type>): ReactNode {\n const { multiple = false, type = \"file\", onChange: _onChange, disabled: _disabled, clearAfterChange, onValueChange, onFileChange, ...rest } = props\n const [disabled, setDisabled] = useState(false)\n\n async function onChange(e: ChangeEvent<HTMLInputElement>) {\n _onChange?.(e)\n const input = e.target\n const { files } = input\n if (!files || files.length === 0) return\n setDisabled(true)\n try {\n if (multiple) {\n const files2: File[] = Array.from(files)\n const values: InputFileDataTypeMap[Type][] = []\n for (const file of files2) {\n const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]\n values.push(value)\n }\n onFileChange?.(files2 as FileType<Multiple>)\n onValueChange?.(values as ValueType<Multiple, Type>)\n } else {\n const file = files[0]\n onFileChange?.(file as FileType<Multiple>)\n onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)\n }\n } finally {\n if (clearAfterChange) input.value = \"\"\n setDisabled(false)\n }\n }\n\n return <input disabled={disabled || _disabled} type=\"file\" multiple={multiple} onChange={onChange} {...rest} />\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAiE;AAYjE,eAAsB,YAAyC,MAAY,MAA2C;AAClH,QAAM,aAAa,IAAI,WAAW;AAClC,UAAQ,MAAM;AAAA,IACV,KAAK;AACD,iBAAW,kBAAkB,IAAI;AACjC;AAAA,IACJ,KAAK;AACD,iBAAW,mBAAmB,IAAI;AAClC;AAAA,IACJ,KAAK;AACD,iBAAW,cAAc,IAAI;AAC7B;AAAA,IACJ,KAAK;AACD,iBAAW,WAAW,IAAI;AAC1B;AAAA,IACJ;AACI,aAAO;AAAA,EACf;AACA,SAAO,IAAI,QAAQ,aAAW;AAC1B,eAAW,iBAAiB,QAAQ,MAAM;AACtC,cAAQ,WAAW,MAAa;AAAA,IACpC,CAAC;AAAA,EACL,CAAC;AACL;AAuBO,SAAS,UAAqF,OAAkD;AACnJ,QAAM,EAAE,WAAW,OAAO,OAAO,QAAQ,UAAU,WAAW,UAAU,WAAW,kBAAkB,eAAe,cAAc,GAAG,KAAK,IAAI;AAC9I,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAE9C,iBAAe,SAAS,GAAkC;AACtD,gBAAY,CAAC;AACb,UAAM,QAAQ,EAAE;AAChB,UAAM,EAAE,MAAM,IAAI;AAClB,QAAI,CAAC,SAAS,MAAM,WAAW;AAAG;AAClC,gBAAY,IAAI;AAChB,QAAI;AACA,UAAI,UAAU;AACV,cAAM,SAAiB,MAAM,KAAK,KAAK;AACvC,cAAM,SAAuC,CAAC;AAC9C,mBAAW,QAAQ,QAAQ;AACvB,gBAAM,QAAS,MAAM,YAAY,MAAM,IAAI;AAC3C,iBAAO,KAAK,KAAK;AAAA,QACrB;AACA,uBAAe,MAA4B;AAC3C,wBAAgB,MAAmC;AAAA,MACvD,OAAO;AACH,cAAM,OAAO,MAAM,CAAC;AACpB,uBAAe,IAA0B;AACzC,wBAAiB,MAAM,YAAY,MAAM,IAAI,CAA+B;AAAA,MAChF;AAAA,IACJ,UAAE;AACE,UAAI;AAAkB,cAAM,QAAQ;AACpC,kBAAY,KAAK;AAAA,IACrB;AAAA,EACJ;AAEA,SAAO,oCAAC,WAAM,UAAU,YAAY,WAAW,MAAK,QAAO,UAAoB,UAAqB,GAAG,MAAM;AACjH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ComponentProps, JSX } from "react";
|
|
2
|
+
import { InputFileBaseProps, InputFileDataType, InputFileExtraProps } from "./InputFile";
|
|
3
|
+
export type InputFileButtonProps<Multiple extends boolean = false, Type extends InputFileDataType = "file", AS extends keyof JSX.IntrinsicElements = "button"> = Omit<ComponentProps<AS>, "type" | "disabled"> & InputFileExtraProps<Multiple, Type> & {
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
inputProps?: InputFileBaseProps;
|
|
6
|
+
dragFile?: boolean;
|
|
7
|
+
as?: AS;
|
|
8
|
+
};
|
|
9
|
+
/** 专用于读取文件的 button 组件 */
|
|
10
|
+
export declare function InputFileButton<Multiple extends boolean = false, Type extends InputFileDataType = "file", AS extends keyof JSX.IntrinsicElements = "button">(props: InputFileButtonProps<Multiple, Type, AS>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/InputFileButton.tsx
|
|
21
|
+
var InputFileButton_exports = {};
|
|
22
|
+
__export(InputFileButton_exports, {
|
|
23
|
+
InputFileButton: () => InputFileButton
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(InputFileButton_exports);
|
|
26
|
+
var import_react = require("react");
|
|
27
|
+
var import_InputFile = require("./InputFile");
|
|
28
|
+
function InputFileButton(props) {
|
|
29
|
+
const {
|
|
30
|
+
as = "button",
|
|
31
|
+
onClick: _onClick,
|
|
32
|
+
inputProps = {},
|
|
33
|
+
onDrop: _onDrop,
|
|
34
|
+
onDragOver: _onDragOver,
|
|
35
|
+
dragFile,
|
|
36
|
+
disabled: _disabled,
|
|
37
|
+
type = "file",
|
|
38
|
+
multiple,
|
|
39
|
+
onValueChange,
|
|
40
|
+
onFileChange,
|
|
41
|
+
clearAfterChange,
|
|
42
|
+
...rest
|
|
43
|
+
} = props;
|
|
44
|
+
const { style, disabled: __disabled, ...restInputProps } = inputProps;
|
|
45
|
+
const [disabled, setDisabled] = (0, import_react.useState)(false);
|
|
46
|
+
const input = (0, import_react.useRef)(null);
|
|
47
|
+
function onClick(e) {
|
|
48
|
+
input.current?.click();
|
|
49
|
+
_onClick?.(e);
|
|
50
|
+
}
|
|
51
|
+
async function onDrop(e) {
|
|
52
|
+
_onDrop?.(e);
|
|
53
|
+
if (disabled || !dragFile)
|
|
54
|
+
return;
|
|
55
|
+
e.preventDefault();
|
|
56
|
+
const { files } = e.dataTransfer;
|
|
57
|
+
if (!files || files.length === 0)
|
|
58
|
+
return;
|
|
59
|
+
setDisabled(true);
|
|
60
|
+
try {
|
|
61
|
+
if (multiple) {
|
|
62
|
+
const files2 = Array.from(files);
|
|
63
|
+
const values = [];
|
|
64
|
+
for (const file of files2) {
|
|
65
|
+
const value = await (0, import_InputFile.getFileData)(file, type);
|
|
66
|
+
values.push(value);
|
|
67
|
+
}
|
|
68
|
+
onFileChange?.(files2);
|
|
69
|
+
onValueChange?.(values);
|
|
70
|
+
} else {
|
|
71
|
+
const file = files[0];
|
|
72
|
+
onFileChange?.(file);
|
|
73
|
+
onValueChange?.(await (0, import_InputFile.getFileData)(file, type));
|
|
74
|
+
}
|
|
75
|
+
} finally {
|
|
76
|
+
setDisabled(false);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
function onDragOver(e) {
|
|
80
|
+
_onDragOver?.(e);
|
|
81
|
+
if (disabled || !dragFile)
|
|
82
|
+
return;
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
}
|
|
85
|
+
return /* @__PURE__ */ React.createElement(import_react.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
86
|
+
import_InputFile.InputFile,
|
|
87
|
+
{
|
|
88
|
+
disabled: disabled || _disabled || __disabled,
|
|
89
|
+
style: { display: "none", ...style },
|
|
90
|
+
multiple,
|
|
91
|
+
type,
|
|
92
|
+
onValueChange,
|
|
93
|
+
onFileChange,
|
|
94
|
+
clearAfterChange,
|
|
95
|
+
...restInputProps
|
|
96
|
+
}
|
|
97
|
+
), (0, import_react.createElement)(as, {
|
|
98
|
+
disabled: disabled || _disabled,
|
|
99
|
+
onClick,
|
|
100
|
+
onDrop,
|
|
101
|
+
onDragOver,
|
|
102
|
+
...rest
|
|
103
|
+
}));
|
|
104
|
+
}
|
|
105
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
106
|
+
0 && (module.exports = {
|
|
107
|
+
InputFileButton
|
|
108
|
+
});
|
|
109
|
+
//# sourceMappingURL=InputFileButton.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/InputFileButton.tsx"],
|
|
4
|
+
"sourcesContent": ["\"use client\"\r\n\r\nimport { ComponentProps, ComponentRef, createElement, DragEvent, Fragment, JSX, MouseEvent as ReactMouseEvent, useRef, useState } from \"react\"\r\nimport { FileType, getFileData, InputFile, InputFileBaseProps, InputFileDataType, InputFileDataTypeMap, InputFileExtraProps, ValueType } from \"./InputFile\"\r\n\r\nexport type InputFileButtonProps<\r\n Multiple extends boolean = false,\r\n Type extends InputFileDataType = \"file\",\r\n AS extends keyof JSX.IntrinsicElements = \"button\",\r\n> = Omit<ComponentProps<AS>, \"type\" | \"disabled\"> &\r\n InputFileExtraProps<Multiple, Type> & {\r\n disabled?: boolean\r\n inputProps?: InputFileBaseProps\r\n dragFile?: boolean\r\n as?: AS\r\n }\r\n\r\n/** 专用于读取文件的 button 组件 */\r\nexport function InputFileButton<Multiple extends boolean = false, Type extends InputFileDataType = \"file\", AS extends keyof JSX.IntrinsicElements = \"button\">(\r\n props: InputFileButtonProps<Multiple, Type, AS>,\r\n) {\r\n const {\r\n as = \"button\",\r\n onClick: _onClick,\r\n inputProps = {},\r\n onDrop: _onDrop,\r\n onDragOver: _onDragOver,\r\n dragFile,\r\n disabled: _disabled,\r\n type = \"file\",\r\n multiple,\r\n onValueChange,\r\n onFileChange,\r\n clearAfterChange,\r\n ...rest\r\n } = props\r\n\r\n const { style, disabled: __disabled, ...restInputProps } = inputProps\r\n const [disabled, setDisabled] = useState(false)\r\n const input = useRef<HTMLInputElement>(null)\r\n\r\n function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {\r\n input.current?.click()\r\n _onClick?.(e as any)\r\n }\r\n\r\n async function onDrop(e: DragEvent<ComponentRef<AS>>) {\r\n _onDrop?.(e as any)\r\n if (disabled || !dragFile) return\r\n e.preventDefault()\r\n const { files } = e.dataTransfer\r\n if (!files || files.length === 0) return\r\n setDisabled(true)\r\n try {\r\n if (multiple) {\r\n const files2: File[] = Array.from(files)\r\n const values: InputFileDataTypeMap[Type][] = []\r\n for (const file of files2) {\r\n const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]\r\n values.push(value)\r\n }\r\n onFileChange?.(files2 as FileType<Multiple>)\r\n onValueChange?.(values as ValueType<Multiple, Type>)\r\n } else {\r\n const file = files[0]\r\n onFileChange?.(file as FileType<Multiple>)\r\n onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)\r\n }\r\n } finally {\r\n setDisabled(false)\r\n }\r\n }\r\n\r\n function onDragOver(e: DragEvent<ComponentRef<AS>>) {\r\n _onDragOver?.(e as any)\r\n if (disabled || !dragFile) return\r\n e.preventDefault()\r\n }\r\n\r\n return (\r\n <Fragment>\r\n <InputFile<Multiple, Type>\r\n disabled={disabled || _disabled || __disabled}\r\n style={{ display: \"none\", ...style }}\r\n multiple={multiple}\r\n type={type as Type}\r\n onValueChange={onValueChange}\r\n onFileChange={onFileChange}\r\n clearAfterChange={clearAfterChange}\r\n {...restInputProps}\r\n />\r\n {createElement(as, {\r\n disabled: disabled || _disabled,\r\n onClick,\r\n onDrop,\r\n onDragOver,\r\n ...rest,\r\n })}\r\n </Fragment>\r\n )\r\n}\r\n\r\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAuI;AACvI,uBAA8I;AAevI,SAAS,gBACZ,OACF;AACE,QAAM;AAAA,IACF,KAAK;AAAA,IACL,SAAS;AAAA,IACT,aAAa,CAAC;AAAA,IACd,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AAEJ,QAAM,EAAE,OAAO,UAAU,YAAY,GAAG,eAAe,IAAI;AAC3D,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,WAAS,QAAQ,GAAkD;AAC/D,UAAM,SAAS,MAAM;AACrB,eAAW,CAAQ;AAAA,EACvB;AAEA,iBAAe,OAAO,GAAgC;AAClD,cAAU,CAAQ;AAClB,QAAI,YAAY,CAAC;AAAU;AAC3B,MAAE,eAAe;AACjB,UAAM,EAAE,MAAM,IAAI,EAAE;AACpB,QAAI,CAAC,SAAS,MAAM,WAAW;AAAG;AAClC,gBAAY,IAAI;AAChB,QAAI;AACA,UAAI,UAAU;AACV,cAAM,SAAiB,MAAM,KAAK,KAAK;AACvC,cAAM,SAAuC,CAAC;AAC9C,mBAAW,QAAQ,QAAQ;AACvB,gBAAM,QAAS,UAAM,8BAAY,MAAM,IAAI;AAC3C,iBAAO,KAAK,KAAK;AAAA,QACrB;AACA,uBAAe,MAA4B;AAC3C,wBAAgB,MAAmC;AAAA,MACvD,OAAO;AACH,cAAM,OAAO,MAAM,CAAC;AACpB,uBAAe,IAA0B;AACzC,wBAAiB,UAAM,8BAAY,MAAM,IAAI,CAA+B;AAAA,MAChF;AAAA,IACJ,UAAE;AACE,kBAAY,KAAK;AAAA,IACrB;AAAA,EACJ;AAEA,WAAS,WAAW,GAAgC;AAChD,kBAAc,CAAQ;AACtB,QAAI,YAAY,CAAC;AAAU;AAC3B,MAAE,eAAe;AAAA,EACrB;AAEA,SACI,oCAAC,6BACG;AAAA,IAAC;AAAA;AAAA,MACG,UAAU,YAAY,aAAa;AAAA,MACnC,OAAO,EAAE,SAAS,QAAQ,GAAG,MAAM;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACR,OACC,4BAAc,IAAI;AAAA,IACf,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,CAAC,CACL;AAER;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export * from "./components/HlsPlayer";
|
|
|
11
11
|
export * from "./components/ImportExcel";
|
|
12
12
|
export * from "./components/InfiniteScroll";
|
|
13
13
|
export * from "./components/InputFile";
|
|
14
|
+
export * from "./components/InputFileButton";
|
|
14
15
|
export * from "./components/LoopSwiper";
|
|
15
16
|
export * from "./components/Ring";
|
|
16
17
|
export * from "./components/Scroll";
|
package/dist/cjs/index.js
CHANGED
|
@@ -29,6 +29,7 @@ __reExport(src_exports, require("./components/HlsPlayer"), module.exports);
|
|
|
29
29
|
__reExport(src_exports, require("./components/ImportExcel"), module.exports);
|
|
30
30
|
__reExport(src_exports, require("./components/InfiniteScroll"), module.exports);
|
|
31
31
|
__reExport(src_exports, require("./components/InputFile"), module.exports);
|
|
32
|
+
__reExport(src_exports, require("./components/InputFileButton"), module.exports);
|
|
32
33
|
__reExport(src_exports, require("./components/LoopSwiper"), module.exports);
|
|
33
34
|
__reExport(src_exports, require("./components/Ring"), module.exports);
|
|
34
35
|
__reExport(src_exports, require("./components/Scroll"), module.exports);
|
|
@@ -56,6 +57,7 @@ __reExport(src_exports, require("./utils/index"), module.exports);
|
|
|
56
57
|
...require("./components/ImportExcel"),
|
|
57
58
|
...require("./components/InfiniteScroll"),
|
|
58
59
|
...require("./components/InputFile"),
|
|
60
|
+
...require("./components/InputFileButton"),
|
|
59
61
|
...require("./components/LoopSwiper"),
|
|
60
62
|
...require("./components/Ring"),
|
|
61
63
|
...require("./components/Scroll"),
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from \"@/components/AutoFit\"\nexport * from \"@/components/AutoScroll\"\nexport * from \"@/components/AutoSizeTextarea\"\nexport * from \"@/components/CircleText\"\nexport * from \"@/components/CopyButton\"\nexport * from \"@/components/Echart\"\nexport * from \"@/components/ExportExcel\"\nexport * from \"@/components/Flow\"\nexport * from \"@/components/FormLabel\"\nexport * from \"@/components/HlsPlayer\"\nexport * from \"@/components/ImportExcel\"\nexport * from \"@/components/InfiniteScroll\"\nexport * from \"@/components/InputFile\"\nexport * from \"@/components/LoopSwiper\"\nexport * from \"@/components/Ring\"\nexport * from \"@/components/Scroll\"\nexport * from \"@/components/SectionRing\"\nexport * from \"@/components/Skeleton\"\nexport * from \"@/components/Title\"\nexport * from \"@/components/TransitionBox\"\nexport * from \"@/components/TransitionNum\"\nexport * from \"@/components/Trapezium\"\nexport * from \"@/components/Unify\"\nexport * from \"@/utils/getReactVersion\"\nexport * from \"@/utils/index\"\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,oCAJd;AAKA,wBAAc,gCALd;AAMA,wBAAc,qCANd;AAOA,wBAAc,8BAPd;AAQA,wBAAc,mCARd;AASA,wBAAc,mCATd;AAUA,wBAAc,qCAVd;AAWA,wBAAc,wCAXd;AAYA,wBAAc,mCAZd;AAaA,wBAAc,
|
|
4
|
+
"sourcesContent": ["export * from \"@/components/AutoFit\"\nexport * from \"@/components/AutoScroll\"\nexport * from \"@/components/AutoSizeTextarea\"\nexport * from \"@/components/CircleText\"\nexport * from \"@/components/CopyButton\"\nexport * from \"@/components/Echart\"\nexport * from \"@/components/ExportExcel\"\nexport * from \"@/components/Flow\"\nexport * from \"@/components/FormLabel\"\nexport * from \"@/components/HlsPlayer\"\nexport * from \"@/components/ImportExcel\"\nexport * from \"@/components/InfiniteScroll\"\nexport * from \"@/components/InputFile\"\nexport * from \"@/components/InputFileButton\"\nexport * from \"@/components/LoopSwiper\"\nexport * from \"@/components/Ring\"\nexport * from \"@/components/Scroll\"\nexport * from \"@/components/SectionRing\"\nexport * from \"@/components/Skeleton\"\nexport * from \"@/components/Title\"\nexport * from \"@/components/TransitionBox\"\nexport * from \"@/components/TransitionNum\"\nexport * from \"@/components/Trapezium\"\nexport * from \"@/components/Unify\"\nexport * from \"@/utils/getReactVersion\"\nexport * from \"@/utils/index\"\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,oCAJd;AAKA,wBAAc,gCALd;AAMA,wBAAc,qCANd;AAOA,wBAAc,8BAPd;AAQA,wBAAc,mCARd;AASA,wBAAc,mCATd;AAUA,wBAAc,qCAVd;AAWA,wBAAc,wCAXd;AAYA,wBAAc,mCAZd;AAaA,wBAAc,yCAbd;AAcA,wBAAc,oCAdd;AAeA,wBAAc,8BAfd;AAgBA,wBAAc,gCAhBd;AAiBA,wBAAc,qCAjBd;AAkBA,wBAAc,kCAlBd;AAmBA,wBAAc,+BAnBd;AAoBA,wBAAc,uCApBd;AAqBA,wBAAc,uCArBd;AAsBA,wBAAc,mCAtBd;AAuBA,wBAAc,+BAvBd;AAwBA,wBAAc,oCAxBd;AAyBA,wBAAc,0BAzBd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import { FC } from "react";
|
|
2
2
|
import { InputFileProps } from "./InputFile";
|
|
3
|
-
export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "
|
|
4
|
-
|
|
3
|
+
export interface ImportExcelProps extends Omit<InputFileProps<false, "arrayBuffer">, "multiple" | "accept" | "type" | "onValueChange"> {
|
|
4
|
+
onValueChange?: (data: Record<string, any>[]) => void;
|
|
5
5
|
}
|
|
6
6
|
/** 专门用于读取 excel 的组件 */
|
|
7
|
-
export declare const ImportExcel:
|
|
7
|
+
export declare const ImportExcel: FC<ImportExcelProps>;
|
|
@@ -1,23 +1,19 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import { forwardRef } from "react";
|
|
4
3
|
import { readExcel } from "deepsea-tools";
|
|
5
4
|
import { InputFile } from "./InputFile";
|
|
6
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
6
|
/** 专门用于读取 excel 的组件 */
|
|
8
|
-
export const ImportExcel =
|
|
7
|
+
export const ImportExcel = props => {
|
|
9
8
|
const {
|
|
10
|
-
|
|
9
|
+
onValueChange,
|
|
11
10
|
...rest
|
|
12
11
|
} = props;
|
|
13
12
|
return /*#__PURE__*/_jsx(InputFile, {
|
|
14
|
-
ref: ref,
|
|
15
13
|
accept: ".xlsx",
|
|
16
14
|
type: "arrayBuffer",
|
|
17
|
-
|
|
18
|
-
result
|
|
19
|
-
}) => onChange?.(readExcel(result)),
|
|
15
|
+
onValueChange: data => onValueChange?.(readExcel(data)),
|
|
20
16
|
...rest
|
|
21
17
|
});
|
|
22
|
-
}
|
|
18
|
+
};
|
|
23
19
|
//# sourceMappingURL=ImportExcel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["readExcel","InputFile","jsx","_jsx","ImportExcel","props","onValueChange","rest","accept","type","data"],"sources":["../../../src/components/ImportExcel.tsx"],"sourcesContent":["\"use client\"\n\nimport { readExcel } from \"deepsea-tools\"\nimport { FC } from \"react\"\n\nimport { InputFile, InputFileProps } from \"./InputFile\"\n\nexport interface ImportExcelProps extends Omit<InputFileProps<false, \"arrayBuffer\">, \"multiple\" | \"accept\" | \"type\" | \"onValueChange\"> {\n onValueChange?: (data: Record<string, any>[]) => void\n}\n\n/** 专门用于读取 excel 的组件 */\nexport const ImportExcel: FC<ImportExcelProps> = props => {\n const { onValueChange, ...rest } = props\n\n return <InputFile accept=\".xlsx\" type=\"arrayBuffer\" onValueChange={data => onValueChange?.(readExcel(data))} {...rest} />\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,SAAS,QAAQ,eAAe;AAGzC,SAASC,SAAS;AAAqC,SAAAC,GAAA,IAAAC,IAAA;AAMvD;AACA,OAAO,MAAMC,WAAiC,GAAGC,KAAK,IAAI;EACtD,MAAM;IAAEC,aAAa;IAAE,GAAGC;EAAK,CAAC,GAAGF,KAAK;EAExC,oBAAOF,IAAA,CAACF,SAAS;IAACO,MAAM,EAAC,OAAO;IAACC,IAAI,EAAC,aAAa;IAACH,aAAa,EAAEI,IAAI,IAAIJ,aAAa,GAAGN,SAAS,CAACU,IAAI,CAAC,CAAE;IAAA,GAAKH;EAAI,CAAG,CAAC;AAC7H,CAAC"}
|
|
@@ -1,53 +1,26 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export interface
|
|
1
|
+
import { ComponentProps, ReactNode } from "react";
|
|
2
|
+
export interface InputFileDataTypeMap {
|
|
3
3
|
base64: string;
|
|
4
4
|
text: string;
|
|
5
5
|
arrayBuffer: ArrayBuffer;
|
|
6
6
|
binary: string;
|
|
7
7
|
file: File;
|
|
8
8
|
}
|
|
9
|
-
export type InputFileDataType = keyof
|
|
10
|
-
export
|
|
11
|
-
|
|
12
|
-
file: File;
|
|
9
|
+
export type InputFileDataType = keyof InputFileDataTypeMap;
|
|
10
|
+
export declare function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypeMap[T]>;
|
|
11
|
+
export interface InputFileBaseProps extends Omit<ComponentProps<"input">, "multiple" | "type"> {
|
|
13
12
|
}
|
|
14
|
-
export type
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
onChange?: (data: InputFileData<ArrayBuffer>) => void;
|
|
22
|
-
} | {
|
|
23
|
-
multiple?: false;
|
|
24
|
-
type?: "file";
|
|
25
|
-
onChange?: (data: InputFileData<File>) => void;
|
|
26
|
-
} | {
|
|
27
|
-
multiple: true;
|
|
28
|
-
type: "base64" | "text" | "binary";
|
|
29
|
-
onChange?: (data: InputFileData<string>[]) => void;
|
|
30
|
-
} | {
|
|
31
|
-
multiple: true;
|
|
32
|
-
type: "arrayBuffer";
|
|
33
|
-
onChange?: (data: InputFileData<ArrayBuffer>[]) => void;
|
|
34
|
-
} | {
|
|
35
|
-
multiple: true;
|
|
36
|
-
type?: "file";
|
|
37
|
-
onChange?: (data: InputFileData<File>[]) => void;
|
|
38
|
-
}) & Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "multiple" | "type"> & {
|
|
13
|
+
export type FileType<Multiple extends boolean> = Multiple extends true ? File[] : File;
|
|
14
|
+
export type ValueType<Multiple extends boolean, Type extends InputFileDataType> = Multiple extends true ? InputFileDataTypeMap[Type][] : InputFileDataTypeMap[Type];
|
|
15
|
+
export interface InputFileExtraProps<Multiple extends boolean = false, Type extends InputFileDataType = "file"> {
|
|
16
|
+
multiple?: Multiple;
|
|
17
|
+
type?: Type;
|
|
18
|
+
onValueChange?: (data: ValueType<Multiple, Type>) => void;
|
|
19
|
+
onFileChange?: (data: FileType<Multiple>) => void;
|
|
39
20
|
/** 是否在捕获文件后清除 input 上的文件,默认为 false,主要区别在于如果不清除,连续两次选择同样的文件不会触发 onChange 事件,如果用于 form 表单,请设置为 flase */
|
|
40
21
|
clearAfterChange?: boolean;
|
|
41
|
-
}
|
|
42
|
-
export
|
|
22
|
+
}
|
|
23
|
+
export interface InputFileProps<Multiple extends boolean = false, Type extends InputFileDataType = "file"> extends InputFileBaseProps, InputFileExtraProps<Multiple, Type> {
|
|
24
|
+
}
|
|
43
25
|
/** 专用于读取文件的组件 */
|
|
44
|
-
export declare
|
|
45
|
-
export type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
46
|
-
input: InputFileProps;
|
|
47
|
-
dragFile?: boolean;
|
|
48
|
-
};
|
|
49
|
-
/** 专用于读取文件的 button 组件 */
|
|
50
|
-
export declare const InputFileButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
51
|
-
input: InputFileProps;
|
|
52
|
-
dragFile?: boolean | undefined;
|
|
53
|
-
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
26
|
+
export declare function InputFile<Multiple extends boolean = false, Type extends InputFileDataType = "file">(props: InputFileProps<Multiple, Type>): ReactNode;
|