deepsea-components 5.9.7 → 5.10.0

package/dist/esm/components/InputFile.js

@@ -1,8 +1,7 @@
 "use client";
 
-import { Fragment, forwardRef, useRef, useState } from "react";
+import { useState } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export async function getFileData(file, type) {
   const fileReader = new FileReader();
   switch (type) {
@@ -27,19 +26,21 @@ export async function getFileData(file, type) {
     });
   });
 }
-
 /** 专用于读取文件的组件 */
-export const InputFile = /*#__PURE__*/forwardRef((props, ref) => {
+export function InputFile(props) {
   const {
     multiple = false,
     type = "file",
-    onChange,
-    disabled: inputDisabled,
+    onChange: _onChange,
+    disabled: _disabled,
     clearAfterChange,
+    onValueChange,
+    onFileChange,
     ...rest
   } = props;
   const [disabled, setDisabled] = useState(false);
-  async function onInputChange(e) {
+  async function onChange(e) {
+    _onChange?.(e);
     const input = e.target;
     const {
       files
@@ -48,19 +49,18 @@ export const InputFile = /*#__PURE__*/forwardRef((props, ref) => {
     setDisabled(true);
     try {
       if (multiple) {
-        const result = [];
-        for (const file of Array.from(files)) {
-          result.push({
-            result: await getFileData(file, type),
-            file
-          });
+        const files2 = Array.from(files);
+        const values = [];
+        for (const file of files2) {
+          const value = await getFileData(file, type);
+          values.push(value);
         }
-        onChange?.(result);
+        onFileChange?.(files2);
+        onValueChange?.(values);
       } else {
-        onChange?.({
-          result: await getFileData(files[0], type),
-          file: files[0]
-        });
+        const file = files[0];
+        onFileChange?.(file);
+        onValueChange?.(await getFileData(file, type));
       }
     } finally {
       if (clearAfterChange) input.value = "";
@@ -68,94 +68,11 @@ export const InputFile = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }
   return /*#__PURE__*/_jsx("input", {
-    ref: ref,
-    disabled: disabled || inputDisabled,
+    disabled: disabled || _disabled,
     type: "file",
     multiple: multiple,
-    onChange: onInputChange,
+    onChange: onChange,
     ...rest
   });
-});
-/** 专用于读取文件的 button 组件 */
-export const InputFileButton = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    onClick: _onClick,
-    input: inputProps,
-    onDrop: _onDrop,
-    onDragOver: _onDragOver,
-    dragFile,
-    disabled: _disabled,
-    ...rest
-  } = props;
-  const {
-    style,
-    disabled: __disabled,
-    multiple,
-    onChange,
-    type = "file",
-    ...restInputProps
-  } = inputProps;
-  const [disabled, setDisabled] = useState(false);
-  const input = useRef(null);
-  function onClick(e) {
-    input.current?.click();
-    _onClick?.(e);
-  }
-  async function onDrop(e) {
-    _onDrop?.(e);
-    if (disabled || !dragFile) return;
-    e.preventDefault();
-    const {
-      files
-    } = e.dataTransfer;
-    if (!files || files.length === 0) return;
-    setDisabled(true);
-    try {
-      if (multiple) {
-        const result = [];
-        for (const file of Array.from(files)) {
-          result.push({
-            result: await getFileData(file, type),
-            file
-          });
-        }
-        onChange?.(result);
-      } else {
-        onChange?.({
-          result: await getFileData(files[0], type),
-          file: files[0]
-        });
-      }
-    } finally {
-      setDisabled(false);
-    }
-  }
-  function onDragOver(e) {
-    _onDragOver?.(e);
-    if (disabled || !dragFile) return;
-    e.preventDefault();
-  }
-  return /*#__PURE__*/_jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsx(InputFile, {
-      ref: input,
-      disabled: disabled || _disabled || __disabled,
-      style: {
-        display: "none",
-        ...style
-      },
-      multiple: multiple,
-      onChange: onChange,
-      type: type,
-      ...restInputProps
-    }), /*#__PURE__*/_jsx("button", {
-      ref: ref,
-      type: "button",
-      disabled: disabled || _disabled,
-      onClick: onClick,
-      onDrop: onDrop,
-      onDragOver: onDragOver,
-      ...rest
-    })]
-  });
-});
+}
 //# sourceMappingURL=InputFile.js.map

