deepsea-components 2.8.5 → 3.0.1

package/dist/esm/components/Flow.js

@@ -0,0 +1,130 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function getGapRange(gap) {
+  if (typeof gap === "number") return [gap, gap];
+  if (Array.isArray(gap)) return [gap[0] || 0, gap[1]];
+  return [0, null];
+}
+export function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
+  const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1;
+  if (count === 1) return [count, 0];
+  const averageGap = (width - itemWidth * count) / (count - 1);
+  if (averageGap < minGap) return [count, minGap];
+  if (maxGap !== null && averageGap > maxGap) return [count, maxGap];
+  return [count, averageGap];
+}
+/** 自适应浮动组件 */
+export function Flow(props) {
+  const {
+    itemWidth,
+    itemHeight,
+    columnGap,
+    rowGap = 0,
+    maxRows,
+    data,
+    render,
+    keyExactor,
+    className,
+    style,
+    containerClassName,
+    containerStyle,
+    throttle,
+    transitionDuration,
+    onSizeChange,
+    ...rest
+  } = props;
+  const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
+  const [width, setWidth] = useState(0);
+  const [columnCount, setColumnCount] = useState(1);
+  const [columnGapSize, setColumnGapSize] = useState(minColumnGap);
+  const [showItems, setShowItems] = useState(false);
+  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;
+  }
+  useEffect(() => {
+    let timeout;
+    const observer = new ResizeObserver(entries => {
+      clearTimeout(timeout);
+      function task() {
+        const {
+          width
+        } = entries[0].contentRect;
+        const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap);
+        setShowItems(true);
+        setWidth(width);
+        setColumnCount(newColumnCount);
+        setColumnGapSize(newColumnGapSize);
+      }
+      if (throttle === null) {
+        task();
+      } else {
+        timeout = window.setTimeout(task, throttle || 200);
+      }
+    });
+    observer.observe(ele.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [itemWidth, throttle, columnGap]);
+  useEffect(() => {
+    onSizeChange?.({
+      width,
+      height,
+      itemWidth,
+      itemHeight,
+      columnGap: columnGapSize,
+      columnCount,
+      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: className,
+    style: {
+      position: "relative",
+      boxSizing: "border-box",
+      height,
+      ...style
+    },
+    ...rest,
+    children: showItems && data.map((item, index) => /*#__PURE__*/_jsx("div", {
+      className: containerClassName,
+      style: {
+        position: "absolute",
+        width: itemWidth,
+        height: itemHeight,
+        transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : undefined,
+        ...getPosition(index)
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          width: itemWidth,
+          height: itemHeight,
+          display: maxRows && index >= maxRows * columnCount ? "none" : "block",
+          ...containerStyle
+        },
+        children: render(item, index, getHidden(index))
+      })
+    }, keyExactor ? keyExactor(item, index) : index))
+  });
+}
+//# sourceMappingURL=Flow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useState","jsx","_jsx","getGapRange","gap","Array","isArray","getGapCountAndSize","width","itemWidth","minGap","maxGap","count","Math","floor","averageGap","Flow","props","itemHeight","columnGap","rowGap","maxRows","data","render","keyExactor","className","style","containerClassName","containerStyle","throttle","transitionDuration","onSizeChange","rest","minColumnGap","maxColumnGap","setWidth","columnCount","setColumnCount","columnGapSize","setColumnGapSize","showItems","setShowItems","ele","contentRows","ceil","length","contentShownRows","min","height","getPosition","index","y","x","left","top","getHidden","timeout","observer","ResizeObserver","entries","clearTimeout","task","contentRect","newColumnCount","newColumnGapSize","window","setTimeout","observe","current","disconnect","rowCount","overflow","itemCount","ref","position","boxSizing","children","map","item","transition","undefined","display"],"sources":["../../../src/components/Flow.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { CSSProperties, HTMLAttributes, ReactNode, useEffect, useRef, useState } from \"react\"\r\n\r\nexport interface FlowSizeData {\r\n    /** 容器宽度 */\r\n    width: number\r\n    /** 容器高度 */\r\n    height: number\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap: number\r\n    /** 列数 */\r\n    columnCount: number\r\n    /** 行间距 */\r\n    rowGap: number\r\n    /** 行数 */\r\n    rowCount: number\r\n    /** 元素格数 */\r\n    itemCount: number\r\n    /** 最大行数 */\r\n    maxRows: number | null\r\n    /** 是否有元素被隐藏 */\r\n    overflow: boolean\r\n}\r\n\r\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap?: number | null | (number | null)[]\r\n    /** 行间距 */\r\n    rowGap?: number\r\n    /** 最大行数 */\r\n    maxRows?: number | null\r\n    /** 源数据 */\r\n    data: T[]\r\n    /** 渲染 */\r\n    render: (item: T, index: number, hidden: boolean) => ReactNode\r\n    /** key释放器，默认为 index */\r\n    keyExactor?: (item: T, index: number) => string | number\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n    /** 节流时间，单位毫秒，默认200ms，传入 null 不节流 */\r\n    throttle?: number | null\r\n    /** 动画时间，单位毫秒，默认400ms，传入 null 不展示动画 */\r\n    transitionDuration?: number | null\r\n    /** 变化的回调函数 */\r\n    onSizeChange?: (sizeData: FlowSizeData) => void\r\n}\r\n\r\nexport function getGapRange(gap?: undefined | number | null | (number | null)[]): [number, number | null] {\r\n    if (typeof gap === \"number\") return [gap, gap]\r\n    if (Array.isArray(gap)) return [gap[0] || 0, gap[1]]\r\n    return [0, null]\r\n}\r\n\r\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | null): [number, number] {\r\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\r\n    if (count === 1) return [count, 0]\r\n    const averageGap = (width - itemWidth * count) / (count - 1)\r\n    if (averageGap < minGap) return [count, minGap]\r\n    if (maxGap !== null && averageGap > maxGap) return [count, maxGap]\r\n    return [count, averageGap]\r\n}\r\n\r\ninterface Position {\r\n    left: number\r\n    top: number\r\n}\r\n\r\n/** 自适应浮动组件 */\r\nexport function Flow<T>(props: FlowProps<T>) {\r\n    const { itemWidth, itemHeight, columnGap, rowGap = 0, maxRows, data, render, keyExactor, className, style, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, ...rest } = props\r\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\r\n    const [width, setWidth] = useState(0)\r\n    const [columnCount, setColumnCount] = useState(1)\r\n    const [columnGapSize, setColumnGapSize] = useState(minColumnGap)\r\n    const [showItems, setShowItems] = useState(false)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const contentRows = Math.ceil(data.length / columnCount)\r\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\r\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\r\n\r\n    function getPosition(index: number): Position {\r\n        const y = Math.floor(index / columnCount)\r\n        const x = index - y * columnCount\r\n        return {\r\n            left: x * (itemWidth + columnGapSize),\r\n            top: y * (itemHeight + rowGap)\r\n        }\r\n    }\r\n\r\n    function getHidden(index: number) {\r\n        if (typeof maxRows !== \"number\") return false\r\n        return index >= maxRows * columnCount\r\n    }\r\n\r\n    useEffect(() => {\r\n        let timeout: number\r\n        const observer = new ResizeObserver(entries => {\r\n            clearTimeout(timeout)\r\n            function task() {\r\n                const { width } = entries[0].contentRect\r\n                const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap)\r\n                setShowItems(true)\r\n                setWidth(width)\r\n                setColumnCount(newColumnCount)\r\n                setColumnGapSize(newColumnGapSize)\r\n            }\r\n            if (throttle === null) {\r\n                task()\r\n            } else {\r\n                timeout = window.setTimeout(task, throttle || 200)\r\n            }\r\n        })\r\n        observer.observe(ele.current!)\r\n\r\n        return () => {\r\n            observer.disconnect()\r\n        }\r\n    }, [itemWidth, throttle, columnGap])\r\n\r\n    useEffect(() => {\r\n        onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null })\r\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\r\n\r\n    return (\r\n        <div ref={ele} className={className} style={{ position: \"relative\", boxSizing: \"border-box\", height, ...style }} {...rest}>\r\n            {showItems &&\r\n                data.map((item, index) => (\r\n                    <div\r\n                        key={keyExactor ? keyExactor(item, index) : index}\r\n                        className={containerClassName}\r\n                        style={{\r\n                            position: \"absolute\",\r\n                            width: itemWidth,\r\n                            height: itemHeight,\r\n                            transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : undefined,\r\n                            ...getPosition(index)\r\n                        }}>\r\n                        <div style={{ width: itemWidth, height: itemHeight, display: maxRows && index >= maxRows * columnCount ? \"none\" : \"block\", ...containerStyle }}>{render(item, index, getHidden(index))}</div>\r\n                    </div>\r\n                ))}\r\n        </div>\r\n    )\r\n}\r\n"],"mappings":"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"}

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

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

