deepsea-components 5.9.6 → 5.10.0

package/dist/cjs/components/Flow.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, HTMLAttributes, Key, ReactNode, RefObject } from "react";
+import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref } from "react";
 export interface FlowSizeData {
     /** 容器宽度 */
     width: number;
@@ -68,7 +68,7 @@ export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "chil
     transitionDuration?: number;
     /** 变化的回调函数 */
     onSizeChange?: (sizeData: FlowSizeData) => void;
-    element?: RefObject<HTMLDivElement>;
+    element?: Ref<HTMLDivElement>;
 }
 export declare function getGapRange(gap?: undefined | number | "auto" | (number | "auto")[]): [number, number | "auto"];
 export interface GapAndCount {

package/dist/cjs/components/Flow.js

@@ -26,10 +26,10 @@ __export(Flow_exports, {
   getGapRange: () => getGapRange
 });
 module.exports = __toCommonJS(Flow_exports);
-var import_react = require("react");
 var import_css = require("@emotion/css");
 var import_ahooks = require("ahooks");
 var import_deepsea_tools = require("deepsea-tools");
+var import_react = require("react");
 var import_utils = require("../utils");
 function getGapRange(gap) {
   if (typeof gap === "number")

package/dist/cjs/components/Flow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Flow.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, RefObject, useEffect, useImperativeHandle, useRef, useState } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nexport interface FlowSizeData {\n    /** 容器宽度 */\n    width: number\n    /** 容器高度 */\n    height: number\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /** 列间距 */\n    columnGap: number\n    /** 列数 */\n    columnCount: number\n    /** 行间距 */\n    rowGap: number\n    /** 行数 */\n    rowCount: number\n    /** 元素格数 */\n    itemCount: number\n    /** 最大行数 */\n    maxRows: number | null\n    /** 是否有元素被隐藏 */\n    overflow: boolean\n}\n\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /**\n     * 列间距\n     * 1. 如果是数字，表示列间距是固定的\n     * 2. 如果是 auto，表示会在尽可能放进更多列的情况下，列间距是平均的\n     * 2. 如果是数组，表示列间距是区间的，第一个元素是最小值，第二个元素是最大值\n     */\n    columnGap?: number | \"auto\" | [number | \"auto\", number | \"auto\"]\n    /** 行间距 */\n    rowGap?: number\n    gap?: number\n    /** 最大行数 */\n    maxRows?: number | null\n    /** 源数据 */\n    data?: T[]\n    /** 渲染 */\n    render: (item: T, index: number, arr: T[]) => ReactNode\n    /** key释放器，默认为 index */\n    keyExactor?: (item: T, index: number, arr: T[]) => Key\n    /**\n     * 渲染的元素由两层容器包裹，外层容器类名\n     */\n    wrapperClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，外层容器样式\n     */\n    wrapperStyle?: CSSProperties\n    /**\n     * 渲染的元素由两层容器包裹，内层容器类名\n     */\n    containerClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，内层容器样式\n     */\n    containerStyle?: CSSProperties\n    /** 节流时间，单位毫秒，默认200ms，传入 0 不节流 */\n    throttle?: number\n    /** 动画时间，单位毫秒，默认400ms，传入 0 不展示动画 */\n    transitionDuration?: number\n    /** 变化的回调函数 */\n    onSizeChange?: (sizeData: FlowSizeData) => void\n    element?: RefObject<HTMLDivElement>\n}\n\nexport function getGapRange(gap?: undefined | number | \"auto\" | (number | \"auto\")[]): [number, number | \"auto\"] {\n    if (typeof gap === \"number\") return [gap, gap]\n    if (Array.isArray(gap)) return [typeof gap[0] === \"number\" ? gap[0] : 0, gap[1]]\n    return [0, \"auto\"]\n}\n\nexport interface GapAndCount {\n    count: number\n    gap: number\n}\n\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): GapAndCount {\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\n    if (count === 1) return { count, gap: 0 }\n    const averageGap = (width - itemWidth * count) / (count - 1)\n    if (averageGap < minGap) return { count, gap: minGap }\n    if (maxGap !== \"auto\" && averageGap > maxGap) return { count, gap: maxGap }\n    return { count, gap: averageGap }\n}\n\nexport interface ManualFlowProps<T> extends FlowProps<T> {\n    /** 组件宽度，必须指定 */\n    width: number\n}\n\n/** 手动组件，由外界指定宽度，性能更好 */\nexport function ManualFlow<T>(props: ManualFlowProps<T>) {\n    let {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        maxRows,\n        data = [],\n        render,\n        keyExactor,\n        className,\n        style,\n        wrapperClassName,\n        wrapperStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        containerClassName,\n        containerStyle,\n        gap = 0,\n        width,\n        element,\n        ...rest\n    } = props\n    rowGap ??= gap\n    columnGap ??= gap\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\n    const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = useState(() => getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n    const ele = useRef<HTMLDivElement>(null)\n    const contentRows = Math.ceil(data.length / columnCount)\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\n\n    function getPosition(index: number) {\n        const y = Math.floor(index / columnCount)\n        const x = index - y * columnCount\n        return {\n            left: x * (itemWidth + columnGapSize),\n            top: y * (itemHeight + rowGap!),\n        }\n    }\n\n    function getHidden(index: number) {\n        if (typeof maxRows !== \"number\") return false\n        return index >= maxRows * columnCount\n    }\n\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        function task() {\n            setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n        }\n        if (throttle === 0) return task()\n        const timeout = setTimeout(task, throttle || 200)\n        return () => clearTimeout(timeout)\n    }, [width, itemWidth, throttle, minColumnGap, maxColumnGap])\n\n    useEffect(() => {\n        onSizeChange?.({\n            width,\n            height,\n            itemWidth,\n            itemHeight,\n            columnGap: columnGapSize,\n            columnCount,\n            rowGap: rowGap!,\n            rowCount: contentShownRows,\n            overflow: data.length > contentShownRows * columnCount,\n            itemCount: data.length,\n            maxRows: maxRows ?? null,\n        })\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\n\n    return (\n        <div\n            ref={ele}\n            className={clsx(\n                css`\n                    position: relative;\n                    height: var(--height);\n                    overflow: hidden;\n                `,\n                className,\n            )}\n            style={transformCSSVariable({ height: px(height) }, style)}\n            {...rest}\n        >\n            {data.map((item, index, arr) => (\n                <div\n                    key={keyExactor ? keyExactor(item, index, arr) : index}\n                    className={clsx(\n                        css`\n                            position: absolute;\n                            width: var(--width);\n                            height: var(--height);\n                            transition: var(--transition);\n                            left: 0;\n                            top: 0;\n                            transform: translate(var(--left), var(--top));\n                        `,\n                        wrapperClassName,\n                    )}\n                    style={transformCSSVariable(\n                        {\n                            width: px(itemWidth),\n                            height: px(itemHeight),\n                            transition: transitionDuration === 0 ? \"none\" : `all ${transitionDuration || 400}ms`,\n                            left: px(getPosition(index).left),\n                            top: px(getPosition(index).top),\n                        },\n                        wrapperStyle,\n                    )}\n                >\n                    <div\n                        className={clsx(\n                            css`\n                                width: 100%;\n                                height: 100%;\n                                display: var(--display);\n                            `,\n                            containerClassName,\n                        )}\n                        style={transformCSSVariable({ display: getHidden(index) ? \"none\" : \"block\" }, containerStyle)}\n                    >\n                        {render(item, index, arr)}\n                    </div>\n                </div>\n            ))}\n        </div>\n    )\n}\n\n/** 自适应浮动组件 */\nexport function Flow<T>(props: FlowProps<T>): ReactNode {\n    const {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        gap,\n        maxRows,\n        data,\n        render,\n        keyExactor,\n        wrapperClassName,\n        wrapperStyle,\n        containerClassName,\n        containerStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        element,\n        ...rest\n    } = props\n    const ele = useRef<HTMLDivElement>(null)\n    const size = useSize(ele)\n    const width = useRef(size?.width || 0)\n    if (size && size.width !== 0) width.current = size.width\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n    if (width.current === 0) return <div ref={ele} {...rest} />\n    return <ManualFlow element={ele} {...props} width={width.current} />\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from \"react\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nexport interface FlowSizeData {\n    /** 容器宽度 */\n    width: number\n    /** 容器高度 */\n    height: number\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /** 列间距 */\n    columnGap: number\n    /** 列数 */\n    columnCount: number\n    /** 行间距 */\n    rowGap: number\n    /** 行数 */\n    rowCount: number\n    /** 元素格数 */\n    itemCount: number\n    /** 最大行数 */\n    maxRows: number | null\n    /** 是否有元素被隐藏 */\n    overflow: boolean\n}\n\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /**\n     * 列间距\n     * 1. 如果是数字，表示列间距是固定的\n     * 2. 如果是 auto，表示会在尽可能放进更多列的情况下，列间距是平均的\n     * 2. 如果是数组，表示列间距是区间的，第一个元素是最小值，第二个元素是最大值\n     */\n    columnGap?: number | \"auto\" | [number | \"auto\", number | \"auto\"]\n    /** 行间距 */\n    rowGap?: number\n    gap?: number\n    /** 最大行数 */\n    maxRows?: number | null\n    /** 源数据 */\n    data?: T[]\n    /** 渲染 */\n    render: (item: T, index: number, arr: T[]) => ReactNode\n    /** key释放器，默认为 index */\n    keyExactor?: (item: T, index: number, arr: T[]) => Key\n    /**\n     * 渲染的元素由两层容器包裹，外层容器类名\n     */\n    wrapperClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，外层容器样式\n     */\n    wrapperStyle?: CSSProperties\n    /**\n     * 渲染的元素由两层容器包裹，内层容器类名\n     */\n    containerClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，内层容器样式\n     */\n    containerStyle?: CSSProperties\n    /** 节流时间，单位毫秒，默认200ms，传入 0 不节流 */\n    throttle?: number\n    /** 动画时间，单位毫秒，默认400ms，传入 0 不展示动画 */\n    transitionDuration?: number\n    /** 变化的回调函数 */\n    onSizeChange?: (sizeData: FlowSizeData) => void\n    element?: Ref<HTMLDivElement>\n}\n\nexport function getGapRange(gap?: undefined | number | \"auto\" | (number | \"auto\")[]): [number, number | \"auto\"] {\n    if (typeof gap === \"number\") return [gap, gap]\n    if (Array.isArray(gap)) return [typeof gap[0] === \"number\" ? gap[0] : 0, gap[1]]\n    return [0, \"auto\"]\n}\n\nexport interface GapAndCount {\n    count: number\n    gap: number\n}\n\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): GapAndCount {\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\n    if (count === 1) return { count, gap: 0 }\n    const averageGap = (width - itemWidth * count) / (count - 1)\n    if (averageGap < minGap) return { count, gap: minGap }\n    if (maxGap !== \"auto\" && averageGap > maxGap) return { count, gap: maxGap }\n    return { count, gap: averageGap }\n}\n\nexport interface ManualFlowProps<T> extends FlowProps<T> {\n    /** 组件宽度，必须指定 */\n    width: number\n}\n\n/** 手动组件，由外界指定宽度，性能更好 */\nexport function ManualFlow<T>(props: ManualFlowProps<T>) {\n    let {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        maxRows,\n        data = [],\n        render,\n        keyExactor,\n        className,\n        style,\n        wrapperClassName,\n        wrapperStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        containerClassName,\n        containerStyle,\n        gap = 0,\n        width,\n        element,\n        ...rest\n    } = props\n    rowGap ??= gap\n    columnGap ??= gap\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\n    const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = useState(() => getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n    const ele = useRef<HTMLDivElement>(null)\n    const contentRows = Math.ceil(data.length / columnCount)\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\n\n    function getPosition(index: number) {\n        const y = Math.floor(index / columnCount)\n        const x = index - y * columnCount\n        return {\n            left: x * (itemWidth + columnGapSize),\n            top: y * (itemHeight + rowGap!),\n        }\n    }\n\n    function getHidden(index: number) {\n        if (typeof maxRows !== \"number\") return false\n        return index >= maxRows * columnCount\n    }\n\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        function task() {\n            setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n        }\n        if (throttle === 0) return task()\n        const timeout = setTimeout(task, throttle || 200)\n        return () => clearTimeout(timeout)\n    }, [width, itemWidth, throttle, minColumnGap, maxColumnGap])\n\n    useEffect(() => {\n        onSizeChange?.({\n            width,\n            height,\n            itemWidth,\n            itemHeight,\n            columnGap: columnGapSize,\n            columnCount,\n            rowGap: rowGap!,\n            rowCount: contentShownRows,\n            overflow: data.length > contentShownRows * columnCount,\n            itemCount: data.length,\n            maxRows: maxRows ?? null,\n        })\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\n\n    return (\n        <div\n            ref={ele}\n            className={clsx(\n                css`\n                    position: relative;\n                    height: var(--height);\n                    overflow: hidden;\n                `,\n                className,\n            )}\n            style={transformCSSVariable({ height: px(height) }, style)}\n            {...rest}\n        >\n            {data.map((item, index, arr) => (\n                <div\n                    key={keyExactor ? keyExactor(item, index, arr) : index}\n                    className={clsx(\n                        css`\n                            position: absolute;\n                            width: var(--width);\n                            height: var(--height);\n                            transition: var(--transition);\n                            left: 0;\n                            top: 0;\n                            transform: translate(var(--left), var(--top));\n                        `,\n                        wrapperClassName,\n                    )}\n                    style={transformCSSVariable(\n                        {\n                            width: px(itemWidth),\n                            height: px(itemHeight),\n                            transition: transitionDuration === 0 ? \"none\" : `all ${transitionDuration || 400}ms`,\n                            left: px(getPosition(index).left),\n                            top: px(getPosition(index).top),\n                        },\n                        wrapperStyle,\n                    )}\n                >\n                    <div\n                        className={clsx(\n                            css`\n                                width: 100%;\n                                height: 100%;\n                                display: var(--display);\n                            `,\n                            containerClassName,\n                        )}\n                        style={transformCSSVariable({ display: getHidden(index) ? \"none\" : \"block\" }, containerStyle)}\n                    >\n                        {render(item, index, arr)}\n                    </div>\n                </div>\n            ))}\n        </div>\n    )\n}\n\n/** 自适应浮动组件 */\nexport function Flow<T>(props: FlowProps<T>): ReactNode {\n    const {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        gap,\n        maxRows,\n        data,\n        render,\n        keyExactor,\n        wrapperClassName,\n        wrapperStyle,\n        containerClassName,\n        containerStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        element,\n        ...rest\n    } = props\n    const ele = useRef<HTMLDivElement>(null)\n    const size = useSize(ele)\n    const width = useRef(size?.width || 0)\n    if (size && size.width !== 0) width.current = size.width\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n    if (width.current === 0) return <div ref={ele} {...rest} />\n    return <ManualFlow element={ele} {...props} width={width.current} />\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/components/ImportExcel.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import { FC } from "react";
 import { 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 declare const ImportExcel: import("react").ForwardRefExoticComponent<ImportExcelProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const ImportExcel: FC<ImportExcelProps>;

package/dist/cjs/components/ImportExcel.js

@@ -23,13 +23,12 @@ __export(ImportExcel_exports, {
   ImportExcel: () => ImportExcel
 });
 module.exports = __toCommonJS(ImportExcel_exports);
-var import_react = require("react");
 var import_deepsea_tools = require("deepsea-tools");
 var import_InputFile = require("./InputFile");
-var ImportExcel = (0, import_react.forwardRef)((props, ref) => {
-  const { onChange, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(import_InputFile.InputFile, { ref, accept: ".xlsx", type: "arrayBuffer", onChange: ({ result }) => onChange?.((0, import_deepsea_tools.readExcel)(result)), ...rest });
-});
+var ImportExcel = (props) => {
+  const { onValueChange, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(import_InputFile.InputFile, { accept: ".xlsx", type: "arrayBuffer", onValueChange: (data) => onValueChange?.((0, import_deepsea_tools.readExcel)(data)), ...rest });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ImportExcel

package/dist/cjs/components/ImportExcel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/ImportExcel.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport { forwardRef } from \"react\"\nimport { readExcel } from \"deepsea-tools\"\n\nimport { InputFile, InputFileProps } from \"./InputFile\"\n\nexport interface ImportExcelProps extends Omit<InputFileProps, \"multiple\" | \"onChange\" | \"accept\" | \"type\"> {\n    onChange?: (data: Record<string, any>[]) => void\n}\n\n/** 专门用于读取 excel 的组件 */\nexport const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {\n    const { onChange, ...rest } = props\n\n    return <InputFile ref={ref} accept=\".xlsx\" type=\"arrayBuffer\" onChange={({ result }) => onChange?.(readExcel(result))} {...rest} />\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA2B;AAC3B,2BAA0B;AAE1B,uBAA0C;AAOnC,IAAM,kBAAc,yBAA+C,CAAC,OAAO,QAAQ;AACtF,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAE9B,SAAO,oCAAC,8BAAU,KAAU,QAAO,SAAQ,MAAK,eAAc,UAAU,CAAC,EAAE,OAAO,MAAM,eAAW,gCAAU,MAAM,CAAC,GAAI,GAAG,MAAM;AACrI,CAAC;",
+  "sourcesContent": ["\"use client\"\n\nimport { readExcel } from \"deepsea-tools\"\nimport { FC } from \"react\"\n\nimport { InputFile, InputFileProps } from \"./InputFile\"\n\nexport interface ImportExcelProps extends Omit<InputFileProps<false, \"arrayBuffer\">, \"multiple\" | \"accept\" | \"type\" | \"onValueChange\"> {\n    onValueChange?: (data: Record<string, any>[]) => void\n}\n\n/** 专门用于读取 excel 的组件 */\nexport const ImportExcel: FC<ImportExcelProps> = props => {\n    const { onValueChange, ...rest } = props\n\n    return <InputFile accept=\".xlsx\" type=\"arrayBuffer\" onValueChange={data => onValueChange?.(readExcel(data))} {...rest} />\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAA0B;AAG1B,uBAA0C;AAOnC,IAAM,cAAoC,WAAS;AACtD,QAAM,EAAE,eAAe,GAAG,KAAK,IAAI;AAEnC,SAAO,oCAAC,8BAAU,QAAO,SAAQ,MAAK,eAAc,eAAe,UAAQ,oBAAgB,gCAAU,IAAI,CAAC,GAAI,GAAG,MAAM;AAC3H;",
   "names": []
 }

package/dist/cjs/components/InputFile.d.ts

@@ -1,53 +1,26 @@
-import { ButtonHTMLAttributes, InputHTMLAttributes } from "react";
-export interface InputFileDataTypes {
+import { ComponentProps, ReactNode } from "react";
+export interface InputFileDataTypeMap {
     base64: string;
     text: string;
     arrayBuffer: ArrayBuffer;
     binary: string;
     file: File;
 }
-export type InputFileDataType = keyof InputFileDataTypes;
-export interface InputFileData<T> {
-    result: T;
-    file: File;
+export type InputFileDataType = keyof InputFileDataTypeMap;
+export declare function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypeMap[T]>;
+export interface InputFileBaseProps extends Omit<ComponentProps<"input">, "multiple" | "type"> {
 }
-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"> & {
+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 declare function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]>;
+}
+export interface InputFileProps<Multiple extends boolean = false, Type extends InputFileDataType = "file"> extends InputFileBaseProps, InputFileExtraProps<Multiple, Type> {
+}
 /** 专用于读取文件的组件 */
-export declare const InputFile: import("react").ForwardRefExoticComponent<InputFileProps & import("react").RefAttributes<HTMLInputElement>>;
-export type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    input: InputFileProps;
-    dragFile?: boolean;
-};
-/** 专用于读取文件的 button 组件 */
-export declare const InputFileButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
-    input: InputFileProps;
-    dragFile?: boolean | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function InputFile<Multiple extends boolean = false, Type extends InputFileDataType = "file">(props: InputFileProps<Multiple, Type>): ReactNode;

package/dist/cjs/components/InputFile.js

@@ -21,7 +21,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var InputFile_exports = {};
 __export(InputFile_exports, {
   InputFile: () => InputFile,
-  InputFileButton: () => InputFileButton,
   getFileData: () => getFileData
 });
 module.exports = __toCommonJS(InputFile_exports);
@@ -50,10 +49,11 @@ async function getFileData(file, type) {
     });
   });
 }
