deepsea-components 5.9.6 → 5.10.0

package/src/components/Flow.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import { CSSProperties, HTMLAttributes, Key, ReactNode, RefObject, useEffect, useImperativeHandle, useRef, useState } from "react"
 import { css } from "@emotion/css"
 import { useSize } from "ahooks"
 import { clsx } from "deepsea-tools"
+import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
 
 import { px, transformCSSVariable } from "@/utils"
 
@@ -77,7 +77,7 @@ export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "chil
     transitionDuration?: number
     /** 变化的回调函数 */
     onSizeChange?: (sizeData: FlowSizeData) => void
-    element?: RefObject<HTMLDivElement>
+    element?: Ref<HTMLDivElement>
 }
 
 export function getGapRange(gap?: undefined | number | "auto" | (number | "auto")[]): [number, number | "auto"] {

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>
-    )
-})

package/src/components/InputFileButton.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import { ComponentProps, ComponentRef, createElement, DragEvent, Fragment, JSX, MouseEvent as ReactMouseEvent, useRef, useState } from "react"
+import { FileType, getFileData, InputFile, InputFileBaseProps, InputFileDataType, InputFileDataTypeMap, InputFileExtraProps, ValueType } 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 function InputFileButton<Multiple extends boolean = false, Type extends InputFileDataType = "file", AS extends keyof JSX.IntrinsicElements = "button">(
+    props: InputFileButtonProps<Multiple, Type, AS>,
+) {
+    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<HTMLInputElement>(null)
+
+    function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {
+        input.current?.click()
+        _onClick?.(e as any)
+    }
+
+    async function onDrop(e: DragEvent<ComponentRef<AS>>) {
+        _onDrop?.(e as any)
+        if (disabled || !dragFile) return
+        e.preventDefault()
+        const { files } = e.dataTransfer
+        if (!files || files.length === 0) return
+        setDisabled(true)
+        try {
+            if (multiple) {
+                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)
+                }
+                onFileChange?.(files2 as FileType<Multiple>)
+                onValueChange?.(values as ValueType<Multiple, Type>)
+            } else {
+                const file = files[0]
+                onFileChange?.(file as FileType<Multiple>)
+                onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)
+            }
+        } finally {
+            setDisabled(false)
+        }
+    }
+
+    function onDragOver(e: DragEvent<ComponentRef<AS>>) {
+        _onDragOver?.(e as any)
+        if (disabled || !dragFile) return
+        e.preventDefault()
+    }
+
+    return (
+        <Fragment>
+            <InputFile<Multiple, Type>
+                disabled={disabled || _disabled || __disabled}
+                style={{ display: "none", ...style }}
+                multiple={multiple}
+                type={type as Type}
+                onValueChange={onValueChange}
+                onFileChange={onFileChange}
+                clearAfterChange={clearAfterChange}
+                {...restInputProps}
+            />
+            {createElement(as, {
+                disabled: disabled || _disabled,
+                onClick,
+                onDrop,
+                onDragOver,
+                ...rest,
+            })}
+        </Fragment>
+    )
+}
+

package/src/components/Unify.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { CSSProperties, ComponentProps, FC, ReactNode, createContext, createElement, useContext } from "react"
+import { CSSProperties, ComponentProps, FC, ReactNode, createContext, createElement, useContext, JSX } from "react"
 import { clsx } from "deepsea-tools"
 
 export interface UnifyConfig {

package/src/index.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"