deepsea-components 5.10.2 → 5.10.3
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.
|
@@ -42,9 +42,10 @@ function InputFileButton(props) {
|
|
|
42
42
|
clearAfterChange,
|
|
43
43
|
...rest
|
|
44
44
|
} = props;
|
|
45
|
-
const { style, disabled: __disabled, ...restInputProps } = inputProps;
|
|
45
|
+
const { ref, style, disabled: __disabled, ...restInputProps } = inputProps;
|
|
46
46
|
const [disabled, setDisabled] = (0, import_react.useState)(false);
|
|
47
47
|
const input = (0, import_react.useRef)(null);
|
|
48
|
+
(0, import_react.useImperativeHandle)(ref, () => input.current, [input.current]);
|
|
48
49
|
function onClick(e) {
|
|
49
50
|
input.current?.click();
|
|
50
51
|
_onClick?.(e);
|
|
@@ -86,6 +87,7 @@ function InputFileButton(props) {
|
|
|
86
87
|
return /* @__PURE__ */ React.createElement(import_react.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
87
88
|
import_InputFile.InputFile,
|
|
88
89
|
{
|
|
90
|
+
ref: input,
|
|
89
91
|
disabled: disabled || _disabled || __disabled,
|
|
90
92
|
style: { display: "none", ...style },
|
|
91
93
|
multiple,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/InputFileButton.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\"\r\n\r\nimport {\r\n ComponentProps,\r\n ComponentRef,\r\n createElement,\r\n DragEvent,\r\n Fragment,\r\n JSX,\r\n JSXElementConstructor,\r\n MouseEvent as ReactMouseEvent,\r\n useRef,\r\n useState,\r\n} 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 | JSXElementConstructor<any> = \"button\",\r\n> = Omit<ComponentProps<AS>, \"as\" | \"type\" | \"disabled\"> &\r\n InputFileExtraProps<Multiple, Type> & {\r\n disabled?: boolean\r\n inputProps?: Omit<InputFileBaseProps, \"accept\">\r\n accept?: string\r\n dragFile?: boolean\r\n as?: AS\r\n }\r\n\r\n/** 专用于读取文件的 button 组件 */\r\nexport function InputFileButton<\r\n Multiple extends boolean = false,\r\n Type extends InputFileDataType = \"file\",\r\n AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"button\",\r\n>(props: InputFileButtonProps<Multiple, Type, AS>) {\r\n const {\r\n as = \"button\",\r\n onClick: _onClick,\r\n inputProps = {},\r\n accept,\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 accept={accept}\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"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,
|
|
4
|
+
"sourcesContent": ["\"use client\"\r\n\r\nimport {\r\n ComponentProps,\r\n ComponentRef,\r\n createElement,\r\n DragEvent,\r\n Fragment,\r\n JSX,\r\n JSXElementConstructor,\r\n MouseEvent as ReactMouseEvent,\r\n useImperativeHandle,\r\n useRef,\r\n useState,\r\n} 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 | JSXElementConstructor<any> = \"button\",\r\n> = Omit<ComponentProps<AS>, \"as\" | \"type\" | \"disabled\"> &\r\n InputFileExtraProps<Multiple, Type> & {\r\n disabled?: boolean\r\n inputProps?: Omit<InputFileBaseProps, \"accept\">\r\n accept?: string\r\n dragFile?: boolean\r\n as?: AS\r\n }\r\n\r\n/** 专用于读取文件的 button 组件 */\r\nexport function InputFileButton<\r\n Multiple extends boolean = false,\r\n Type extends InputFileDataType = \"file\",\r\n AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"button\",\r\n>(props: InputFileButtonProps<Multiple, Type, AS>) {\r\n const {\r\n as = \"button\",\r\n onClick: _onClick,\r\n inputProps = {},\r\n accept,\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 { ref, style, disabled: __disabled, ...restInputProps } = inputProps\r\n const [disabled, setDisabled] = useState(false)\r\n const input = useRef<HTMLInputElement>(null)\r\n\r\n useImperativeHandle(ref, () => input.current!, [input.current])\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 ref={input}\r\n disabled={disabled || _disabled || __disabled}\r\n style={{ display: \"none\", ...style }}\r\n multiple={multiple}\r\n accept={accept}\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"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAYO;AACP,uBAA8I;AAgBvI,SAAS,gBAId,OAAiD;AAC/C,QAAM;AAAA,IACF,KAAK;AAAA,IACL,SAAS;AAAA,IACT,aAAa,CAAC;AAAA,IACd;AAAA,IACA,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,KAAK,OAAO,UAAU,YAAY,GAAG,eAAe,IAAI;AAChE,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,wCAAoB,KAAK,MAAM,MAAM,SAAU,CAAC,MAAM,OAAO,CAAC;AAE9D,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,KAAK;AAAA,MACL,UAAU,YAAY,aAAa;AAAA,MACnC,OAAO,EAAE,SAAS,QAAQ,GAAG,MAAM;AAAA,MACnC;AAAA,MACA;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
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import { createElement, Fragment, useRef, useState } from "react";
|
|
3
|
+
import { createElement, Fragment, useImperativeHandle, useRef, useState } from "react";
|
|
4
4
|
import { getFileData, InputFile } from "./InputFile";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -23,12 +23,14 @@ export function InputFileButton(props) {
|
|
|
23
23
|
...rest
|
|
24
24
|
} = props;
|
|
25
25
|
const {
|
|
26
|
+
ref,
|
|
26
27
|
style,
|
|
27
28
|
disabled: __disabled,
|
|
28
29
|
...restInputProps
|
|
29
30
|
} = inputProps;
|
|
30
31
|
const [disabled, setDisabled] = useState(false);
|
|
31
32
|
const input = useRef(null);
|
|
33
|
+
useImperativeHandle(ref, () => input.current, [input.current]);
|
|
32
34
|
function onClick(e) {
|
|
33
35
|
input.current?.click();
|
|
34
36
|
_onClick?.(e);
|
|
@@ -68,6 +70,7 @@ export function InputFileButton(props) {
|
|
|
68
70
|
}
|
|
69
71
|
return /*#__PURE__*/_jsxs(Fragment, {
|
|
70
72
|
children: [/*#__PURE__*/_jsx(InputFile, {
|
|
73
|
+
ref: input,
|
|
71
74
|
disabled: disabled || _disabled || __disabled,
|
|
72
75
|
style: {
|
|
73
76
|
display: "none",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createElement","Fragment","useRef","useState","getFileData","InputFile","jsx","_jsx","jsxs","_jsxs","InputFileButton","props","as","onClick","_onClick","inputProps","accept","onDrop","_onDrop","onDragOver","_onDragOver","dragFile","disabled","_disabled","type","multiple","onValueChange","onFileChange","clearAfterChange","rest","style","__disabled","restInputProps","setDisabled","input","
|
|
1
|
+
{"version":3,"names":["createElement","Fragment","useImperativeHandle","useRef","useState","getFileData","InputFile","jsx","_jsx","jsxs","_jsxs","InputFileButton","props","as","onClick","_onClick","inputProps","accept","onDrop","_onDrop","onDragOver","_onDragOver","dragFile","disabled","_disabled","type","multiple","onValueChange","onFileChange","clearAfterChange","rest","ref","style","__disabled","restInputProps","setDisabled","input","current","e","click","preventDefault","files","dataTransfer","length","files2","Array","from","values","file","value","push","children","display"],"sources":["../../../src/components/InputFileButton.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport {\r\n ComponentProps,\r\n ComponentRef,\r\n createElement,\r\n DragEvent,\r\n Fragment,\r\n JSX,\r\n JSXElementConstructor,\r\n MouseEvent as ReactMouseEvent,\r\n useImperativeHandle,\r\n useRef,\r\n useState,\r\n} 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 | JSXElementConstructor<any> = \"button\",\r\n> = Omit<ComponentProps<AS>, \"as\" | \"type\" | \"disabled\"> &\r\n InputFileExtraProps<Multiple, Type> & {\r\n disabled?: boolean\r\n inputProps?: Omit<InputFileBaseProps, \"accept\">\r\n accept?: string\r\n dragFile?: boolean\r\n as?: AS\r\n }\r\n\r\n/** 专用于读取文件的 button 组件 */\r\nexport function InputFileButton<\r\n Multiple extends boolean = false,\r\n Type extends InputFileDataType = \"file\",\r\n AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"button\",\r\n>(props: InputFileButtonProps<Multiple, Type, AS>) {\r\n const {\r\n as = \"button\",\r\n onClick: _onClick,\r\n inputProps = {},\r\n accept,\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 { ref, style, disabled: __disabled, ...restInputProps } = inputProps\r\n const [disabled, setDisabled] = useState(false)\r\n const input = useRef<HTMLInputElement>(null)\r\n\r\n useImperativeHandle(ref, () => input.current!, [input.current])\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 ref={input}\r\n disabled={disabled || _disabled || __disabled}\r\n style={{ display: \"none\", ...style }}\r\n multiple={multiple}\r\n accept={accept}\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"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -9,6 +9,7 @@ import {
|
|
|
9
9
|
JSX,
|
|
10
10
|
JSXElementConstructor,
|
|
11
11
|
MouseEvent as ReactMouseEvent,
|
|
12
|
+
useImperativeHandle,
|
|
12
13
|
useRef,
|
|
13
14
|
useState,
|
|
14
15
|
} from "react"
|
|
@@ -50,10 +51,12 @@ export function InputFileButton<
|
|
|
50
51
|
...rest
|
|
51
52
|
} = props
|
|
52
53
|
|
|
53
|
-
const { style, disabled: __disabled, ...restInputProps } = inputProps
|
|
54
|
+
const { ref, style, disabled: __disabled, ...restInputProps } = inputProps
|
|
54
55
|
const [disabled, setDisabled] = useState(false)
|
|
55
56
|
const input = useRef<HTMLInputElement>(null)
|
|
56
57
|
|
|
58
|
+
useImperativeHandle(ref, () => input.current!, [input.current])
|
|
59
|
+
|
|
57
60
|
function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {
|
|
58
61
|
input.current?.click()
|
|
59
62
|
_onClick?.(e as any)
|
|
@@ -95,6 +98,7 @@ export function InputFileButton<
|
|
|
95
98
|
return (
|
|
96
99
|
<Fragment>
|
|
97
100
|
<InputFile<Multiple, Type>
|
|
101
|
+
ref={input}
|
|
98
102
|
disabled={disabled || _disabled || __disabled}
|
|
99
103
|
style={{ display: "none", ...style }}
|
|
100
104
|
multiple={multiple}
|