deepsea-components 5.11.6 → 5.12.1

package/dist/esm/components/Flow.js

@@ -1,186 +0,0 @@
-"use client";
-
-import { useEffect, useImperativeHandle, useRef, useState } from "react";
-import { css } from "@emotion/css";
-import { clsx } from "deepsea-tools";
-import { useSize } from "soda-hooks";
-import { px, transformCSSVariable } from "../utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function getGapRange(gap) {
-  if (typeof gap === "number") return [gap, gap];
-  if (Array.isArray(gap)) return [typeof gap[0] === "number" ? gap[0] : 0, gap[1]];
-  return [0, "auto"];
-}
-export function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
-  const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1;
-  if (count === 1) return {
-    count,
-    gap: 0
-  };
-  const averageGap = (width - itemWidth * count) / (count - 1);
-  if (averageGap < minGap) return {
-    count,
-    gap: minGap
-  };
-  if (maxGap !== "auto" && averageGap > maxGap) return {
-    count,
-    gap: maxGap
-  };
-  return {
-    count,
-    gap: averageGap
-  };
-}
-/** 手动组件，由外界指定宽度，性能更好 */
-export function ManualFlow(props) {
-  let {
-    itemWidth,
-    itemHeight,
-    columnGap,
-    rowGap,
-    maxRows,
-    data = [],
-    render,
-    keyExactor,
-    className,
-    style,
-    wrapperClassName,
-    wrapperStyle,
-    throttle,
-    transitionDuration,
-    onSizeChange,
-    containerClassName,
-    containerStyle,
-    gap = 0,
-    width,
-    element,
-    ...rest
-  } = props;
-  rowGap ??= gap;
-  columnGap ??= gap;
-  const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
-  const [{
-    count: columnCount,
-    gap: columnGapSize
-  }, setGapAndCount] = useState(() => getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap));
-  const ele = useRef(null);
-  const contentRows = Math.ceil(data.length / columnCount);
-  const contentShownRows = typeof maxRows === "number" ? Math.min(contentRows, maxRows) : contentRows;
-  const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0;
-  function getPosition(index) {
-    const y = Math.floor(index / columnCount);
-    const x = index - y * columnCount;
-    return {
-      left: x * (itemWidth + columnGapSize),
-      top: y * (itemHeight + rowGap)
-    };
-  }
-  function getHidden(index) {
-    if (typeof maxRows !== "number") return false;
-    return index >= maxRows * columnCount;
-  }
-  useImperativeHandle(element, () => ele.current, [ele.current]);
-  useEffect(() => {
-    function task() {
-      setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap));
-    }
-    if (throttle === 0) return task();
-    const timeout = setTimeout(task, throttle || 200);
-    return () => clearTimeout(timeout);
-  }, [width, itemWidth, throttle, minColumnGap, maxColumnGap]);
-  useEffect(() => {
-    onSizeChange?.({
-      width,
-      height,
-      itemWidth,
-      itemHeight,
-      columnGap: columnGapSize,
-      columnCount,
-      rowGap: rowGap,
-      rowCount: contentShownRows,
-      overflow: data.length > contentShownRows * columnCount,
-      itemCount: data.length,
-      maxRows: maxRows ?? null
-    });
-  }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows]);
-  return /*#__PURE__*/_jsx("div", {
-    ref: ele,
-    className: clsx(css`
-                    position: relative;
-                    height: var(--height);
-                    overflow: hidden;
-                `, className),
-    style: transformCSSVariable({
-      height: px(height)
-    }, style),
-    ...rest,
-    children: data.map((item, index, arr) => /*#__PURE__*/_jsx("div", {
-      className: clsx(css`
-                            position: absolute;
-                            width: var(--width);
-                            height: var(--height);
-                            transition: var(--transition);
-                            left: 0;
-                            top: 0;
-                            transform: translate(var(--left), var(--top));
-                        `, wrapperClassName),
-      style: transformCSSVariable({
-        width: px(itemWidth),
-        height: px(itemHeight),
-        transition: transitionDuration === 0 ? "none" : `all ${transitionDuration || 400}ms`,
-        left: px(getPosition(index).left),
-        top: px(getPosition(index).top)
-      }, wrapperStyle),
-      children: /*#__PURE__*/_jsx("div", {
-        className: clsx(css`
-                                width: 100%;
-                                height: 100%;
-                                display: var(--display);
-                            `, containerClassName),
-        style: transformCSSVariable({
-          display: getHidden(index) ? "none" : "block"
-        }, containerStyle),
-        children: render(item, index, arr)
-      })
-    }, keyExactor ? keyExactor(item, index, arr) : index))
-  });
-}
-
-/** 自适应浮动组件 */
-export function Flow(props) {
-  const {
-    itemWidth,
-    itemHeight,
-    columnGap,
-    rowGap,
-    gap,
-    maxRows,
-    data,
-    render,
-    keyExactor,
-    wrapperClassName,
-    wrapperStyle,
-    containerClassName,
-    containerStyle,
-    throttle,
-    transitionDuration,
-    onSizeChange,
-    element,
-    ...rest
-  } = props;
-  const ele = useRef(null);
-  const size = useSize(ele);
-  const width = useRef(size?.width || 0);
-  if (size && size.width !== 0) width.current = size.width;
-  useImperativeHandle(element, () => ele.current, [ele.current]);
-  if (width.current === 0) return /*#__PURE__*/_jsx("div", {
-    ref: ele,
-    ...rest
-  });
-  return /*#__PURE__*/_jsx(ManualFlow, {
-    element: ele,
-    ...props,
-    width: width.current
-  });
-}
-//# sourceMappingURL=Flow.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["useEffect","useImperativeHandle","useRef","useState","css","clsx","useSize","px","transformCSSVariable","jsx","_jsx","getGapRange","gap","Array","isArray","getGapCountAndSize","width","itemWidth","minGap","maxGap","count","Math","floor","averageGap","ManualFlow","props","itemHeight","columnGap","rowGap","maxRows","data","render","keyExactor","className","style","wrapperClassName","wrapperStyle","throttle","transitionDuration","onSizeChange","containerClassName","containerStyle","element","rest","minColumnGap","maxColumnGap","columnCount","columnGapSize","setGapAndCount","ele","contentRows","ceil","length","contentShownRows","min","height","getPosition","index","y","x","left","top","getHidden","current","task","timeout","setTimeout","clearTimeout","rowCount","overflow","itemCount","ref","children","map","item","arr","transition","display","Flow","size"],"sources":["../../../src/components/Flow.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { useSize } from \"soda-hooks\"\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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"}

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