package/dist/esm/components/HlsPlayer.js

@@ -0,0 +1,39 @@
+"use client";
+
+import Hls from "hls.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+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;
+      player.play();
+      return;
+    }
+    if (Hls.isSupported()) {
+      const hls = new Hls();
+      hls.loadSource(src);
+      hls.attachMedia(player);
+      player.play();
+      return () => {
+        hls.destroy();
+      };
+    }
+  }, [src]);
+  return /*#__PURE__*/_jsx("video", {
+    ref: video,
+    ...rest
+  });
+});
+export default HlsPlayer;
+//# sourceMappingURL=HlsPlayer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Hls","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","HlsPlayer","props","ref","src","rest","video","current","player","canPlayType","play","isSupported","hls","loadSource","attachMedia","destroy"],"sources":["../../../src/components/HlsPlayer.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nconst HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            player.play()\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            player.play()\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n\r\nexport default HlsPlayer\r\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,GAAG,MAAM,QAAQ;AACxB,SAA8BC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAM/F,MAAMC,SAAS,gBAAGN,UAAU,CAAmC,CAACO,KAAK,EAAEC,GAAG,KAAK;EAC3E,MAAM;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC9B,MAAMI,KAAK,GAAGR,MAAM,CAAmB,IAAI,CAAC;EAE5CD,mBAAmB,CAACM,GAAG,EAAE,MAAMG,KAAK,CAACC,OAAQ,EAAE,EAAE,CAAC;EAElDX,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEW,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;MAChBI,MAAM,CAACE,IAAI,CAAC,CAAC;MACb;IACJ;IACA,IAAIhB,GAAG,CAACiB,WAAW,CAAC,CAAC,EAAE;MACnB,MAAMC,GAAG,GAAG,IAAIlB,GAAG,CAAC,CAAC;MACrBkB,GAAG,CAACC,UAAU,CAACT,GAAG,CAAC;MACnBQ,GAAG,CAACE,WAAW,CAACN,MAAM,CAAC;MACvBA,MAAM,CAACE,IAAI,CAAC,CAAC;MACb,OAAO,MAAM;QACTE,GAAG,CAACG,OAAO,CAAC,CAAC;MACjB,CAAC;IACL;EACJ,CAAC,EAAE,CAACX,GAAG,CAAC,CAAC;EAET,oBAAOJ,IAAA;IAAOG,GAAG,EAAEG,KAAM;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC1C,CAAC,CAAC;AAEF,eAAeJ,SAAS"}

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