-var InputFile = (0, import_react.forwardRef)((props, ref) => {
-  const { multiple = false, type = "file", onChange, disabled: inputDisabled, clearAfterChange, ...rest } = props;
+function InputFile(props) {
+  const { multiple = false, type = "file", onChange: _onChange, disabled: _disabled, clearAfterChange, onValueChange, onFileChange, ...rest } = props;
   const [disabled, setDisabled] = (0, import_react.useState)(false);
-  async function onInputChange(e) {
+  async function onChange(e) {
+    _onChange?.(e);
     const input = e.target;
     const { files } = input;
     if (!files || files.length === 0)
@@ -61,19 +61,18 @@ var InputFile = (0, import_react.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)
@@ -81,69 +80,11 @@ var InputFile = (0, import_react.forwardRef)((props, ref) => {
       setDisabled(false);
     }
   }
-  return /* @__PURE__ */ React.createElement("input", { ref, disabled: disabled || inputDisabled, type: "file", multiple, onChange: onInputChange, ...rest });
-});
-var InputFileButton = (0, import_react.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] = (0, import_react.useState)(false);
-  const input = (0, import_react.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__ */ React.createElement(import_react.Fragment, null, /* @__PURE__ */ React.createElement(
-    InputFile,
-    {
-      ref: input,
-      disabled: disabled || _disabled || __disabled,
-      style: { display: "none", ...style },
-      multiple,
-      onChange,
-      type,
-      ...restInputProps
-    }
-  ), /* @__PURE__ */ React.createElement("button", { ref, type: "button", disabled: disabled || _disabled, onClick, onDrop, onDragOver, ...rest }));
-});
+  return /* @__PURE__ */ React.createElement("input", { disabled: disabled || _disabled, type: "file", multiple, onChange, ...rest });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   InputFile,
-  InputFileButton,
   getFileData
 });
 //# sourceMappingURL=InputFile.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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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",