package/dist/esm/components/InputFile.js.map

@@ -1 +1 @@
-{"version":3,"names":["Fragment","forwardRef","useRef","useState","jsx","_jsx","jsxs","_jsxs","getFileData","file","type","fileReader","FileReader","readAsArrayBuffer","readAsBinaryString","readAsDataURL","readAsText","Promise","resolve","addEventListener","result","InputFile","props","ref","multiple","onChange","disabled","inputDisabled","clearAfterChange","rest","setDisabled","onInputChange","e","input","target","files","length","Array","from","push","value","InputFileButton","onClick","_onClick","inputProps","onDrop","_onDrop","onDragOver","_onDragOver","dragFile","_disabled","style","__disabled","restInputProps","current","click","preventDefault","dataTransfer","children","display"],"sources":["../../../src/components/InputFile.tsx"],"sourcesContent":["\"use client\"\n\nimport { ButtonHTMLAttributes, ChangeEvent, DragEvent, Fragment, InputHTMLAttributes, MouseEvent as ReactMouseEvent, forwardRef, useRef, useState } from \"react\"\n\nexport interface InputFileDataTypes {\n    base64: string\n    text: string\n    arrayBuffer: ArrayBuffer\n    binary: string\n    file: File\n}\n\nexport type InputFileDataType = keyof InputFileDataTypes\n\nexport interface InputFileData<T> {\n    result: T\n    file: File\n}\n\nexport type InputFileProps = (\n    | {\n          multiple?: false\n          type: \"base64\" | \"text\" | \"binary\"\n          onChange?: (data: InputFileData<string>) => void\n      }\n    | {\n          multiple?: false\n          type: \"arrayBuffer\"\n          onChange?: (data: InputFileData<ArrayBuffer>) => void\n      }\n    | {\n          multiple?: false\n          type?: \"file\"\n          onChange?: (data: InputFileData<File>) => void\n      }\n    | {\n          multiple: true\n          type: \"base64\" | \"text\" | \"binary\"\n          onChange?: (data: InputFileData<string>[]) => void\n      }\n    | {\n          multiple: true\n          type: \"arrayBuffer\"\n          onChange?: (data: InputFileData<ArrayBuffer>[]) => void\n      }\n    | {\n          multiple: true\n          type?: \"file\"\n          onChange?: (data: InputFileData<File>[]) => void\n      }\n) &\n    Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"multiple\" | \"type\"> & {\n        /** 是否在捕获文件后清除 input 上的文件，默认为 false，主要区别在于如果不清除，连续两次选择同样的文件不会触发 onChange 事件，如果用于 form 表单，请设置为 flase */\n        clearAfterChange?: boolean\n    }\n\nexport async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[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\n/** 专用于读取文件的组件 */\nexport const InputFile = forwardRef<HTMLInputElement, InputFileProps>((props, ref) => {\n    const { multiple = false, type = \"file\", onChange, disabled: inputDisabled, clearAfterChange, ...rest } = props\n    const [disabled, setDisabled] = useState(false)\n\n    async function onInputChange(e: ChangeEvent<HTMLInputElement>) {\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 result: any[] = []\n                for (const file of Array.from(files)) {\n                    result.push({\n                        result: await getFileData(file, type),\n                        file,\n                    })\n                }\n                onChange?.(result as any)\n            } else {\n                onChange?.({\n                    result: await getFileData(files[0], type),\n                    file: files[0],\n                } as any)\n            }\n        } finally {\n            if (clearAfterChange) input.value = \"\"\n            setDisabled(false)\n        }\n    }\n\n    return <input ref={ref} disabled={disabled || inputDisabled} type=\"file\" multiple={multiple} onChange={onInputChange} {...rest} />\n})\n\nexport type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n    input: InputFileProps\n    dragFile?: boolean\n}\n\n/** 专用于读取文件的 button 组件 */\nexport const InputFileButton = forwardRef<HTMLButtonElement, InputFileButtonProps>((props, ref) => {\n    const { onClick: _onClick, input: inputProps, onDrop: _onDrop, onDragOver: _onDragOver, dragFile, disabled: _disabled, ...rest } = props\n    const { style, disabled: __disabled, multiple, onChange, type = \"file\", ...restInputProps } = inputProps\n    const [disabled, setDisabled] = useState(false)\n    const input = useRef<HTMLInputElement>(null)\n\n    function onClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n        input.current?.click()\n        _onClick?.(e)\n    }\n\n    async function onDrop(e: DragEvent<HTMLButtonElement>) {\n        _onDrop?.(e)\n        if (disabled || !dragFile) return\n        e.preventDefault()\n        const { files } = e.dataTransfer\n        if (!files || files.length === 0) return\n        setDisabled(true)\n        try {\n            if (multiple) {\n                const result: any[] = []\n                for (const file of Array.from(files)) {\n                    result.push({\n                        result: await getFileData(file, type),\n                        file,\n                    })\n                }\n                onChange?.(result as any)\n            } else {\n                onChange?.({\n                    result: await getFileData(files[0], type),\n                    file: files[0],\n                } as any)\n            }\n        } finally {\n            setDisabled(false)\n        }\n    }\n\n    function onDragOver(e: DragEvent<HTMLButtonElement>) {\n        _onDragOver?.(e)\n        if (disabled || !dragFile) return\n        e.preventDefault()\n    }\n\n    return (\n        <Fragment>\n            <InputFile\n                ref={input}\n                disabled={disabled || _disabled || __disabled}\n                style={{ display: \"none\", ...style }}\n                multiple={multiple as any}\n                onChange={onChange as any}\n                type={type as any}\n                {...restInputProps}\n            />\n            <button ref={ref} type=\"button\" disabled={disabled || _disabled} onClick={onClick} onDrop={onDrop} onDragOver={onDragOver} {...rest} />\n        </Fragment>\n    )\n})\n"],"mappings":"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"}
+{"version":3,"names":["useState","jsx","_jsx","getFileData","file","type","fileReader","FileReader","readAsArrayBuffer","readAsBinaryString","readAsDataURL","readAsText","Promise","resolve","addEventListener","result","InputFile","props","multiple","onChange","_onChange","disabled","_disabled","clearAfterChange","onValueChange","onFileChange","rest","setDisabled","e","input","target","files","length","files2","Array","from","values","value","push"],"sources":["../../../src/components/InputFile.tsx"],"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"],"mappings":"AAAA,YAAY;;AAEZ,SAAiDA,QAAQ,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAYxE,OAAO,eAAeC,WAAWA,CAA8BC,IAAU,EAAEC,IAAO,EAAoC;EAClH,MAAMC,UAAU,GAAG,IAAIC,UAAU,CAAC,CAAC;EACnC,QAAQF,IAAI;IACR,KAAK,aAAa;MACdC,UAAU,CAACE,iBAAiB,CAACJ,IAAI,CAAC;MAClC;IACJ,KAAK,QAAQ;MACTE,UAAU,CAACG,kBAAkB,CAACL,IAAI,CAAC;MACnC;IACJ,KAAK,QAAQ;MACTE,UAAU,CAACI,aAAa,CAACN,IAAI,CAAC;MAC9B;IACJ,KAAK,MAAM;MACPE,UAAU,CAACK,UAAU,CAACP,IAAI,CAAC;MAC3B;IACJ;MACI,OAAOA,IAAI;EACnB;EACA,OAAO,IAAIQ,OAAO,CAACC,OAAO,IAAI;IAC1BP,UAAU,CAACQ,gBAAgB,CAAC,MAAM,EAAE,MAAM;MACtCD,OAAO,CAACP,UAAU,CAACS,MAAa,CAAC;IACrC,CAAC,CAAC;EACN,CAAC,CAAC;AACN;AAsBA;AACA,OAAO,SAASC,SAASA,CAA4EC,KAAqC,EAAa;EACnJ,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAEb,IAAI,GAAG,MAAM;IAAEc,QAAQ,EAAEC,SAAS;IAAEC,QAAQ,EAAEC,SAAS;IAAEC,gBAAgB;IAAEC,aAAa;IAAEC,YAAY;IAAE,GAAGC;EAAK,CAAC,GAAGT,KAAK;EACnJ,MAAM,CAACI,QAAQ,EAAEM,WAAW,CAAC,GAAG3B,QAAQ,CAAC,KAAK,CAAC;EAE/C,eAAemB,QAAQA,CAACS,CAAgC,EAAE;IACtDR,SAAS,GAAGQ,CAAC,CAAC;IACd,MAAMC,KAAK,GAAGD,CAAC,CAACE,MAAM;IACtB,MAAM;MAAEC;IAAM,CAAC,GAAGF,KAAK;IACvB,IAAI,CAACE,KAAK,IAAIA,KAAK,CAACC,MAAM,KAAK,CAAC,EAAE;IAClCL,WAAW,CAAC,IAAI,CAAC;IACjB,IAAI;MACA,IAAIT,QAAQ,EAAE;QACV,MAAMe,MAAc,GAAGC,KAAK,CAACC,IAAI,CAACJ,KAAK,CAAC;QACxC,MAAMK,MAAoC,GAAG,EAAE;QAC/C,KAAK,MAAMhC,IAAI,IAAI6B,MAAM,EAAE;UACvB,MAAMI,KAAK,GAAI,MAAMlC,WAAW,CAACC,IAAI,EAAEC,IAAI,CAAgC;UAC3E+B,MAAM,CAACE,IAAI,CAACD,KAAK,CAAC;QACtB;QACAZ,YAAY,GAAGQ,MAA4B,CAAC;QAC5CT,aAAa,GAAGY,MAAmC,CAAC;MACxD,CAAC,MAAM;QACH,MAAMhC,IAAI,GAAG2B,KAAK,CAAC,CAAC,CAAC;QACrBN,YAAY,GAAGrB,IAA0B,CAAC;QAC1CoB,aAAa,GAAI,MAAMrB,WAAW,CAACC,IAAI,EAAEC,IAAI,CAA+B,CAAC;MACjF;IACJ,CAAC,SAAS;MACN,IAAIkB,gBAAgB,EAAEM,KAAK,CAACQ,KAAK,GAAG,EAAE;MACtCV,WAAW,CAAC,KAAK,CAAC;IACtB;EACJ;EAEA,oBAAOzB,IAAA;IAAOmB,QAAQ,EAAEA,QAAQ,IAAIC,SAAU;IAACjB,IAAI,EAAC,MAAM;IAACa,QAAQ,EAAEA,QAAS;IAACC,QAAQ,EAAEA,QAAS;IAAA,GAAKO;EAAI,CAAG,CAAC;AACnH"}