@@ -0,0 +1,64 @@
+import { ButtonHTMLAttributes, InputHTMLAttributes } from "react";
+export interface InputFileDataTypes {
+    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 InputFileProps = ({
+    multiple?: false;
+    type: "base64" | "text" | "binary";
+    onChange?: (data: InputFileData<string>) => void;
+} | {
+    multiple?: false;
+    type: "arrayBuffer";
+    onChange?: (data: InputFileData<ArrayBuffer>) => void;
+} | {
+    multiple?: false;
+    type?: "file";
+    onChange?: (data: InputFileData<File>) => void;
+} | {
+    multiple: true;
+    type: "base64" | "text" | "binary";
+    onChange?: (data: InputFileData<string>[]) => void;
+} | {
+    multiple: true;
+    type: "arrayBuffer";
+    onChange?: (data: InputFileData<ArrayBuffer>[]) => void;
+} | {
+    multiple: true;
+    type?: "file";
+    onChange?: (data: InputFileData<File>[]) => void;
+}) & Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "multiple" | "type"> & {
+    /** 是否在捕获文件后清除 input 上的文件，默认为 false，主要区别在于如果不清除，连续两次选择同样的文件不会触发 onChange 事件，如果用于 form 表单，请设置为 flase */
+    clearAfterChange?: boolean;
+};
+export declare function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]>;
+/** 专用于读取文件的组件 */
+export declare const InputFile: import("react").ForwardRefExoticComponent<InputFileProps & import("react").RefAttributes<HTMLInputElement>>;
+export type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    input: InputFileProps;
+};
+/** 专用于读取文件的 button 组件 */
+export declare const InputFileButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    input: InputFileProps;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "onChange" | "accept" | "type"> {
+    onChange?: (data: Record<string, string>[]) => void;
+}
+/** 专门用于读取 excel 的组件 */
+export declare const ImportExcel: import("react").ForwardRefExoticComponent<ImportExcelProps & import("react").RefAttributes<HTMLInputElement>>;
+/** 手动导出 excel */
+export declare function exportExcel(data: Record<string, string>[], name: string): void;
+export interface ExportExcelProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    data: Record<string, string>[];
+    fileName: string;
+}
+/** 导出 excel 的 button 组件 */
+export declare const ExportExcel: import("react").ForwardRefExoticComponent<ExportExcelProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/InputFile.js