+  "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;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAiE;AAYjE,eAAsB,YAAyC,MAAY,MAA2C;AAClH,QAAM,aAAa,IAAI,WAAW;AAClC,UAAQ,MAAM;AAAA,IACV,KAAK;AACD,iBAAW,kBAAkB,IAAI;AACjC;AAAA,IACJ,KAAK;AACD,iBAAW,mBAAmB,IAAI;AAClC;AAAA,IACJ,KAAK;AACD,iBAAW,cAAc,IAAI;AAC7B;AAAA,IACJ,KAAK;AACD,iBAAW,WAAW,IAAI;AAC1B;AAAA,IACJ;AACI,aAAO;AAAA,EACf;AACA,SAAO,IAAI,QAAQ,aAAW;AAC1B,eAAW,iBAAiB,QAAQ,MAAM;AACtC,cAAQ,WAAW,MAAa;AAAA,IACpC,CAAC;AAAA,EACL,CAAC;AACL;AAuBO,SAAS,UAAqF,OAAkD;AACnJ,QAAM,EAAE,WAAW,OAAO,OAAO,QAAQ,UAAU,WAAW,UAAU,WAAW,kBAAkB,eAAe,cAAc,GAAG,KAAK,IAAI;AAC9I,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAE9C,iBAAe,SAAS,GAAkC;AACtD,gBAAY,CAAC;AACb,UAAM,QAAQ,EAAE;AAChB,UAAM,EAAE,MAAM,IAAI;AAClB,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,MAAM,YAAY,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,MAAM,YAAY,MAAM,IAAI,CAA+B;AAAA,MAChF;AAAA,IACJ,UAAE;AACE,UAAI;AAAkB,cAAM,QAAQ;AACpC,kBAAY,KAAK;AAAA,IACrB;AAAA,EACJ;AAEA,SAAO,oCAAC,WAAM,UAAU,YAAY,WAAW,MAAK,QAAO,UAAoB,UAAqB,GAAG,MAAM;AACjH;",
   "names": []
 }

