deepsea-components 5.18.3 → 5.18.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.
- package/dist/components/InputFile.cjs +29 -18
- package/dist/components/InputFile.js +29 -18
- package/dist/components/InputFileButton.cjs +8 -5
- package/dist/components/InputFileButton.js +8 -5
- package/package.json +1 -1
- package/src/components/InputFile.tsx +31 -19
- package/src/components/InputFileButton.tsx +8 -5
|
@@ -30,28 +30,39 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
30
30
|
});
|
|
31
31
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
32
32
|
const external_react_namespaceObject = require("react");
|
|
33
|
-
|
|
33
|
+
function getFileData(file, type) {
|
|
34
|
+
if ("file" === type) return Promise.resolve(file);
|
|
34
35
|
const fileReader = new FileReader();
|
|
35
|
-
|
|
36
|
-
case "arrayBuffer":
|
|
37
|
-
fileReader.readAsArrayBuffer(file);
|
|
38
|
-
break;
|
|
39
|
-
case "binary":
|
|
40
|
-
fileReader.readAsBinaryString(file);
|
|
41
|
-
break;
|
|
42
|
-
case "base64":
|
|
43
|
-
fileReader.readAsDataURL(file);
|
|
44
|
-
break;
|
|
45
|
-
case "text":
|
|
46
|
-
fileReader.readAsText(file);
|
|
47
|
-
break;
|
|
48
|
-
default:
|
|
49
|
-
return file;
|
|
50
|
-
}
|
|
51
|
-
return new Promise((resolve)=>{
|
|
36
|
+
return new Promise((resolve, reject)=>{
|
|
52
37
|
fileReader.addEventListener("load", ()=>{
|
|
53
38
|
resolve(fileReader.result);
|
|
54
39
|
});
|
|
40
|
+
fileReader.addEventListener("error", ()=>{
|
|
41
|
+
reject(fileReader.error ?? new Error("Failed to read file"));
|
|
42
|
+
});
|
|
43
|
+
fileReader.addEventListener("abort", ()=>{
|
|
44
|
+
reject(fileReader.error ?? new Error("File reading was aborted"));
|
|
45
|
+
});
|
|
46
|
+
try {
|
|
47
|
+
switch(type){
|
|
48
|
+
case "arrayBuffer":
|
|
49
|
+
fileReader.readAsArrayBuffer(file);
|
|
50
|
+
break;
|
|
51
|
+
case "binary":
|
|
52
|
+
fileReader.readAsBinaryString(file);
|
|
53
|
+
break;
|
|
54
|
+
case "base64":
|
|
55
|
+
fileReader.readAsDataURL(file);
|
|
56
|
+
break;
|
|
57
|
+
case "text":
|
|
58
|
+
fileReader.readAsText(file);
|
|
59
|
+
break;
|
|
60
|
+
default:
|
|
61
|
+
resolve(file);
|
|
62
|
+
}
|
|
63
|
+
} catch (error) {
|
|
64
|
+
reject(error);
|
|
65
|
+
}
|
|
55
66
|
});
|
|
56
67
|
}
|
|
57
68
|
function InputFile(props) {
|
|
@@ -1,28 +1,39 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useState } from "react";
|
|
4
|
-
|
|
4
|
+
function getFileData(file, type) {
|
|
5
|
+
if ("file" === type) return Promise.resolve(file);
|
|
5
6
|
const fileReader = new FileReader();
|
|
6
|
-
|
|
7
|
-
case "arrayBuffer":
|
|
8
|
-
fileReader.readAsArrayBuffer(file);
|
|
9
|
-
break;
|
|
10
|
-
case "binary":
|
|
11
|
-
fileReader.readAsBinaryString(file);
|
|
12
|
-
break;
|
|
13
|
-
case "base64":
|
|
14
|
-
fileReader.readAsDataURL(file);
|
|
15
|
-
break;
|
|
16
|
-
case "text":
|
|
17
|
-
fileReader.readAsText(file);
|
|
18
|
-
break;
|
|
19
|
-
default:
|
|
20
|
-
return file;
|
|
21
|
-
}
|
|
22
|
-
return new Promise((resolve)=>{
|
|
7
|
+
return new Promise((resolve, reject)=>{
|
|
23
8
|
fileReader.addEventListener("load", ()=>{
|
|
24
9
|
resolve(fileReader.result);
|
|
25
10
|
});
|
|
11
|
+
fileReader.addEventListener("error", ()=>{
|
|
12
|
+
reject(fileReader.error ?? new Error("Failed to read file"));
|
|
13
|
+
});
|
|
14
|
+
fileReader.addEventListener("abort", ()=>{
|
|
15
|
+
reject(fileReader.error ?? new Error("File reading was aborted"));
|
|
16
|
+
});
|
|
17
|
+
try {
|
|
18
|
+
switch(type){
|
|
19
|
+
case "arrayBuffer":
|
|
20
|
+
fileReader.readAsArrayBuffer(file);
|
|
21
|
+
break;
|
|
22
|
+
case "binary":
|
|
23
|
+
fileReader.readAsBinaryString(file);
|
|
24
|
+
break;
|
|
25
|
+
case "base64":
|
|
26
|
+
fileReader.readAsDataURL(file);
|
|
27
|
+
break;
|
|
28
|
+
case "text":
|
|
29
|
+
fileReader.readAsText(file);
|
|
30
|
+
break;
|
|
31
|
+
default:
|
|
32
|
+
resolve(file);
|
|
33
|
+
}
|
|
34
|
+
} catch (error) {
|
|
35
|
+
reject(error);
|
|
36
|
+
}
|
|
26
37
|
});
|
|
27
38
|
}
|
|
28
39
|
function InputFile(props) {
|
|
@@ -35,17 +35,19 @@ function InputFileButton(props) {
|
|
|
35
35
|
const { ref, style, disabled: __disabled, ...restInputProps } = inputProps;
|
|
36
36
|
const [disabled, setDisabled] = (0, external_react_namespaceObject.useState)(false);
|
|
37
37
|
const input = (0, external_react_namespaceObject.useRef)(null);
|
|
38
|
+
const isDisabled = disabled || _disabled || __disabled;
|
|
38
39
|
(0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>input.current, [
|
|
39
40
|
input.current
|
|
40
41
|
]);
|
|
41
42
|
function onClick(e) {
|
|
42
43
|
var _input_current;
|
|
43
|
-
null == (_input_current = input.current) || _input_current.click();
|
|
44
44
|
null == _onClick || _onClick(e);
|
|
45
|
+
if (isDisabled || e.defaultPrevented) return;
|
|
46
|
+
null == (_input_current = input.current) || _input_current.click();
|
|
45
47
|
}
|
|
46
48
|
async function onDrop(e) {
|
|
47
49
|
null == _onDrop || _onDrop(e);
|
|
48
|
-
if (
|
|
50
|
+
if (isDisabled || !dragFile) return;
|
|
49
51
|
e.preventDefault();
|
|
50
52
|
const { files } = e.dataTransfer;
|
|
51
53
|
if (!files || 0 === files.length) return;
|
|
@@ -80,14 +82,14 @@ function InputFileButton(props) {
|
|
|
80
82
|
}
|
|
81
83
|
function onDragOver(e) {
|
|
82
84
|
null == _onDragOver || _onDragOver(e);
|
|
83
|
-
if (
|
|
85
|
+
if (isDisabled || !dragFile) return;
|
|
84
86
|
e.preventDefault();
|
|
85
87
|
}
|
|
86
88
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
|
|
87
89
|
children: [
|
|
88
90
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_InputFile_cjs_namespaceObject.InputFile, {
|
|
89
91
|
ref: input,
|
|
90
|
-
disabled:
|
|
92
|
+
disabled: isDisabled,
|
|
91
93
|
style: {
|
|
92
94
|
display: "none",
|
|
93
95
|
...style
|
|
@@ -102,7 +104,8 @@ function InputFileButton(props) {
|
|
|
102
104
|
...restInputProps
|
|
103
105
|
}),
|
|
104
106
|
/*#__PURE__*/ (0, external_react_namespaceObject.createElement)(as, {
|
|
105
|
-
disabled:
|
|
107
|
+
disabled: isDisabled,
|
|
108
|
+
type: "button",
|
|
106
109
|
onClick,
|
|
107
110
|
onDrop,
|
|
108
111
|
onDragOver,
|
|
@@ -7,17 +7,19 @@ function InputFileButton(props) {
|
|
|
7
7
|
const { ref, style, disabled: __disabled, ...restInputProps } = inputProps;
|
|
8
8
|
const [disabled, setDisabled] = useState(false);
|
|
9
9
|
const input = useRef(null);
|
|
10
|
+
const isDisabled = disabled || _disabled || __disabled;
|
|
10
11
|
useImperativeHandle(ref, ()=>input.current, [
|
|
11
12
|
input.current
|
|
12
13
|
]);
|
|
13
14
|
function onClick(e) {
|
|
14
15
|
var _input_current;
|
|
15
|
-
null == (_input_current = input.current) || _input_current.click();
|
|
16
16
|
null == _onClick || _onClick(e);
|
|
17
|
+
if (isDisabled || e.defaultPrevented) return;
|
|
18
|
+
null == (_input_current = input.current) || _input_current.click();
|
|
17
19
|
}
|
|
18
20
|
async function onDrop(e) {
|
|
19
21
|
null == _onDrop || _onDrop(e);
|
|
20
|
-
if (
|
|
22
|
+
if (isDisabled || !dragFile) return;
|
|
21
23
|
e.preventDefault();
|
|
22
24
|
const { files } = e.dataTransfer;
|
|
23
25
|
if (!files || 0 === files.length) return;
|
|
@@ -52,14 +54,14 @@ function InputFileButton(props) {
|
|
|
52
54
|
}
|
|
53
55
|
function onDragOver(e) {
|
|
54
56
|
null == _onDragOver || _onDragOver(e);
|
|
55
|
-
if (
|
|
57
|
+
if (isDisabled || !dragFile) return;
|
|
56
58
|
e.preventDefault();
|
|
57
59
|
}
|
|
58
60
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
59
61
|
children: [
|
|
60
62
|
/*#__PURE__*/ jsx(InputFile, {
|
|
61
63
|
ref: input,
|
|
62
|
-
disabled:
|
|
64
|
+
disabled: isDisabled,
|
|
63
65
|
style: {
|
|
64
66
|
display: "none",
|
|
65
67
|
...style
|
|
@@ -74,7 +76,8 @@ function InputFileButton(props) {
|
|
|
74
76
|
...restInputProps
|
|
75
77
|
}),
|
|
76
78
|
/*#__PURE__*/ createElement(as, {
|
|
77
|
-
disabled:
|
|
79
|
+
disabled: isDisabled,
|
|
80
|
+
type: "button",
|
|
78
81
|
onClick,
|
|
79
82
|
onDrop,
|
|
80
83
|
onDragOver,
|
package/package.json
CHANGED
|
@@ -12,30 +12,42 @@ export interface InputFileDataTypeMap {
|
|
|
12
12
|
|
|
13
13
|
export type InputFileDataType = keyof InputFileDataTypeMap
|
|
14
14
|
|
|
15
|
-
export
|
|
16
|
-
|
|
15
|
+
export function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypeMap[T]> {
|
|
16
|
+
if (type === "file") return Promise.resolve(file as InputFileDataTypeMap[T])
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
case "arrayBuffer":
|
|
20
|
-
fileReader.readAsArrayBuffer(file)
|
|
21
|
-
break
|
|
22
|
-
case "binary":
|
|
23
|
-
fileReader.readAsBinaryString(file)
|
|
24
|
-
break
|
|
25
|
-
case "base64":
|
|
26
|
-
fileReader.readAsDataURL(file)
|
|
27
|
-
break
|
|
28
|
-
case "text":
|
|
29
|
-
fileReader.readAsText(file)
|
|
30
|
-
break
|
|
31
|
-
default:
|
|
32
|
-
return file as any
|
|
33
|
-
}
|
|
18
|
+
const fileReader = new FileReader()
|
|
34
19
|
|
|
35
|
-
return new Promise(resolve => {
|
|
20
|
+
return new Promise((resolve, reject) => {
|
|
36
21
|
fileReader.addEventListener("load", () => {
|
|
37
22
|
resolve(fileReader.result as any)
|
|
38
23
|
})
|
|
24
|
+
fileReader.addEventListener("error", () => {
|
|
25
|
+
reject(fileReader.error ?? new Error("Failed to read file"))
|
|
26
|
+
})
|
|
27
|
+
fileReader.addEventListener("abort", () => {
|
|
28
|
+
reject(fileReader.error ?? new Error("File reading was aborted"))
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
try {
|
|
32
|
+
switch (type) {
|
|
33
|
+
case "arrayBuffer":
|
|
34
|
+
fileReader.readAsArrayBuffer(file)
|
|
35
|
+
break
|
|
36
|
+
case "binary":
|
|
37
|
+
fileReader.readAsBinaryString(file)
|
|
38
|
+
break
|
|
39
|
+
case "base64":
|
|
40
|
+
fileReader.readAsDataURL(file)
|
|
41
|
+
break
|
|
42
|
+
case "text":
|
|
43
|
+
fileReader.readAsText(file)
|
|
44
|
+
break
|
|
45
|
+
default:
|
|
46
|
+
resolve(file as any)
|
|
47
|
+
}
|
|
48
|
+
} catch (error) {
|
|
49
|
+
reject(error)
|
|
50
|
+
}
|
|
39
51
|
})
|
|
40
52
|
}
|
|
41
53
|
|
|
@@ -66,17 +66,19 @@ export function InputFileButton<
|
|
|
66
66
|
const { ref, style, disabled: __disabled, ...restInputProps } = inputProps
|
|
67
67
|
const [disabled, setDisabled] = useState(false)
|
|
68
68
|
const input = useRef<HTMLInputElement>(null)
|
|
69
|
+
const isDisabled = disabled || _disabled || __disabled
|
|
69
70
|
|
|
70
71
|
useImperativeHandle(ref, () => input.current!, [input.current])
|
|
71
72
|
|
|
72
73
|
function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {
|
|
73
|
-
input.current?.click()
|
|
74
74
|
_onClick?.(e as any)
|
|
75
|
+
if (isDisabled || e.defaultPrevented) return
|
|
76
|
+
input.current?.click()
|
|
75
77
|
}
|
|
76
78
|
|
|
77
79
|
async function onDrop(e: DragEvent<ComponentRef<AS>>) {
|
|
78
80
|
_onDrop?.(e as any)
|
|
79
|
-
if (
|
|
81
|
+
if (isDisabled || !dragFile) return
|
|
80
82
|
e.preventDefault()
|
|
81
83
|
const { files } = e.dataTransfer
|
|
82
84
|
if (!files || files.length === 0) return
|
|
@@ -110,7 +112,7 @@ export function InputFileButton<
|
|
|
110
112
|
|
|
111
113
|
function onDragOver(e: DragEvent<ComponentRef<AS>>) {
|
|
112
114
|
_onDragOver?.(e as any)
|
|
113
|
-
if (
|
|
115
|
+
if (isDisabled || !dragFile) return
|
|
114
116
|
e.preventDefault()
|
|
115
117
|
}
|
|
116
118
|
|
|
@@ -118,7 +120,7 @@ export function InputFileButton<
|
|
|
118
120
|
<Fragment>
|
|
119
121
|
<InputFile<Multiple, Type>
|
|
120
122
|
ref={input}
|
|
121
|
-
disabled={
|
|
123
|
+
disabled={isDisabled}
|
|
122
124
|
style={{ display: "none", ...style }}
|
|
123
125
|
multiple={multiple}
|
|
124
126
|
accept={accept}
|
|
@@ -130,7 +132,8 @@ export function InputFileButton<
|
|
|
130
132
|
{...restInputProps}
|
|
131
133
|
/>
|
|
132
134
|
{createElement(as, {
|
|
133
|
-
disabled:
|
|
135
|
+
disabled: isDisabled,
|
|
136
|
+
type: "button",
|
|
134
137
|
onClick,
|
|
135
138
|
onDrop,
|
|
136
139
|
onDragOver,
|