@@ -0,0 +1,167 @@
+"use client";
+
+import { Fragment, forwardRef, useRef, useState } from "react";
+import { read, utils, writeFile } from "xlsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export async function getFileData(file, type) {
+  const fileReader = new FileReader();
+  switch (type) {
+    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 const InputFile = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    multiple = false,
+    type = "file",
+    onChange,
+    disabled: inputDisabled,
+    clearAfterChange,
+    ...rest
+  } = props;
+  const [disabled, setDisabled] = useState(false);
+  async function onInputChange(e) {
+    const input = e.target;
+    const {
+      files
+    } = input;
+    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]
+        });
+      }
+      setDisabled(false);
+      if (clearAfterChange) input.value = "";
+    } catch (error) {
+      setDisabled(false);
+      if (clearAfterChange) input.value = "";
+      throw error;
+    }
+  }
+  return /*#__PURE__*/_jsx("input", {
+    ref: ref,
+    disabled: disabled || inputDisabled,
+    type: "file",
+    multiple: multiple,
+    onChange: onInputChange,
+    ...rest
+  });
+});
+/** 专用于读取文件的 button 组件 */
+export const InputFileButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    onClick,
+    input: inputProps,
+    ...rest
+  } = props;
+  const {
+    style,
+    ...restInputProps
+  } = inputProps;
+  const input = useRef(null);
+  function onBtnClick(e) {
+    input.current?.click();
+    onClick?.(e);
+  }
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(InputFile, {
+      ref: input,
+      style: {
+        display: "none",
+        ...style
+      },
+      ...restInputProps
+    }), /*#__PURE__*/_jsx("button", {
+      ref: ref,
+      type: "button",
+      onClick: onBtnClick,
+      ...rest
+    })]
+  });
+});
+/** 专门用于读取 excel 的组件 */
+export const ImportExcel = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    onChange,
+    ...rest
+  } = props;
+  function onInputChange(data) {
+    const wb = read(data.result);
+    const result = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
+    if (typeof result === "object") {
+      const $ = result.map(it => {
+        const _ = {};
+        Object.keys(it).filter(key => key !== "__rowNum__").forEach(key => _[key] = String(it[key]));
+        return _;
+      });
+      onChange?.($);
+    }
+  }
+  return /*#__PURE__*/_jsx(InputFile, {
+    ref: ref,
+    accept: ".xlsx",
+    type: "arrayBuffer",
+    onChange: onInputChange,
+    ...rest
+  });
+});
+
+/** 手动导出 excel */
+export function exportExcel(data, name) {
+  const workSheet = utils.json_to_sheet(data);
+  const workBook = utils.book_new();
+  utils.book_append_sheet(workBook, workSheet);
+  writeFile(workBook, `${name}${name.endsWith(".xlsx") ? "" : ".xlsx"}`);
+}
+/** 导出 excel 的 button 组件 */
+export const ExportExcel = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    data,
+    fileName,
+    onClick,
+    ...rest
+  } = props;
+  function onButtonClick(e) {
+    exportExcel(data, fileName);
+    onClick?.(e);
+  }
+  return /*#__PURE__*/_jsx("button", {
+    ref: ref,
+    onClick: onButtonClick,
+    ...rest
+  });
+});
+//# sourceMappingURL=InputFile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Fragment","forwardRef","useRef","useState","read","utils","writeFile","jsx","_jsx","jsxs","_jsxs","getFileData","file","type","fileReader","FileReader","readAsArrayBuffer","readAsBinaryString","readAsDataURL","readAsText","Promise","resolve","addEventListener","result","InputFile","props","ref","multiple","onChange","disabled","inputDisabled","clearAfterChange","rest","setDisabled","onInputChange","e","input","target","files","length","Array","from","push","value","error","InputFileButton","onClick","inputProps","style","restInputProps","onBtnClick","current","click","children","display","ImportExcel","data","wb","sheet_to_json","Sheets","SheetNames","$","map","it","_","Object","keys","filter","key","forEach","String","accept","exportExcel","name","workSheet","json_to_sheet","workBook","book_new","book_append_sheet","endsWith","ExportExcel","fileName","onButtonClick"],"sources":["../../../src/components/InputFile.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { ButtonHTMLAttributes, ChangeEvent, Fragment, InputHTMLAttributes, MouseEvent as ReactMouseEvent, forwardRef, useRef, useState } from \"react\"\r\nimport { read, utils, writeFile } from \"xlsx\"\r\n\r\nexport interface InputFileDataTypes {\r\n    base64: string\r\n    text: string\r\n    arrayBuffer: ArrayBuffer\r\n    binary: string\r\n    file: File\r\n}\r\n\r\nexport type InputFileDataType = keyof InputFileDataTypes\r\n\r\nexport interface InputFileData<T> {\r\n    result: T\r\n    file: File\r\n}\r\n\r\nexport type InputFileProps = (\r\n    | {\r\n          multiple?: false\r\n          type: \"base64\" | \"text\" | \"binary\"\r\n          onChange?: (data: InputFileData<string>) => void\r\n      }\r\n    | {\r\n          multiple?: false\r\n          type: \"arrayBuffer\"\r\n          onChange?: (data: InputFileData<ArrayBuffer>) => void\r\n      }\r\n    | {\r\n          multiple?: false\r\n          type?: \"file\"\r\n          onChange?: (data: InputFileData<File>) => void\r\n      }\r\n    | {\r\n          multiple: true\r\n          type: \"base64\" | \"text\" | \"binary\"\r\n          onChange?: (data: InputFileData<string>[]) => void\r\n      }\r\n    | {\r\n          multiple: true\r\n          type: \"arrayBuffer\"\r\n          onChange?: (data: InputFileData<ArrayBuffer>[]) => void\r\n      }\r\n    | {\r\n          multiple: true\r\n          type?: \"file\"\r\n          onChange?: (data: InputFileData<File>[]) => void\r\n      }\r\n) &\r\n    Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"multiple\" | \"type\"> & {\r\n        /** 是否在捕获文件后清除 input 上的文件，默认为 false，主要区别在于如果不清除，连续两次选择同样的文件不会触发 onChange 事件，如果用于 form 表单，请设置为 flase */\r\n        clearAfterChange?: boolean\r\n    }\r\n\r\nexport async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]> {\r\n    const fileReader = new FileReader()\r\n    switch (type) {\r\n        case \"arrayBuffer\":\r\n            fileReader.readAsArrayBuffer(file)\r\n            break\r\n        case \"binary\":\r\n            fileReader.readAsBinaryString(file)\r\n            break\r\n        case \"base64\":\r\n            fileReader.readAsDataURL(file)\r\n            break\r\n        case \"text\":\r\n            fileReader.readAsText(file)\r\n            break\r\n        default:\r\n            return file as any\r\n    }\r\n    return new Promise(resolve => {\r\n        fileReader.addEventListener(\"load\", () => {\r\n            resolve(fileReader.result as any)\r\n        })\r\n    })\r\n}\r\n\r\n/** 专用于读取文件的组件 */\r\nexport const InputFile = forwardRef<HTMLInputElement, InputFileProps>((props, ref) => {\r\n    const { multiple = false, type = \"file\", onChange, disabled: inputDisabled, clearAfterChange, ...rest } = props\r\n    const [disabled, setDisabled] = useState(false)\r\n\r\n    async function onInputChange(e: ChangeEvent<HTMLInputElement>) {\r\n        const input = e.target\r\n        const { files } = input\r\n        if (!files || files.length === 0) return\r\n        setDisabled(true)\r\n        try {\r\n            if (multiple) {\r\n                const result: any[] = []\r\n                for (const file of Array.from(files)) {\r\n                    result.push({\r\n                        result: await getFileData(file, type),\r\n                        file\r\n                    })\r\n                }\r\n                onChange?.(result as any)\r\n            } else {\r\n                onChange?.({\r\n                    result: await getFileData(files[0], type),\r\n                    file: files[0]\r\n                } as any)\r\n            }\r\n            setDisabled(false)\r\n            if (clearAfterChange) input.value = \"\"\r\n        } catch (error) {\r\n            setDisabled(false)\r\n            if (clearAfterChange) input.value = \"\"\r\n            throw error\r\n        }\r\n    }\r\n\r\n    return <input ref={ref} disabled={disabled || inputDisabled} type=\"file\" multiple={multiple} onChange={onInputChange} {...rest} />\r\n})\r\n\r\nexport type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\r\n    input: InputFileProps\r\n}\r\n\r\n/** 专用于读取文件的 button 组件 */\r\nexport const InputFileButton = forwardRef<HTMLButtonElement, InputFileButtonProps>((props, ref) => {\r\n    const { onClick, input: inputProps, ...rest } = props\r\n    const { style, ...restInputProps } = inputProps\r\n    const input = useRef<HTMLInputElement>(null)\r\n\r\n    function onBtnClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\r\n        input.current?.click()\r\n        onClick?.(e)\r\n    }\r\n\r\n    return (\r\n        <Fragment>\r\n            <InputFile ref={input} style={{ display: \"none\", ...style }} {...restInputProps} />\r\n            <button ref={ref} type=\"button\" onClick={onBtnClick} {...rest} />\r\n        </Fragment>\r\n    )\r\n})\r\n\r\nexport interface ImportExcelProps extends Omit<InputFileProps, \"multiple\" | \"onChange\" | \"accept\" | \"type\"> {\r\n    onChange?: (data: Record<string, string>[]) => void\r\n}\r\n\r\n/** 专门用于读取 excel 的组件 */\r\nexport const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {\r\n    const { onChange, ...rest } = props\r\n\r\n    function onInputChange(data: InputFileData<ArrayBuffer>) {\r\n        const wb = read(data.result)\r\n        const result = utils.sheet_to_json<any>(wb.Sheets[wb.SheetNames[0]])\r\n        if (typeof result === \"object\") {\r\n            const $ = result.map(it => {\r\n                const _: Record<string, string> = {}\r\n                Object.keys(it)\r\n                    .filter(key => key !== \"__rowNum__\")\r\n                    .forEach(key => (_[key] = String(it[key])))\r\n                return _\r\n            })\r\n            onChange?.($)\r\n        }\r\n    }\r\n\r\n    return <InputFile ref={ref} accept=\".xlsx\" type=\"arrayBuffer\" onChange={onInputChange} {...rest} />\r\n})\r\n\r\n/** 手动导出 excel */\r\nexport function exportExcel(data: Record<string, string>[], name: string) {\r\n    const workSheet = utils.json_to_sheet(data)\r\n    const workBook = utils.book_new()\r\n    utils.book_append_sheet(workBook, workSheet)\r\n    writeFile(workBook, `${name}${name.endsWith(\".xlsx\") ? \"\" : \".xlsx\"}`)\r\n}\r\n\r\nexport interface ExportExcelProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n    data: Record<string, string>[]\r\n    fileName: string\r\n}\r\n\r\n/** 导出 excel 的 button 组件 */\r\nexport const ExportExcel = forwardRef<HTMLButtonElement, ExportExcelProps>((props, ref) => {\r\n    const { data, fileName, onClick, ...rest } = props\r\n\r\n    function onButtonClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\r\n        exportExcel(data, fileName)\r\n        onClick?.(e)\r\n    }\r\n\r\n    return <button ref={ref} onClick={onButtonClick} {...rest} />\r\n})\r\n"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import { CSSProperties, HTMLAttributes } from "react";
+export interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: "horizontal" | "vertical";
+    reverse?: boolean;
+    period: number;
+    gap?: CSSProperties["gap"];
+}
+/** 循环播放组件 */
+export declare const LoopSwiper: import("react").ForwardRefExoticComponent<LoopSwiperProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/LoopSwiper.js