package/dist/cjs/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/cjs/components/InputFileButton.js

@@ -0,0 +1,109 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/InputFileButton.tsx
+var InputFileButton_exports = {};
+__export(InputFileButton_exports, {
+  InputFileButton: () => InputFileButton
+});
+module.exports = __toCommonJS(InputFileButton_exports);
+var import_react = require("react");
+var import_InputFile = require("./InputFile");
+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] = (0, import_react.useState)(false);
+  const input = (0, import_react.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 (0, import_InputFile.getFileData)(file, type);
+          values.push(value);
+        }
+        onFileChange?.(files2);
+        onValueChange?.(values);
+      } else {
+        const file = files[0];
+        onFileChange?.(file);
+        onValueChange?.(await (0, import_InputFile.getFileData)(file, type));
+      }
+    } finally {
+      setDisabled(false);
+    }
+  }
+  function onDragOver(e) {
+    _onDragOver?.(e);
+    if (disabled || !dragFile)
+      return;
+    e.preventDefault();
+  }
+  return /* @__PURE__ */ React.createElement(import_react.Fragment, null, /* @__PURE__ */ React.createElement(
+    import_InputFile.InputFile,
+    {
+      disabled: disabled || _disabled || __disabled,
+      style: { display: "none", ...style },
+      multiple,
+      type,
+      onValueChange,
+      onFileChange,
+      clearAfterChange,
+      ...restInputProps
+    }
+  ), (0, import_react.createElement)(as, {
+    disabled: disabled || _disabled,
+    onClick,
+    onDrop,
+    onDragOver,
+    ...rest
+  }));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputFileButton
+});
+//# sourceMappingURL=InputFileButton.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAuI;AACvI,uBAA8I;AAevI,SAAS,gBACZ,OACF;AACE,QAAM;AAAA,IACF,KAAK;AAAA,IACL,SAAS;AAAA,IACT,aAAa,CAAC;AAAA,IACd,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,OAAO,UAAU,YAAY,GAAG,eAAe,IAAI;AAC3D,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,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,UAAU,YAAY,aAAa;AAAA,MACnC,OAAO,EAAE,SAAS,QAAQ,GAAG,MAAM;AAAA,MACnC;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;",
+  "names": []
+}