package/dist/esm/components/InputFileButton.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps, JSX } from "react";
+import { InputFileBaseProps, InputFileDataType, InputFileExtraProps } from "./InputFile";
+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> & {
+    disabled?: boolean;
+    inputProps?: InputFileBaseProps;
+    dragFile?: boolean;
+    as?: AS;
+};
+/** 专用于读取文件的 button 组件 */
+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;

package/dist/esm/components/InputFileButton.js

@@ -0,0 +1,90 @@
+"use client";
+
+import { createElement, Fragment, useRef, useState } from "react";
+import { getFileData, InputFile } from "./InputFile";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/** 专用于读取文件的 button 组件 */
+export function InputFileButton(props) {
+  const {
+    as = "button",
+    onClick: _onClick,
+    inputProps = {},
+    onDrop: _onDrop,
+    onDragOver: _onDragOver,
+    dragFile,
+    disabled: _disabled,
+    type = "file",
+    multiple,
+    onValueChange,
+    onFileChange,
+    clearAfterChange,
+    ...rest
+  } = props;
+  const {
+    style,
+    disabled: __disabled,
+    ...restInputProps
+  } = inputProps;
+  const [disabled, setDisabled] = useState(false);
+  const input = useRef(null);
+  function onClick(e) {
+    input.current?.click();
+    _onClick?.(e);
+  }
+  async function onDrop(e) {
+    _onDrop?.(e);
+    if (disabled || !dragFile) return;
+    e.preventDefault();
+    const {
+      files
+    } = e.dataTransfer;
+    if (!files || files.length === 0) return;
+    setDisabled(true);
+    try {
+      if (multiple) {
+        const files2 = Array.from(files);
+        const values = [];
+        for (const file of files2) {
+          const value = await getFileData(file, type);
+          values.push(value);
+        }
+        onFileChange?.(files2);
+        onValueChange?.(values);
+      } else {
+        const file = files[0];
+        onFileChange?.(file);
+        onValueChange?.(await getFileData(file, type));
+      }
+    } finally {
+      setDisabled(false);
+    }
+  }
+  function onDragOver(e) {
+    _onDragOver?.(e);
+    if (disabled || !dragFile) return;
+    e.preventDefault();
+  }
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(InputFile, {
+      disabled: disabled || _disabled || __disabled,
+      style: {
+        display: "none",
+        ...style
+      },
+      multiple: multiple,
+      type: type,
+      onValueChange: onValueChange,
+      onFileChange: onFileChange,
+      clearAfterChange: clearAfterChange,
+      ...restInputProps
+    }), /*#__PURE__*/createElement(as, {
+      disabled: disabled || _disabled,
+      onClick,
+      onDrop,
+      onDragOver,
+      ...rest
+    })]
+  });
+}
+//# sourceMappingURL=InputFileButton.js.map