@@ -1,22 +0,0 @@
-import { ComponentPropsWithoutRef, FC, ReactNode } from "react";
-export interface FormLabelConfig {
-    /**
-     * Label 的宽度.
-     */
-    width?: number;
-    /**
-     * 是否在 Label 前面添加一个空白区域，只有当前 Label 为非必选，而存在其他 Label 为必选的时候开启
-     */
-    before?: boolean | number;
-}
-export interface FormLabelProps extends ComponentPropsWithoutRef<"div">, FormLabelConfig {
-}
-export declare const FormLabelConfigContext: import("react").Context<Partial<FormLabelConfig>>;
-export interface FormLabelConfigProviderProps extends FormLabelConfig {
-    children?: ReactNode;
-}
-export declare const FormLabelConfigProvider: FC<FormLabelConfigProviderProps>;
-/**
- * 为 Ant Design 的 FormItem 设计的 Label 组件
- */
-export declare const FormLabel: FC<FormLabelProps>;

package/dist/esm/components/FormLabel.js

@@ -1,52 +0,0 @@
-"use client";
-
-import { Fragment, createContext, useContext } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export const FormLabelConfigContext = /*#__PURE__*/createContext({});
-export const FormLabelConfigProvider = ({
-  width,
-  before,
-  children
-}) => /*#__PURE__*/_jsx(FormLabelConfigContext.Provider, {
-  value: {
-    width,
-    before
-  },
-  children: children
-});
-
-/**
- * 为 Ant Design 的 FormItem 设计的 Label 组件
- */
-export const FormLabel = props => {
-  const {
-    width: _width,
-    before: _before
-  } = useContext(FormLabelConfigContext);
-  const {
-    style,
-    width = _width,
-    before = _before,
-    ...rest
-  } = props;
-  return /*#__PURE__*/_jsxs(Fragment, {
-    children: [!!before && /*#__PURE__*/_jsx("div", {
-      style: {
-        width: 11,
-        color: "transparent",
-        userSelect: "none"
-      },
-      children: "\u2002"
-    }), /*#__PURE__*/_jsx("div", {
-      style: {
-        width,
-        textAlign: "justify",
-        textAlignLast: "justify",
-        ...style
-      },
-      ...rest
-    })]
-  });
-};
-//# sourceMappingURL=FormLabel.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["Fragment","createContext","useContext","jsx","_jsx","jsxs","_jsxs","FormLabelConfigContext","FormLabelConfigProvider","width","before","children","Provider","value","FormLabel","props","_width","_before","style","rest","color","userSelect","textAlign","textAlignLast"],"sources":["../../../src/components/FormLabel.tsx"],"sourcesContent":["\"use client\"\n\nimport { ComponentPropsWithoutRef, FC, Fragment, ReactNode, createContext, useContext } from \"react\"\n\nexport interface FormLabelConfig {\n    /**\n     * Label 的宽度.\n     */\n    width?: number\n    /**\n     * 是否在 Label 前面添加一个空白区域，只有当前 Label 为非必选，而存在其他 Label 为必选的时候开启\n     */\n    before?: boolean | number\n}\n\nexport interface FormLabelProps extends ComponentPropsWithoutRef<\"div\">, FormLabelConfig {}\n\nexport const FormLabelConfigContext = createContext<Partial<FormLabelConfig>>({})\n\nexport interface FormLabelConfigProviderProps extends FormLabelConfig {\n    children?: ReactNode\n}\n\nexport const FormLabelConfigProvider: FC<FormLabelConfigProviderProps> = ({ width, before, children }) => (\n    <FormLabelConfigContext.Provider value={{ width, before }}>{children}</FormLabelConfigContext.Provider>\n)\n\n/**\n * 为 Ant Design 的 FormItem 设计的 Label 组件\n */\nexport const FormLabel: FC<FormLabelProps> = props => {\n    const { width: _width, before: _before } = useContext(FormLabelConfigContext)\n    const { style, width = _width, before = _before, ...rest } = props\n\n    return (\n        <Fragment>\n            {!!before && <div style={{ width: 11, color: \"transparent\", userSelect: \"none\" }}>&ensp;</div>}\n            <div style={{ width, textAlign: \"justify\", textAlignLast: \"justify\", ...style }} {...rest} />\n        </Fragment>\n    )\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAuCA,QAAQ,EAAaC,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAepG,OAAO,MAAMC,sBAAsB,gBAAGN,aAAa,CAA2B,CAAC,CAAC,CAAC;AAMjF,OAAO,MAAMO,uBAAyD,GAAGA,CAAC;EAAEC,KAAK;EAAEC,MAAM;EAAEC;AAAS,CAAC,kBACjGP,IAAA,CAACG,sBAAsB,CAACK,QAAQ;EAACC,KAAK,EAAE;IAAEJ,KAAK;IAAEC;EAAO,CAAE;EAAAC,QAAA,EAAEA;AAAQ,CAAkC,CACzG;;AAED;AACA;AACA;AACA,OAAO,MAAMG,SAA6B,GAAGC,KAAK,IAAI;EAClD,MAAM;IAAEN,KAAK,EAAEO,MAAM;IAAEN,MAAM,EAAEO;EAAQ,CAAC,GAAGf,UAAU,CAACK,sBAAsB,CAAC;EAC7E,MAAM;IAAEW,KAAK;IAAET,KAAK,GAAGO,MAAM;IAAEN,MAAM,GAAGO,OAAO;IAAE,GAAGE;EAAK,CAAC,GAAGJ,KAAK;EAElE,oBACIT,KAAA,CAACN,QAAQ;IAAAW,QAAA,GACJ,CAAC,CAACD,MAAM,iBAAIN,IAAA;MAAKc,KAAK,EAAE;QAAET,KAAK,EAAE,EAAE;QAAEW,KAAK,EAAE,aAAa;QAAEC,UAAU,EAAE;MAAO,CAAE;MAAAV,QAAA,EAAC;IAAM,CAAK,CAAC,eAC9FP,IAAA;MAAKc,KAAK,EAAE;QAAET,KAAK;QAAEa,SAAS,EAAE,SAAS;QAAEC,aAAa,EAAE,SAAS;QAAE,GAAGL;MAAM,CAAE;MAAA,GAAKC;IAAI,CAAG,CAAC;EAAA,CACvF,CAAC;AAEnB,CAAC"}

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