package/dist/cjs/components/Unify.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ComponentProps, FC, ReactNode } from "react";
+import { CSSProperties, ComponentProps, FC, ReactNode, JSX } from "react";
 export interface UnifyConfig {
     className?: string;
     style?: CSSProperties;

package/dist/cjs/components/Unify.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Unify.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { CSSProperties, ComponentProps, FC, ReactNode, createContext, createElement, useContext } from \"react\"\r\nimport { clsx } from \"deepsea-tools\"\r\n\r\nexport interface UnifyConfig {\r\n    className?: string\r\n    style?: CSSProperties\r\n}\r\n\r\nconst UnifyConfigContext = createContext<UnifyConfig>({})\r\n\r\nexport interface UnifyConfigProviderProps extends UnifyConfig {\r\n    children?: ReactNode\r\n}\r\n\r\nexport const UnifyConfigProvider: FC<UnifyConfigProviderProps> = ({ className, style, children }) => {\r\n    const { className: _className, style: _style } = useContext(UnifyConfigContext)\r\n\r\n    return (\r\n        <UnifyConfigContext.Provider value={{ className: clsx(_className, className), style: { ..._style, ...style } }}>{children}</UnifyConfigContext.Provider>\r\n    )\r\n}\r\n\r\nexport type UnifyProps<T extends keyof JSX.IntrinsicElements = \"div\"> = ComponentProps<T> & {\r\n    as?: T\r\n}\r\n\r\nexport function Unify<T extends keyof JSX.IntrinsicElements = \"div\">(props: UnifyProps<T>) {\r\n    const { as, className, style, ...rest } = props\r\n    const { className: _className, style: _style } = useContext(UnifyConfigContext)\r\n\r\n    return createElement(as ?? \"div\", {\r\n        className: clsx(_className, className),\r\n        style: { ..._style, ...style },\r\n        ...rest,\r\n    }) as ReactNode\r\n}\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAuG;AACvG,2BAAqB;AAOrB,IAAM,yBAAqB,4BAA2B,CAAC,CAAC;AAMjD,IAAM,sBAAoD,CAAC,EAAE,WAAW,OAAO,SAAS,MAAM;AACjG,QAAM,EAAE,WAAW,YAAY,OAAO,OAAO,QAAI,yBAAW,kBAAkB;AAE9E,SACI,oCAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,eAAW,2BAAK,YAAY,SAAS,GAAG,OAAO,EAAE,GAAG,QAAQ,GAAG,MAAM,EAAE,KAAI,QAAS;AAElI;AAMO,SAAS,MAAqD,OAAsB;AACvF,QAAM,EAAE,IAAI,WAAW,OAAO,GAAG,KAAK,IAAI;AAC1C,QAAM,EAAE,WAAW,YAAY,OAAO,OAAO,QAAI,yBAAW,kBAAkB;AAE9E,aAAO,4BAAc,MAAM,OAAO;AAAA,IAC9B,eAAW,2BAAK,YAAY,SAAS;AAAA,IACrC,OAAO,EAAE,GAAG,QAAQ,GAAG,MAAM;AAAA,IAC7B,GAAG;AAAA,EACP,CAAC;AACL;",
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { CSSProperties, ComponentProps, FC, ReactNode, createContext, createElement, useContext, JSX } from \"react\"\r\nimport { clsx } from \"deepsea-tools\"\r\n\r\nexport interface UnifyConfig {\r\n    className?: string\r\n    style?: CSSProperties\r\n}\r\n\r\nconst UnifyConfigContext = createContext<UnifyConfig>({})\r\n\r\nexport interface UnifyConfigProviderProps extends UnifyConfig {\r\n    children?: ReactNode\r\n}\r\n\r\nexport const UnifyConfigProvider: FC<UnifyConfigProviderProps> = ({ className, style, children }) => {\r\n    const { className: _className, style: _style } = useContext(UnifyConfigContext)\r\n\r\n    return (\r\n        <UnifyConfigContext.Provider value={{ className: clsx(_className, className), style: { ..._style, ...style } }}>{children}</UnifyConfigContext.Provider>\r\n    )\r\n}\r\n\r\nexport type UnifyProps<T extends keyof JSX.IntrinsicElements = \"div\"> = ComponentProps<T> & {\r\n    as?: T\r\n}\r\n\r\nexport function Unify<T extends keyof JSX.IntrinsicElements = \"div\">(props: UnifyProps<T>) {\r\n    const { as, className, style, ...rest } = props\r\n    const { className: _className, style: _style } = useContext(UnifyConfigContext)\r\n\r\n    return createElement(as ?? \"div\", {\r\n        className: clsx(_className, className),\r\n        style: { ..._style, ...style },\r\n        ...rest,\r\n    }) as ReactNode\r\n}\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA4G;AAC5G,2BAAqB;AAOrB,IAAM,yBAAqB,4BAA2B,CAAC,CAAC;AAMjD,IAAM,sBAAoD,CAAC,EAAE,WAAW,OAAO,SAAS,MAAM;AACjG,QAAM,EAAE,WAAW,YAAY,OAAO,OAAO,QAAI,yBAAW,kBAAkB;AAE9E,SACI,oCAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,eAAW,2BAAK,YAAY,SAAS,GAAG,OAAO,EAAE,GAAG,QAAQ,GAAG,MAAM,EAAE,KAAI,QAAS;AAElI;AAMO,SAAS,MAAqD,OAAsB;AACvF,QAAM,EAAE,IAAI,WAAW,OAAO,GAAG,KAAK,IAAI;AAC1C,QAAM,EAAE,WAAW,YAAY,OAAO,OAAO,QAAI,yBAAW,kBAAkB;AAE9E,aAAO,4BAAc,MAAM,OAAO;AAAA,IAC9B,eAAW,2BAAK,YAAY,SAAS;AAAA,IACrC,OAAO,EAAE,GAAG,QAAQ,GAAG,MAAM;AAAA,IAC7B,GAAG;AAAA,EACP,CAAC;AACL;",
   "names": []
 }