package/dist/esm/components/InputFileButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","Fragment","useRef","useState","getFileData","InputFile","jsx","_jsx","jsxs","_jsxs","InputFileButton","props","as","onClick","_onClick","inputProps","onDrop","_onDrop","onDragOver","_onDragOver","dragFile","disabled","_disabled","type","multiple","onValueChange","onFileChange","clearAfterChange","rest","style","__disabled","restInputProps","setDisabled","input","e","current","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 { 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"],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -11,6 +11,7 @@ export * from "./components/HlsPlayer";
 export * from "./components/ImportExcel";
 export * from "./components/InfiniteScroll";
 export * from "./components/InputFile";
+export * from "./components/InputFileButton";
 export * from "./components/LoopSwiper";
 export * from "./components/Ring";
 export * from "./components/Scroll";

package/dist/esm/index.js

@@ -11,6 +11,7 @@ export * from "./components/HlsPlayer";
 export * from "./components/ImportExcel";
 export * from "./components/InfiniteScroll";
 export * from "./components/InputFile";
+export * from "./components/InputFileButton";
 export * from "./components/LoopSwiper";
 export * from "./components/Ring";
 export * from "./components/Scroll";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"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"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"names":[],"sources":["../../src/index.ts"],"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"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.9.7",
+  "version": "5.10.0",
   "description": "格数科技自用组件库",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -29,8 +29,8 @@
     "@emotion/css": "^11.13.5",
     "ahooks": "^3.8.4",
     "clipboard": "^2.0.11",
-    "echarts": "^5.5.1",
-    "hls.js": "^1.5.18",
+    "echarts": "^5.6.0",
+    "hls.js": "^1.5.20",
     "smooth-scrollbar": "^8.8.4",
     "deepsea-tools": "5.19.3"
   },