@@ -1,5 +0,0 @@
-import { MediaHTMLAttributes } from "react";
-export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
-    src: string;
-}
-export declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;

package/dist/esm/components/HlsPlayer.js

@@ -1,36 +0,0 @@
-"use client";
-
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import Hls from "hls.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const HlsPlayer = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    src,
-    ...rest
-  } = props;
-  const video = useRef(null);
-  useImperativeHandle(ref, () => video.current, []);
-  useEffect(() => {
-    const {
-      current: player
-    } = video;
-    if (!player || !src) return;
-    if (player.canPlayType("application/vnd.apple.mpegurl")) {
-      player.src = src;
-      return;
-    }
-    if (Hls.isSupported()) {
-      const hls = new Hls();
-      hls.loadSource(src);
-      hls.attachMedia(player);
-      return () => {
-        hls.destroy();
-      };
-    }
-  }, [src]);
-  return /*#__PURE__*/_jsx("video", {
-    ref: video,
-    ...rest
-  });
-});
-//# sourceMappingURL=HlsPlayer.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","Hls","jsx","_jsx","HlsPlayer","props","ref","src","rest","video","current","player","canPlayType","isSupported","hls","loadSource","attachMedia","destroy"],"sources":["../../../src/components/HlsPlayer.tsx"],"sourcesContent":["\"use client\"\n\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport Hls from \"hls.js\"\n\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\n    src: string\n}\n\nexport const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\n    const { src, ...rest } = props\n    const video = useRef<HTMLVideoElement>(null)\n\n    useImperativeHandle(ref, () => video.current!, [])\n\n    useEffect(() => {\n        const { current: player } = video\n        if (!player || !src) return\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\n            player.src = src\n            return\n        }\n        if (Hls.isSupported()) {\n            const hls = new Hls()\n            hls.loadSource(src)\n            hls.attachMedia(player)\n            return () => {\n                hls.destroy()\n            }\n        }\n    }, [src])\n\n    return <video ref={video} {...rest} />\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAA8BA,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAC/F,OAAOC,GAAG,MAAM,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMxB,OAAO,MAAMC,SAAS,gBAAGP,UAAU,CAAmC,CAACQ,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC9B,MAAMI,KAAK,GAAGT,MAAM,CAAmB,IAAI,CAAC;EAE5CD,mBAAmB,CAACO,GAAG,EAAE,MAAMG,KAAK,CAACC,OAAQ,EAAE,EAAE,CAAC;EAElDZ,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEY,OAAO,EAAEC;IAAO,CAAC,GAAGF,KAAK;IACjC,IAAI,CAACE,MAAM,IAAI,CAACJ,GAAG,EAAE;IACrB,IAAII,MAAM,CAACC,WAAW,CAAC,+BAA+B,CAAC,EAAE;MACrDD,MAAM,CAACJ,GAAG,GAAGA,GAAG;MAChB;IACJ;IACA,IAAIN,GAAG,CAACY,WAAW,CAAC,CAAC,EAAE;MACnB,MAAMC,GAAG,GAAG,IAAIb,GAAG,CAAC,CAAC;MACrBa,GAAG,CAACC,UAAU,CAACR,GAAG,CAAC;MACnBO,GAAG,CAACE,WAAW,CAACL,MAAM,CAAC;MACvB,OAAO,MAAM;QACTG,GAAG,CAACG,OAAO,CAAC,CAAC;MACjB,CAAC;IACL;EACJ,CAAC,EAAE,CAACV,GAAG,CAAC,CAAC;EAET,oBAAOJ,IAAA;IAAOG,GAAG,EAAEG,KAAM;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC1C,CAAC,CAAC"}

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

