deepsea-components 5.16.15 → 5.17.0

package/src/components/InputFile.tsx

@@ -44,11 +44,19 @@ export type ValueType<Multiple extends boolean, Type extends InputFileDataType>
     ? InputFileDataTypeMap[Type][]
     : InputFileDataTypeMap[Type]
 
+export type DataType<Multiple extends boolean, Type extends InputFileDataType> = Multiple extends true
+    ? { file: File; value: InputFileDataTypeMap[Type] }[]
+    : {
+          file: File
+          value: 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
+    onDataChange?: (data: DataType<Multiple, Type>) => void
     /** 是否在捕获文件后清除 input 上的文件，默认为 false，主要区别在于如果不清除，连续两次选择同样的文件不会触发 onChange 事件，如果用于 form 表单，请设置为 flase */
     clearAfterChange?: boolean
 }
@@ -59,7 +67,17 @@ export interface InputFileProps<Multiple extends boolean = false, Type extends I
 
 /** 专用于读取文件的组件 */
 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 {
+        multiple = false,
+        type = "file",
+        onChange: _onChange,
+        disabled: _disabled,
+        clearAfterChange,
+        onValueChange,
+        onFileChange,
+        onDataChange,
+        ...rest
+    } = props
     const [disabled, setDisabled] = useState(false)
 
     async function onChange(e: ChangeEvent<HTMLInputElement>) {
@@ -78,10 +96,13 @@ export function InputFile<Multiple extends boolean = false, Type extends InputFi
                 }
                 onFileChange?.(files2 as FileType<Multiple>)
                 onValueChange?.(values as ValueType<Multiple, Type>)
+                onDataChange?.(files2.map((file, index) => ({ file, value: values[index] })) as DataType<Multiple, Type>)
             } else {
                 const file = files[0]
                 onFileChange?.(file as FileType<Multiple>)
-                onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)
+                const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]
+                onValueChange?.(value as ValueType<Multiple, Type>)
+                onDataChange?.({ file, value } as DataType<Multiple, Type>)
             }
         } finally {
             if (clearAfterChange) input.value = ""

package/src/components/InputFileButton.tsx

@@ -14,7 +14,17 @@ import {
     useState,
 } from "react"
 
-import { FileType, InputFile, InputFileBaseProps, InputFileDataType, InputFileDataTypeMap, InputFileExtraProps, ValueType, getFileData } from "./InputFile"
+import {
+    DataType,
+    FileType,
+    InputFile,
+    InputFileBaseProps,
+    InputFileDataType,
+    InputFileDataTypeMap,
+    InputFileExtraProps,
+    ValueType,
+    getFileData,
+} from "./InputFile"
 
 export type InputFileButtonProps<
     Multiple extends boolean = false,
@@ -48,6 +58,7 @@ export function InputFileButton<
         multiple,
         onValueChange,
         onFileChange,
+        onDataChange,
         clearAfterChange,
         ...rest
     } = props
@@ -80,10 +91,13 @@ export function InputFileButton<
                 }
                 onFileChange?.(files2 as FileType<Multiple>)
                 onValueChange?.(values as ValueType<Multiple, Type>)
+                onDataChange?.(files2.map((file, index) => ({ file, value: values[index] })) as DataType<Multiple, Type>)
             } else {
                 const file = files[0]
                 onFileChange?.(file as FileType<Multiple>)
-                onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)
+                const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]
+                onValueChange?.(value as ValueType<Multiple, Type>)
+                onDataChange?.({ file, value } as DataType<Multiple, Type>)
             }
         } finally {
             setDisabled(false)