@@ -0,0 +1,122 @@
+"use client";
+
+import { css } from "@emotion/css";
+import { clsx } from "deepsea-tools";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/** 循环播放组件 */
+export const LoopSwiper = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    style,
+    children,
+    direction,
+    period,
+    reverse,
+    gap,
+    ...rest
+  } = props;
+  const wrapper = useRef(null);
+  const container = useRef(null);
+  const [swiper, setSwiper] = useState(false);
+  const directionRef = useRef(direction);
+  directionRef.current = direction;
+  const flexDirection = direction === "vertical" ? reverse ? "column-reverse" : "column" : reverse ? "row-reverse" : "row";
+  const animationName = swiper ? direction === "vertical" ? reverse ? "deepsea-reverse-vertical-loop-swipe" : "deepsea-vertical-loop-swipe" : reverse ? "deepsea-reverse-horizontal-loop-swipe" : "deepsea-horizontal-loop-swipe" : "none";
+  const animationDuration = `${period}ms`;
+  const animationTimingFunction = "linear";
+  const animationIterationCount = "infinite";
+  useImperativeHandle(ref, () => wrapper.current, []);
+  useEffect(() => {
+    const wrapperEle = wrapper.current;
+    const containerEle = container.current;
+    let wrapperWidth = 0;
+    let wrapperHeight = 0;
+    let containerWidth = 0;
+    let containerHeight = 0;
+    const observer = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.target === wrapperEle) {
+          wrapperWidth = entry.contentRect.width;
+          wrapperHeight = entry.contentRect.height;
+        } else if (entry.target === containerEle) {
+          containerWidth = entry.contentRect.width;
+          containerHeight = entry.contentRect.height;
+        }
+      });
+      setSwiper(directionRef.current === "vertical" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth);
+    });
+    observer.observe(wrapperEle);
+    observer.observe(containerEle);
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: wrapper,
+    className: clsx(css`
+                    @keyframes deepsea-horizontal-loop-swipe {
+                        from {
+                            transform: translateX(0);
+                        }
+                        to {
+                            transform: translateX(-100%);
+                        }
+                    }
+                    @keyframes deepsea-reverse-horizontal-loop-swipe {
+                        from {
+                            transform: translateX(0);
+                        }
+                        to {
+                            transform: translateX(100%);
+                        }
+                    }
+                    @keyframes deepsea-vertical-loop-swipe {
+                        from {
+                            transform: translateY(0);
+                        }
+                        to {
+                            transform: translateY(-100%);
+                        }
+                    }
+                    @keyframes deepsea-reverse-vertical-loop-swipe {
+                        from {
+                            transform: translateY(0);
+                        }
+                        to {
+                            transform: translateY(100%);
+                        }
+                    }
+                `, className),
+    style: {
+      display: "flex",
+      flexDirection,
+      gap,
+      ...style
+    },
+    ...rest,
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: container,
+      style: {
+        display: "flex",
+        flexDirection,
+        gap,
+        animationName,
+        animationTimingFunction,
+        animationDuration,
+        animationIterationCount
+      },
+      children: children
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        display: swiper ? "flex" : "none",
+        flexDirection,
+        gap,
+        animationName,
+        animationTimingFunction,
+        animationDuration,
+        animationIterationCount
+      },
+      children: children
+    })]
+  });
+});
+//# sourceMappingURL=LoopSwiper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["css","clsx","forwardRef","useEffect","useImperativeHandle","useRef","useState","jsx","_jsx","jsxs","_jsxs","LoopSwiper","props","ref","className","style","children","direction","period","reverse","gap","rest","wrapper","container","swiper","setSwiper","directionRef","current","flexDirection","animationName","animationDuration","animationTimingFunction","animationIterationCount","wrapperEle","containerEle","wrapperWidth","wrapperHeight","containerWidth","containerHeight","observer","ResizeObserver","entries","forEach","entry","target","contentRect","width","height","observe","display"],"sources":["../../../src/components/LoopSwiper.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef, useState } from \"react\"\r\n\r\nexport interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {\r\n    direction?: \"horizontal\" | \"vertical\"\r\n    reverse?: boolean\r\n    period: number\r\n    gap?: CSSProperties[\"gap\"]\r\n}\r\n\r\n/** 循环播放组件 */\r\nexport const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, ref) => {\r\n    const { className, style, children, direction, period, reverse, gap, ...rest } = props\r\n    const wrapper = useRef<HTMLDivElement>(null)\r\n    const container = useRef<HTMLDivElement>(null)\r\n    const [swiper, setSwiper] = useState(false)\r\n    const directionRef = useRef(direction)\r\n    directionRef.current = direction\r\n    const flexDirection: CSSProperties[\"flexDirection\"] = direction === \"vertical\" ? (reverse ? \"column-reverse\" : \"column\") : reverse ? \"row-reverse\" : \"row\"\r\n    const animationName = swiper ? (direction === \"vertical\" ? (reverse ? \"deepsea-reverse-vertical-loop-swipe\" : \"deepsea-vertical-loop-swipe\") : reverse ? \"deepsea-reverse-horizontal-loop-swipe\" : \"deepsea-horizontal-loop-swipe\") : \"none\"\r\n    const animationDuration = `${period}ms`\r\n    const animationTimingFunction = \"linear\"\r\n    const animationIterationCount = \"infinite\"\r\n\r\n    useImperativeHandle(ref, () => wrapper.current!, [])\r\n\r\n    useEffect(() => {\r\n        const wrapperEle = wrapper.current!\r\n        const containerEle = container.current!\r\n        let wrapperWidth = 0\r\n        let wrapperHeight = 0\r\n        let containerWidth = 0\r\n        let containerHeight = 0\r\n        const observer = new ResizeObserver(entries => {\r\n            entries.forEach(entry => {\r\n                if (entry.target === wrapperEle) {\r\n                    wrapperWidth = entry.contentRect.width\r\n                    wrapperHeight = entry.contentRect.height\r\n                } else if (entry.target === containerEle) {\r\n                    containerWidth = entry.contentRect.width\r\n                    containerHeight = entry.contentRect.height\r\n                }\r\n            })\r\n            setSwiper(directionRef.current === \"vertical\" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth)\r\n        })\r\n        observer.observe(wrapperEle)\r\n        observer.observe(containerEle)\r\n    }, [])\r\n\r\n    return (\r\n        <div\r\n            ref={wrapper}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes deepsea-horizontal-loop-swipe {\r\n                        from {\r\n                            transform: translateX(0);\r\n                        }\r\n                        to {\r\n                            transform: translateX(-100%);\r\n                        }\r\n                    }\r\n                    @keyframes deepsea-reverse-horizontal-loop-swipe {\r\n                        from {\r\n                            transform: translateX(0);\r\n                        }\r\n                        to {\r\n                            transform: translateX(100%);\r\n                        }\r\n                    }\r\n                    @keyframes deepsea-vertical-loop-swipe {\r\n                        from {\r\n                            transform: translateY(0);\r\n                        }\r\n                        to {\r\n                            transform: translateY(-100%);\r\n                        }\r\n                    }\r\n                    @keyframes deepsea-reverse-vertical-loop-swipe {\r\n                        from {\r\n                            transform: translateY(0);\r\n                        }\r\n                        to {\r\n                            transform: translateY(100%);\r\n                        }\r\n                    }\r\n                `,\r\n                className\r\n            )}\r\n            style={{ display: \"flex\", flexDirection, gap, ...style }}\r\n            {...rest}>\r\n            <div ref={container} style={{ display: \"flex\", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}>\r\n                {children}\r\n            </div>\r\n            <div style={{ display: swiper ? \"flex\" : \"none\", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}>{children}</div>\r\n        </div>\r\n    )\r\n})\r\n"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+export interface RingProps extends HTMLAttributes<HTMLDivElement> {
+    outerWidth: number;
+    innerWidth: number;
+}
+/** 环形组件 */
+export declare const Ring: import("react").ForwardRefExoticComponent<RingProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/Ring.js

@@ -0,0 +1,26 @@
+"use client";
+
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** 环形组件 */
+export const Ring = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    outerWidth,
+    innerWidth,
+    style,
+    ...rest
+  } = props;
+  const outerRadius = outerWidth / 2;
+  const innerRadius = innerWidth / 2;
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    style: {
+      ...style,
+      width: `${outerWidth}px`,
+      height: `${outerWidth}px`,
+      clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z")`
+    },
+    ...rest
+  });
+});
+//# sourceMappingURL=Ring.js.map