@@ -1,54 +0,0 @@
-import { CSSProperties, ComponentPropsWithoutRef } from "react";
-export type InfiniteScrollProps = ComponentPropsWithoutRef<"div"> & {
-    /**
-     * 滚动的方向
-     * @default "vertical"
-     */
-    direction?: "vertical" | "horizontal";
-    /** 渲染 children 的容器的类名 */
-    containerClassName?: string;
-    /** 渲染 children 的容器的样式 */
-    containerStyle?: CSSProperties;
-    /**
-     * 两个 children 容器之间的间距
-     * @default 0
-     */
-    gap?: number;
-    /** 一个周期的时间，单位：毫秒 */
-    duration: number;
-    /** 是否将 gap 的距离也加入 overflow 的计算 */
-    withGap?: boolean;
-    /** 尺寸刚好相同时，是否视为溢出 */
-    withEqual?: boolean;
-    /** 鼠标移入时，是否停止动画 */
-    pauseOnHover?: boolean;
-};
-/**
- * 无限滚动的组件
- * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果
- * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画
- */
-export declare const InfiniteScroll: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    /**
-     * 滚动的方向
-     * @default "vertical"
-     */
-    direction?: "horizontal" | "vertical" | undefined;
-    /** 渲染 children 的容器的类名 */
-    containerClassName?: string | undefined;
-    /** 渲染 children 的容器的样式 */
-    containerStyle?: CSSProperties | undefined;
-    /**
-     * 两个 children 容器之间的间距
-     * @default 0
-     */
-    gap?: number | undefined;
-    /** 一个周期的时间，单位：毫秒 */
-    duration: number;
-    /** 是否将 gap 的距离也加入 overflow 的计算 */
-    withGap?: boolean | undefined;
-    /** 尺寸刚好相同时，是否视为溢出 */
-    withEqual?: boolean | undefined;
-    /** 鼠标移入时，是否停止动画 */
-    pauseOnHover?: boolean | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/InfiniteScroll.js