package/dist/cjs/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/cjs/index.js

@@ -29,6 +29,7 @@ __reExport(src_exports, require("./components/HlsPlayer"), module.exports);
 __reExport(src_exports, require("./components/ImportExcel"), module.exports);
 __reExport(src_exports, require("./components/InfiniteScroll"), module.exports);
 __reExport(src_exports, require("./components/InputFile"), module.exports);
+__reExport(src_exports, require("./components/InputFileButton"), module.exports);
 __reExport(src_exports, require("./components/LoopSwiper"), module.exports);
 __reExport(src_exports, require("./components/Ring"), module.exports);
 __reExport(src_exports, require("./components/Scroll"), module.exports);
@@ -56,6 +57,7 @@ __reExport(src_exports, require("./utils/index"), module.exports);
   ...require("./components/ImportExcel"),
   ...require("./components/InfiniteScroll"),
   ...require("./components/InputFile"),
+  ...require("./components/InputFileButton"),
   ...require("./components/LoopSwiper"),
   ...require("./components/Ring"),
   ...require("./components/Scroll"),

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,oCAJd;AAKA,wBAAc,gCALd;AAMA,wBAAc,qCANd;AAOA,wBAAc,8BAPd;AAQA,wBAAc,mCARd;AASA,wBAAc,mCATd;AAUA,wBAAc,qCAVd;AAWA,wBAAc,wCAXd;AAYA,wBAAc,mCAZd;AAaA,wBAAc,oCAbd;AAcA,wBAAc,8BAdd;AAeA,wBAAc,gCAfd;AAgBA,wBAAc,qCAhBd;AAiBA,wBAAc,kCAjBd;AAkBA,wBAAc,+BAlBd;AAmBA,wBAAc,uCAnBd;AAoBA,wBAAc,uCApBd;AAqBA,wBAAc,mCArBd;AAsBA,wBAAc,+BAtBd;AAuBA,wBAAc,oCAvBd;AAwBA,wBAAc,0BAxBd;",
+  "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;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,oCAJd;AAKA,wBAAc,gCALd;AAMA,wBAAc,qCANd;AAOA,wBAAc,8BAPd;AAQA,wBAAc,mCARd;AASA,wBAAc,mCATd;AAUA,wBAAc,qCAVd;AAWA,wBAAc,wCAXd;AAYA,wBAAc,mCAZd;AAaA,wBAAc,yCAbd;AAcA,wBAAc,oCAdd;AAeA,wBAAc,8BAfd;AAgBA,wBAAc,gCAhBd;AAiBA,wBAAc,qCAjBd;AAkBA,wBAAc,kCAlBd;AAmBA,wBAAc,+BAnBd;AAoBA,wBAAc,uCApBd;AAqBA,wBAAc,uCArBd;AAsBA,wBAAc,mCAtBd;AAuBA,wBAAc,+BAvBd;AAwBA,wBAAc,oCAxBd;AAyBA,wBAAc,0BAzBd;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-import { CSSProperties, HTMLAttributes, Key, ReactNode, RefObject } from "react";
+import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref } from "react";
 export interface FlowSizeData {
     /** 容器宽度 */
     width: number;
@@ -68,7 +68,7 @@ export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "chil
     transitionDuration?: number;
     /** 变化的回调函数 */
     onSizeChange?: (sizeData: FlowSizeData) => void;
-    element?: RefObject<HTMLDivElement>;
+    element?: Ref<HTMLDivElement>;
 }
 export declare function getGapRange(gap?: undefined | number | "auto" | (number | "auto")[]): [number, number | "auto"];
 export interface GapAndCount {