package/src/components/ImportExcel.tsx

@@ -1,17 +1,17 @@
 "use client"
 
-import { forwardRef } from "react"
 import { readExcel } from "deepsea-tools"
+import { FC } from "react"
 
 import { InputFile, InputFileProps } from "./InputFile"
 
-export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "onChange" | "accept" | "type"> {
-    onChange?: (data: Record<string, any>[]) => void
+export interface ImportExcelProps extends Omit<InputFileProps<false, "arrayBuffer">, "multiple" | "accept" | "type" | "onValueChange"> {
+    onValueChange?: (data: Record<string, any>[]) => void
 }
 
 /** 专门用于读取 excel 的组件 */
-export const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {
-    const { onChange, ...rest } = props
+export const ImportExcel: FC<ImportExcelProps> = props => {
+    const { onValueChange, ...rest } = props
 
-    return <InputFile ref={ref} accept=".xlsx" type="arrayBuffer" onChange={({ result }) => onChange?.(readExcel(result))} {...rest} />
-})
+    return <InputFile accept=".xlsx" type="arrayBuffer" onValueChange={data => onValueChange?.(readExcel(data))} {...rest} />
+}

package/src/components/InputFile.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { ButtonHTMLAttributes, ChangeEvent, DragEvent, Fragment, InputHTMLAttributes, MouseEvent as ReactMouseEvent, forwardRef, useRef, useState } from "react"
+import { ChangeEvent, ComponentProps, ReactNode, useState } from "react"
 