@@ -1,102 +0,0 @@
-"use client";
-
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import { css } from "@emotion/css";
-import { clsx } from "deepsea-tools";
-import { useSize } from "soda-hooks";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * 无限滚动的组件
- * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果
- * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画
- */
-export const InfiniteScroll = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    className,
-    direction = "vertical",
-    children,
-    containerClassName,
-    containerStyle,
-    gap = 0,
-    duration,
-    withGap,
-    withEqual,
-    pauseOnHover,
-    onMouseEnter,
-    onMouseLeave,
-    ...rest
-  } = props;
-  const wrapper = useRef(null);
-  const wrapperSize = useSize(wrapper);
-  const ele = useRef(null);
-  useImperativeHandle(ref, () => wrapper.current, [wrapper.current]);
-  const container = useRef(null);
-  const containerSize = useSize(container);
-  function bigger(containerSize, wrapperSize) {
-    return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize;
-  }
-  const overflow = wrapperSize && containerSize ? direction === "vertical" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width) : false;
-  const animation = useRef(undefined);
-  useEffect(() => {
-    if (!wrapperSize || !containerSize || !overflow) return;
-    animation.current = ele.current?.animate({
-      transform: direction === "vertical" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]
-    }, {
-      duration,
-      iterations: Infinity
-    });
-    return () => animation.current?.cancel();
-  }, [wrapperSize, containerSize, overflow, direction, duration]);
-  function enter(e) {
-    if (pauseOnHover) animation.current?.pause();
-    onMouseEnter?.(e);
-  }
-  function leave(e) {
-    if (pauseOnHover) animation.current?.play();
-    onMouseLeave?.(e);
-  }
-  useEffect(() => {
-    if (!pauseOnHover && animation.current?.playState === "paused") animation.current?.play();
-  }, [animation.current, pauseOnHover]);
-  return /*#__PURE__*/_jsx("div", {
-    ref: wrapper,
-    className: clsx(css`
-                    position: relative;
-                    ${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"}
-                `, className),
-    onMouseEnter: enter,
-    onMouseLeave: leave,
-    ...rest,
-    children: /*#__PURE__*/_jsxs("div", {
-      ref: ele,
-      style: {
-        position: "absolute",
-        width: direction === "vertical" ? "100%" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),
-        height: direction === "horizontal" ? "100%" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width)
-      },
-      children: [/*#__PURE__*/_jsx("div", {
-        ref: container,
-        className: clsx(css`
-                            position: absolute;
-                            left: 0;
-                            top: 0;
-                            ${direction === "vertical" ? "width: 100%;" : "height: 100%;"}
-                        `, containerClassName),
-        style: containerStyle,
-        children: children
-      }), overflow && /*#__PURE__*/_jsx("div", {
-        ref: container,
-        className: clsx(css`
-                                position: absolute;
-                                right: 0;
-                                bottom: 0;
-                                ${direction === "vertical" ? "width: 100%;" : "height: 100%;"}
-                            `, containerClassName),
-        style: containerStyle,
-        children: children
-      })]
-    })
-  });
-});
-//# sourceMappingURL=InfiniteScroll.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","css","clsx","useSize","jsx","_jsx","jsxs","_jsxs","InfiniteScroll","props","ref","className","direction","children","containerClassName","containerStyle","gap","duration","withGap","withEqual","pauseOnHover","onMouseEnter","onMouseLeave","rest","wrapper","wrapperSize","ele","current","container","containerSize","bigger","overflow","height","width","animation","undefined","animate","transform","iterations","Infinity","cancel","enter","e","pause","leave","play","playState","style","position"],"sources":["../../../src/components/InfiniteScroll.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { useSize } from \"soda-hooks\"\n\nexport type InfiniteScrollProps = ComponentPropsWithoutRef<\"div\"> & {\n    /**\n     * 滚动的方向\n     * @default \"vertical\"\n     */\n    direction?: \"vertical\" | \"horizontal\"\n    /** 渲染 children 的容器的类名 */\n    containerClassName?: string\n    /** 渲染 children 的容器的样式 */\n    containerStyle?: CSSProperties\n    /**\n     * 两个 children 容器之间的间距\n     * @default 0\n     */\n    gap?: number\n    /** 一个周期的时间，单位：毫秒 */\n    duration: number\n    /** 是否将 gap 的距离也加入 overflow 的计算 */\n    withGap?: boolean\n    /** 尺寸刚好相同时，是否视为溢出 */\n    withEqual?: boolean\n    /** 鼠标移入时，是否停止动画 */\n    pauseOnHover?: boolean\n}\n\n/**\n * 无限滚动的组件\n * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果\n * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画\n */\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\n    const {\n        className,\n        direction = \"vertical\",\n        children,\n        containerClassName,\n        containerStyle,\n        gap = 0,\n        duration,\n        withGap,\n        withEqual,\n        pauseOnHover,\n        onMouseEnter,\n        onMouseLeave,\n        ...rest\n    } = props\n\n    const wrapper = useRef<HTMLDivElement>(null)\n    const wrapperSize = useSize(wrapper)\n\n    const ele = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\n\n    const container = useRef<HTMLDivElement>(null)\n    const containerSize = useSize(container)\n\n    function bigger(containerSize: number, wrapperSize: number) {\n        return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\n    }\n\n    const overflow =\n        wrapperSize && containerSize\n            ? direction === \"vertical\"\n                ? bigger(containerSize.height, wrapperSize.height)\n                : bigger(containerSize.width, wrapperSize.width)\n            : false\n\n    const animation = useRef<Animation | undefined>(undefined)\n\n    useEffect(() => {\n        if (!wrapperSize || !containerSize || !overflow) return\n        animation.current = ele.current?.animate(\n            {\n                transform:\n                    direction === \"vertical\"\n                        ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`]\n                        : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`],\n            },\n            { duration, iterations: Infinity },\n        )\n        return () => animation.current?.cancel()\n    }, [wrapperSize, containerSize, overflow, direction, duration])\n\n    function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (pauseOnHover) animation.current?.pause()\n        onMouseEnter?.(e)\n    }\n\n    function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (pauseOnHover) animation.current?.play()\n        onMouseLeave?.(e)\n    }\n\n    useEffect(() => {\n        if (!pauseOnHover && animation.current?.playState === \"paused\") animation.current?.play()\n    }, [animation.current, pauseOnHover])\n\n    return (\n        <div\n            ref={wrapper}\n            className={clsx(\n                css`\n                    position: relative;\n                    ${direction === \"vertical\" ? \"overflow-y: hidden;\" : \"overflow-x: hidden;\"}\n                `,\n                className,\n            )}\n            onMouseEnter={enter}\n            onMouseLeave={leave}\n            {...rest}\n        >\n            <div\n                ref={ele}\n                style={{\n                    position: \"absolute\",\n                    width: direction === \"vertical\" ? \"100%\" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),\n                    height: direction === \"horizontal\" ? \"100%\" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width),\n                }}\n            >\n                <div\n                    ref={container}\n                    className={clsx(\n                        css`\n                            position: absolute;\n                            left: 0;\n                            top: 0;\n                            ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\n                        `,\n                        containerClassName,\n                    )}\n                    style={containerStyle}\n                >\n                    {children}\n                </div>\n                {overflow && (\n                    <div\n                        ref={container}\n                        className={clsx(\n                            css`\n                                position: absolute;\n                                right: 0;\n                                bottom: 0;\n                                ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\n                            `,\n                            containerClassName,\n                        )}\n                        style={containerStyle}\n                    >\n                        {children}\n                    </div>\n                )}\n            </div>\n        </div>\n    )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAiFA,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAClJ,SAASC,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,OAAO,QAAQ,YAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AA2BpC;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,gBAAGX,UAAU,CAAsC,CAACY,KAAK,EAAEC,GAAG,KAAK;EAC1F,MAAM;IACFC,SAAS;IACTC,SAAS,GAAG,UAAU;IACtBC,QAAQ;IACRC,kBAAkB;IAClBC,cAAc;IACdC,GAAG,GAAG,CAAC;IACPC,QAAQ;IACRC,OAAO;IACPC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,YAAY;IACZ,GAAGC;EACP,CAAC,GAAGd,KAAK;EAET,MAAMe,OAAO,GAAGxB,MAAM,CAAiB,IAAI,CAAC;EAC5C,MAAMyB,WAAW,GAAGtB,OAAO,CAACqB,OAAO,CAAC;EAEpC,MAAME,GAAG,GAAG1B,MAAM,CAAiB,IAAI,CAAC;EAExCD,mBAAmB,CAACW,GAAG,EAAE,MAAMc,OAAO,CAACG,OAAyB,EAAE,CAACH,OAAO,CAACG,OAAO,CAAC,CAAC;EAEpF,MAAMC,SAAS,GAAG5B,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAM6B,aAAa,GAAG1B,OAAO,CAACyB,SAAS,CAAC;EAExC,SAASE,MAAMA,CAACD,aAAqB,EAAEJ,WAAmB,EAAE;IACxD,OAAON,SAAS,GAAGU,aAAa,IAAIX,OAAO,GAAGF,GAAG,GAAG,CAAC,CAAC,IAAIS,WAAW,GAAGI,aAAa,IAAIX,OAAO,GAAGF,GAAG,GAAG,CAAC,CAAC,GAAGS,WAAW;EAC7H;EAEA,MAAMM,QAAQ,GACVN,WAAW,IAAII,aAAa,GACtBjB,SAAS,KAAK,UAAU,GACpBkB,MAAM,CAACD,aAAa,CAACG,MAAM,EAAEP,WAAW,CAACO,MAAM,CAAC,GAChDF,MAAM,CAACD,aAAa,CAACI,KAAK,EAAER,WAAW,CAACQ,KAAK,CAAC,GAClD,KAAK;EAEf,MAAMC,SAAS,GAAGlC,MAAM,CAAwBmC,SAAS,CAAC;EAE1DrC,SAAS,CAAC,MAAM;IACZ,IAAI,CAAC2B,WAAW,IAAI,CAACI,aAAa,IAAI,CAACE,QAAQ,EAAE;IACjDG,SAAS,CAACP,OAAO,GAAGD,GAAG,CAACC,OAAO,EAAES,OAAO,CACpC;MACIC,SAAS,EACLzB,SAAS,KAAK,UAAU,GAClB,CAAE,eAAc,EAAG,eAAciB,aAAa,CAACG,MAAM,GAAGhB,GAAI,KAAI,CAAC,GACjE,CAAE,eAAc,EAAG,eAAca,aAAa,CAACI,KAAK,GAAGjB,GAAI,KAAI;IAC7E,CAAC,EACD;MAAEC,QAAQ;MAAEqB,UAAU,EAAEC;IAAS,CACrC,CAAC;IACD,OAAO,MAAML,SAAS,CAACP,OAAO,EAAEa,MAAM,CAAC,CAAC;EAC5C,CAAC,EAAE,CAACf,WAAW,EAAEI,aAAa,EAAEE,QAAQ,EAAEnB,SAAS,EAAEK,QAAQ,CAAC,CAAC;EAE/D,SAASwB,KAAKA,CAACC,CAA8C,EAAE;IAC3D,IAAItB,YAAY,EAAEc,SAAS,CAACP,OAAO,EAAEgB,KAAK,CAAC,CAAC;IAC5CtB,YAAY,GAAGqB,CAAC,CAAC;EACrB;EAEA,SAASE,KAAKA,CAACF,CAA8C,EAAE;IAC3D,IAAItB,YAAY,EAAEc,SAAS,CAACP,OAAO,EAAEkB,IAAI,CAAC,CAAC;IAC3CvB,YAAY,GAAGoB,CAAC,CAAC;EACrB;EAEA5C,SAAS,CAAC,MAAM;IACZ,IAAI,CAACsB,YAAY,IAAIc,SAAS,CAACP,OAAO,EAAEmB,SAAS,KAAK,QAAQ,EAAEZ,SAAS,CAACP,OAAO,EAAEkB,IAAI,CAAC,CAAC;EAC7F,CAAC,EAAE,CAACX,SAAS,CAACP,OAAO,EAAEP,YAAY,CAAC,CAAC;EAErC,oBACIf,IAAA;IACIK,GAAG,EAAEc,OAAQ;IACbb,SAAS,EAAET,IAAI,CACXD,GAAI;AACpB;AACA,sBAAsBW,SAAS,KAAK,UAAU,GAAG,qBAAqB,GAAG,qBAAsB;AAC/F,iBAAiB,EACDD,SACJ,CAAE;IACFU,YAAY,EAAEoB,KAAM;IACpBnB,YAAY,EAAEsB,KAAM;IAAA,GAChBrB,IAAI;IAAAV,QAAA,eAERN,KAAA;MACIG,GAAG,EAAEgB,GAAI;MACTqB,KAAK,EAAE;QACHC,QAAQ,EAAE,UAAU;QACpBf,KAAK,EAAErB,SAAS,KAAK,UAAU,GAAG,MAAM,GAAGiB,aAAa,KAAKE,QAAQ,GAAGF,aAAa,CAACI,KAAK,GAAG,CAAC,GAAGjB,GAAG,GAAGa,aAAa,CAACI,KAAK,CAAC;QAC5HD,MAAM,EAAEpB,SAAS,KAAK,YAAY,GAAG,MAAM,GAAGiB,aAAa,KAAKE,QAAQ,GAAGF,aAAa,CAACG,MAAM,GAAG,CAAC,GAAGhB,GAAG,GAAGa,aAAa,CAACI,KAAK;MACnI,CAAE;MAAApB,QAAA,gBAEFR,IAAA;QACIK,GAAG,EAAEkB,SAAU;QACfjB,SAAS,EAAET,IAAI,CACXD,GAAI;AAC5B;AACA;AACA;AACA,8BAA8BW,SAAS,KAAK,UAAU,GAAG,cAAc,GAAG,eAAgB;AAC1F,yBAAyB,EACDE,kBACJ,CAAE;QACFiC,KAAK,EAAEhC,cAAe;QAAAF,QAAA,EAErBA;MAAQ,CACR,CAAC,EACLkB,QAAQ,iBACL1B,IAAA;QACIK,GAAG,EAAEkB,SAAU;QACfjB,SAAS,EAAET,IAAI,CACXD,GAAI;AAChC;AACA;AACA;AACA,kCAAkCW,SAAS,KAAK,UAAU,GAAG,cAAc,GAAG,eAAgB;AAC9F,6BAA6B,EACDE,kBACJ,CAAE;QACFiC,KAAK,EAAEhC,cAAe;QAAAF,QAAA,EAErBA;MAAQ,CACR,CACR;IAAA,CACA;EAAC,CACL,CAAC;AAEd,CAAC,CAAC"}

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

@@ -1,26 +0,0 @@
-import { ComponentProps, ReactNode } from "react";
-export interface InputFileDataTypeMap {
-    base64: string;
-    text: string;
-    arrayBuffer: ArrayBuffer;
-    binary: string;
-    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 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 declare function InputFile<Multiple extends boolean = false, Type extends InputFileDataType = "file">(props: InputFileProps<Multiple, Type>): ReactNode;

package/dist/esm/components/InputFile.js

@@ -1,78 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-export async function getFileData(file, type) {
-  const fileReader = new FileReader();
-  switch (type) {
-    case "arrayBuffer":
-      fileReader.readAsArrayBuffer(file);
-      break;
-    case "binary":
-      fileReader.readAsBinaryString(file);
-      break;
-    case "base64":
-      fileReader.readAsDataURL(file);
-      break;
-    case "text":
-      fileReader.readAsText(file);
-      break;
-    default:
-      return file;
-  }
-  return new Promise(resolve => {
-    fileReader.addEventListener("load", () => {
-      resolve(fileReader.result);
-    });
-  });
-}
-/** 专用于读取文件的组件 */
-export function InputFile(props) {
-  const {
-    multiple = false,
-    type = "file",
-    onChange: _onChange,
-    disabled: _disabled,
-    clearAfterChange,
-    onValueChange,
-    onFileChange,
-    ...rest
-  } = props;
-  const [disabled, setDisabled] = useState(false);
-  async function onChange(e) {
-    _onChange?.(e);
-    const input = e.target;
-    const {
-      files
-    } = input;
-    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 {
-      if (clearAfterChange) input.value = "";
-      setDisabled(false);
-    }
-  }
-  return /*#__PURE__*/_jsx("input", {
-    disabled: disabled || _disabled,
-    type: "file",
-    multiple: multiple,
-    onChange: onChange,
-    ...rest
-  });
-}
-//# sourceMappingURL=InputFile.js.map