-export interface InputFileDataTypes {
+export interface InputFileDataTypeMap {
     base64: string
     text: string
     arrayBuffer: ArrayBuffer
@@ -10,51 +10,9 @@ export interface InputFileDataTypes {
     file: File
 }
 
-export type InputFileDataType = keyof InputFileDataTypes
+export type InputFileDataType = keyof InputFileDataTypeMap
 
-export interface InputFileData<T> {
-    result: T
-    file: File
-}
-
-export type InputFileProps = (
-    | {
-          multiple?: false
-          type: "base64" | "text" | "binary"
-          onChange?: (data: InputFileData<string>) => void
-      }
-    | {
-          multiple?: false
-          type: "arrayBuffer"
-          onChange?: (data: InputFileData<ArrayBuffer>) => void
-      }
-    | {
-          multiple?: false
-          type?: "file"
-          onChange?: (data: InputFileData<File>) => void
-      }
-    | {
-          multiple: true
-          type: "base64" | "text" | "binary"
-          onChange?: (data: InputFileData<string>[]) => void
-      }
-    | {
-          multiple: true
-          type: "arrayBuffer"
-          onChange?: (data: InputFileData<ArrayBuffer>[]) => void
-      }
-    | {
-          multiple: true
-          type?: "file"
-          onChange?: (data: InputFileData<File>[]) => void
-      }
-) &
-    Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "multiple" | "type"> & {
-        /** 是否在捕获文件后清除 input 上的文件，默认为 false，主要区别在于如果不清除，连续两次选择同样的文件不会触发 onChange 事件，如果用于 form 表单，请设置为 flase */
-        clearAfterChange?: boolean
-    }
-
-export async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]> {
+export async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypeMap[T]> {
     const fileReader = new FileReader()
     switch (type) {
         case "arrayBuffer":
@@ -79,31 +37,51 @@ export async function getFileData<T extends InputFileDataType>(file: File, type:
     })
 }
 
+export interface InputFileBaseProps extends Omit<ComponentProps<"input">, "multiple" | "type"> {}
+
+export type FileType<Multiple extends boolean> = Multiple extends true ? File[] : File
+export type ValueType<Multiple extends boolean, Type extends InputFileDataType> = Multiple extends true
+    ? InputFileDataTypeMap[Type][]
+    : InputFileDataTypeMap[Type]
+
+export interface InputFileExtraProps<Multiple extends boolean = false, Type extends InputFileDataType = "file"> {
+    multiple?: Multiple
+    type?: Type
+    onValueChange?: (data: ValueType<Multiple, Type>) => void
+    onFileChange?: (data: FileType<Multiple>) => void
+    /** 是否在捕获文件后清除 input 上的文件，默认为 false，主要区别在于如果不清除，连续两次选择同样的文件不会触发 onChange 事件，如果用于 form 表单，请设置为 flase */
+    clearAfterChange?: boolean
+}
+
+export interface InputFileProps<Multiple extends boolean = false, Type extends InputFileDataType = "file">
+    extends InputFileBaseProps,
+        InputFileExtraProps<Multiple, Type> {}
+
 /** 专用于读取文件的组件 */
-export const InputFile = forwardRef<HTMLInputElement, InputFileProps>((props, ref) => {
-    const { multiple = false, type = "file", onChange, disabled: inputDisabled, clearAfterChange, ...rest } = props
+export function InputFile<Multiple extends boolean = false, Type extends InputFileDataType = "file">(props: InputFileProps<Multiple, Type>): ReactNode {
+    const { multiple = false, type = "file", onChange: _onChange, disabled: _disabled, clearAfterChange, onValueChange, onFileChange, ...rest } = props
     const [disabled, setDisabled] = useState(false)
 
-    async function onInputChange(e: ChangeEvent<HTMLInputElement>) {
+    async function onChange(e: ChangeEvent<HTMLInputElement>) {
+        _onChange?.(e)
         const input = e.target
         const { files } = input
         if (!files || files.length === 0) return
         setDisabled(true)
         try {
             if (multiple) {
-                const result: any[] = []
-                for (const file of Array.from(files)) {
-                    result.push({
-                        result: await getFileData(file, type),
-                        file,
-                    })
+                const files2: File[] = Array.from(files)
+                const values: InputFileDataTypeMap[Type][] = []
+                for (const file of files2) {
+                    const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]
+                    values.push(value)
                 }
-                onChange?.(result as any)
+                onFileChange?.(files2 as FileType<Multiple>)
+                onValueChange?.(values as ValueType<Multiple, Type>)
             } else {
-                onChange?.({
-                    result: await getFileData(files[0], type),
-                    file: files[0],
-                } as any)
+                const file = files[0]
+                onFileChange?.(file as FileType<Multiple>)
+                onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)
             }
         } finally {
             if (clearAfterChange) input.value = ""
@@ -111,72 +89,5 @@ export const InputFile = forwardRef<HTMLInputElement, InputFileProps>((props, re
         }
     }
 
-    return <input ref={ref} disabled={disabled || inputDisabled} type="file" multiple={multiple} onChange={onInputChange} {...rest} />
-})
-
-export type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    input: InputFileProps
-    dragFile?: boolean
+    return <input disabled={disabled || _disabled} type="file" multiple={multiple} onChange={onChange} {...rest} />
 }
-
-/** 专用于读取文件的 button 组件 */
-export const InputFileButton = forwardRef<HTMLButtonElement, InputFileButtonProps>((props, ref) => {
-    const { onClick: _onClick, input: inputProps, onDrop: _onDrop, onDragOver: _onDragOver, dragFile, disabled: _disabled, ...rest } = props
-    const { style, disabled: __disabled, multiple, onChange, type = "file", ...restInputProps } = inputProps
-    const [disabled, setDisabled] = useState(false)
-    const input = useRef<HTMLInputElement>(null)
-
-    function onClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {
-        input.current?.click()
-        _onClick?.(e)
-    }
-
-    async function onDrop(e: DragEvent<HTMLButtonElement>) {
-        _onDrop?.(e)
-        if (disabled || !dragFile) return
-        e.preventDefault()
-        const { files } = e.dataTransfer
-        if (!files || files.length === 0) return
-        setDisabled(true)
-        try {
-            if (multiple) {
-                const result: any[] = []
-                for (const file of Array.from(files)) {
-                    result.push({
-                        result: await getFileData(file, type),
-                        file,
-                    })
-                }
-                onChange?.(result as any)
-            } else {
-                onChange?.({
-                    result: await getFileData(files[0], type),
-                    file: files[0],
-                } as any)
-            }
-        } finally {
-            setDisabled(false)
-        }
-    }
-
-    function onDragOver(e: DragEvent<HTMLButtonElement>) {
-        _onDragOver?.(e)
-        if (disabled || !dragFile) return
-        e.preventDefault()
-    }
-
-    return (
-        <Fragment>
-            <InputFile
-                ref={input}
-                disabled={disabled || _disabled || __disabled}
-                style={{ display: "none", ...style }}
-                multiple={multiple as any}
-                onChange={onChange as any}
-                type={type as any}
-                {...restInputProps}
-            />
-            <button ref={ref} type="button" disabled={disabled || _disabled} onClick={onClick} onDrop={onDrop} onDragOver={onDragOver} {...rest} />
-        </Fragment>
-    )
-})