deepsea-components 5.1.0 → 5.2.0

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

@@ -0,0 +1,15 @@
+import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from "echarts";
+import { ComponentProps, ForwardedRef, ForwardRefExoticComponent, RefAttributes } from "react";
+export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
+export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
+export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
+export interface EchartProps<T extends any = any> extends Omit<ComponentProps<"div">, "children"> {
+    width: number;
+    height: number;
+    option: T;
+    chart?: ForwardedRef<ECharts>;
+}
+export type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<Omit<EchartProps<T>, "ref"> & RefAttributes<HTMLDivElement>>;
+export declare const Pie: EchartComponent<PieOption>;
+export declare const Bar: EchartComponent<BarOption>;
+export declare const Line: EchartComponent<LineOption>;

package/dist/cjs/components/Echart.js

@@ -0,0 +1,55 @@
+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/Echart.tsx
+var Echart_exports = {};
+__export(Echart_exports, {
+  Bar: () => Bar,
+  Line: () => Line,
+  Pie: () => Pie
+});
+module.exports = __toCommonJS(Echart_exports);
+var import_echarts = require("echarts");
+var import_react = require("react");
+var Echart = (0, import_react.forwardRef)((props, ref) => {
+  const { width, height, option, chart, ...rest } = props;
+  const container = (0, import_react.useRef)(null);
+  const chartRef = (0, import_react.useRef)(null);
+  (0, import_react.useLayoutEffect)(() => {
+    const ele = container.current;
+    chartRef.current = (0, import_echarts.init)(ele, option, { width, height });
+    return () => chartRef.current?.dispose();
+  }, []);
+  (0, import_react.useImperativeHandle)(ref, () => container.current, []);
+  (0, import_react.useImperativeHandle)(chart, () => chartRef.current, []);
+  (0, import_react.useEffect)(() => {
+    chartRef.current?.setOption(option);
+    chartRef.current?.resize({ width, height });
+  });
+  return /* @__PURE__ */ React.createElement("div", { ref: container, ...rest });
+});
+var Pie = Echart;
+var Bar = Echart;
+var Line = Echart;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Bar,
+  Line,
+  Pie
+});
+//# sourceMappingURL=Echart.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Echart.tsx"],
+  "sourcesContent": ["import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, init, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from \"echarts\"\r\nimport { ComponentProps, ForwardedRef, forwardRef, ForwardRefExoticComponent, RefAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\n\r\nexport type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\r\n\r\nexport type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\r\n\r\nexport type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\r\n\r\nexport interface EchartProps<T extends any = any> extends Omit<ComponentProps<\"div\">, \"children\"> {\r\n    width: number\r\n    height: number\r\n    option: T\r\n    chart?: ForwardedRef<ECharts>\r\n}\r\n\r\nexport type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<Omit<EchartProps<T>, \"ref\"> & RefAttributes<HTMLDivElement>>\r\n\r\nconst Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {\r\n    const { width, height, option, chart, ...rest } = props\r\n    const container = useRef<HTMLDivElement>(null)\r\n    const chartRef = useRef<ECharts | null>(null)\r\n\r\n    useLayoutEffect(() => {\r\n        const ele = container.current!\r\n        chartRef.current = init(ele, option, { width, height })\r\n        return () => chartRef.current?.dispose()\r\n    }, [])\r\n\r\n    useImperativeHandle(ref, () => container.current!, [])\r\n\r\n    useImperativeHandle(chart, () => chartRef.current!, [])\r\n\r\n    useEffect(() => {\r\n        chartRef.current?.setOption(option)\r\n        chartRef.current?.resize({ width, height })\r\n    })\r\n\r\n    return <div ref={container} {...rest} />\r\n})\r\n\r\nexport const Pie = Echart as EchartComponent<PieOption>\r\nexport const Bar = Echart as EchartComponent<BarOption>\r\nexport const Line = Echart as EchartComponent<LineOption>\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA4L;AAC5L,mBAA4J;AAiB5J,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AACnE,QAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO,GAAG,KAAK,IAAI;AAClD,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,eAAW,qBAAuB,IAAI;AAE5C,oCAAgB,MAAM;AAClB,UAAM,MAAM,UAAU;AACtB,aAAS,cAAU,qBAAK,KAAK,QAAQ,EAAE,OAAO,OAAO,CAAC;AACtD,WAAO,MAAM,SAAS,SAAS,QAAQ;AAAA,EAC3C,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,UAAU,SAAU,CAAC,CAAC;AAErD,wCAAoB,OAAO,MAAM,SAAS,SAAU,CAAC,CAAC;AAEtD,8BAAU,MAAM;AACZ,aAAS,SAAS,UAAU,MAAM;AAClC,aAAS,SAAS,OAAO,EAAE,OAAO,OAAO,CAAC;AAAA,EAC9C,CAAC;AAED,SAAO,oCAAC,SAAI,KAAK,WAAY,GAAG,MAAM;AAC1C,CAAC;AAEM,IAAM,MAAM;AACZ,IAAM,MAAM;AACZ,IAAM,OAAO;",
+  "names": []
+}

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

@@ -20,6 +20,8 @@ export type InfiniteScrollProps = ComponentProps<"div"> & {
     withGap?: boolean;
     /** 尺寸刚好相同时，是否视为溢出 */
     withEqual?: boolean;
+    /** 鼠标移入时，是否停止动画 */
+    pauseOnHover?: boolean;
 };
 /**
  * 无限滚动的组件

package/dist/cjs/components/InfiniteScroll.js

@@ -27,7 +27,7 @@ var import_ahooks = require("ahooks");
 var import_deepsea_tools = require("deepsea-tools");
 var import_react = require("react");
 var InfiniteScroll = (0, import_react.forwardRef)((props, ref) => {
-  const { className, direction = "vertical", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, ...rest } = props;
+  const { className, direction = "vertical", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props;
   const wrapper = (0, import_react.useRef)(null);
   const wrapperSize = (0, import_ahooks.useSize)(wrapper);
   const ele = (0, import_react.useRef)(null);
@@ -38,17 +38,32 @@ var InfiniteScroll = (0, import_react.forwardRef)((props, ref) => {
     return withEqual ? containerSize2 + (withGap ? gap : 0) >= wrapperSize2 : containerSize2 + (withGap ? gap : 0) > wrapperSize2;
   }
   const overflow = wrapperSize && containerSize ? direction === "vertical" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width) : false;
+  const animation = (0, import_react.useRef)(void 0);
   (0, import_react.useEffect)(() => {
     if (!wrapperSize || !containerSize || !overflow)
       return;
-    const animation = ele.current?.animate(
+    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?.cancel();
+    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);
+  }
+  (0, import_react.useEffect)(() => {
+    if (!pauseOnHover)
+      animation.current?.play();
+  }, [animation.current, pauseOnHover]);
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -60,6 +75,8 @@ var InfiniteScroll = (0, import_react.forwardRef)((props, ref) => {
                 `,
         className
       ),
+      onMouseEnter: enter,
+      onMouseLeave: leave,
       ...rest
     },
     /* @__PURE__ */ React.createElement(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/InfiniteScroll.tsx"],
-  "sourcesContent": ["import { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { ComponentProps, CSSProperties, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport type InfiniteScrollProps = ComponentProps<\"div\"> & {\r\n    /**\r\n     * 滚动的方向\r\n     * @default \"vertical\"\r\n     */\r\n    direction?: \"vertical\" | \"horizontal\"\r\n    /** 渲染 children 的容器的类名 */\r\n    containerClassName?: string\r\n    /** 渲染 children 的容器的样式 */\r\n    containerStyle?: CSSProperties\r\n    /**\r\n     * 两个 children 容器之间的间距\r\n     * @default 0\r\n     */\r\n    gap?: number\r\n    /** 一个周期的时间，单位：毫秒 */\r\n    duration: number\r\n    /** 是否将 gap 的距离也加入 overflow 的计算 */\r\n    withGap?: boolean\r\n    /** 尺寸刚好相同时，是否视为溢出 */\r\n    withEqual?: boolean\r\n}\r\n\r\n/**\r\n * 无限滚动的组件\r\n * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果\r\n * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画\r\n */\r\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\r\n    const { className, direction = \"vertical\", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, ...rest } = props\r\n\r\n    const wrapper = useRef<HTMLDivElement>(null)\r\n    const wrapperSize = useSize(wrapper)\r\n\r\n    const ele = useRef<HTMLDivElement>(null)\r\n\r\n    useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\r\n\r\n    const container = useRef<HTMLDivElement>(null)\r\n    const containerSize = useSize(container)\r\n\r\n    function bigger(containerSize: number, wrapperSize: number) {\r\n        return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\r\n    }\r\n\r\n    const overflow = wrapperSize && containerSize ? (direction === \"vertical\" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width)) : false\r\n\r\n    useEffect(() => {\r\n        if (!wrapperSize || !containerSize || !overflow) return\r\n        const animation = ele.current?.animate(\r\n            {\r\n                transform: direction === \"vertical\" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]\r\n            },\r\n            { duration, iterations: Infinity }\r\n        )\r\n        return () => animation?.cancel()\r\n    }, [wrapperSize, containerSize, overflow, direction, duration])\r\n\r\n    return (\r\n        <div\r\n            ref={wrapper}\r\n            className={clsx(\r\n                css`\r\n                    position: relative;\r\n                    overflow: hidden;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}>\r\n            <div\r\n                ref={ele}\r\n                style={{\r\n                    position: \"absolute\",\r\n                    width: direction === \"vertical\" ? \"100%\" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),\r\n                    height: direction === \"horizontal\" ? \"100%\" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width)\r\n                }}>\r\n                <div\r\n                    ref={container}\r\n                    className={clsx(\r\n                        css`\r\n                            position: absolute;\r\n                            left: 0;\r\n                            top: 0;\r\n                            ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n                        `,\r\n                        containerClassName\r\n                    )}\r\n                    style={containerStyle}>\r\n                    {children}\r\n                </div>\r\n                {overflow && (\r\n                    <div\r\n                        ref={container}\r\n                        className={clsx(\r\n                            css`\r\n                                position: absolute;\r\n                                right: 0;\r\n                                bottom: 0;\r\n                                ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n                            `,\r\n                            containerClassName\r\n                        )}\r\n                        style={containerStyle}>\r\n                        {children}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        </div>\r\n    )\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAoB;AACpB,oBAAwB;AACxB,2BAAqB;AACrB,mBAAkG;AA8B3F,IAAM,qBAAiB,yBAAgD,CAAC,OAAO,QAAQ;AAC1F,QAAM,EAAE,WAAW,YAAY,YAAY,UAAU,oBAAoB,gBAAgB,MAAM,GAAG,UAAU,SAAS,WAAW,GAAG,KAAK,IAAI;AAE5I,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,kBAAc,uBAAQ,OAAO;AAEnC,QAAM,UAAM,qBAAuB,IAAI;AAEvC,wCAAoB,KAAK,MAAM,QAAQ,SAA2B,CAAC,QAAQ,OAAO,CAAC;AAEnF,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,oBAAgB,uBAAQ,SAAS;AAEvC,WAAS,OAAOA,gBAAuBC,cAAqB;AACxD,WAAO,YAAYD,kBAAiB,UAAU,MAAM,MAAMC,eAAcD,kBAAiB,UAAU,MAAM,KAAKC;AAAA,EAClH;AAEA,QAAM,WAAW,eAAe,gBAAiB,cAAc,aAAa,OAAO,cAAc,QAAQ,YAAY,MAAM,IAAI,OAAO,cAAc,OAAO,YAAY,KAAK,IAAK;AAEjL,8BAAU,MAAM;AACZ,QAAI,CAAC,eAAe,CAAC,iBAAiB,CAAC;AAAU;AACjD,UAAM,YAAY,IAAI,SAAS;AAAA,MAC3B;AAAA,QACI,WAAW,cAAc,aAAa,CAAC,iBAAiB,eAAe,cAAc,SAAS,QAAQ,IAAI,CAAC,iBAAiB,eAAe,cAAc,QAAQ,QAAQ;AAAA,MAC7K;AAAA,MACA,EAAE,UAAU,YAAY,SAAS;AAAA,IACrC;AACA,WAAO,MAAM,WAAW,OAAO;AAAA,EACnC,GAAG,CAAC,aAAa,eAAe,UAAU,WAAW,QAAQ,CAAC;AAE9D,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,OAAO;AAAA,UACH,UAAU;AAAA,UACV,OAAO,cAAc,aAAa,SAAS,kBAAkB,WAAW,cAAc,QAAQ,IAAI,MAAM,cAAc;AAAA,UACtH,QAAQ,cAAc,eAAe,SAAS,kBAAkB,WAAW,cAAc,SAAS,IAAI,MAAM,cAAc;AAAA,QAC9H;AAAA;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACG,KAAK;AAAA,UACL,eAAW;AAAA,YACP;AAAA;AAAA;AAAA;AAAA,8BAIM,cAAc,aAAa,iBAAiB;AAAA;AAAA,YAElD;AAAA,UACJ;AAAA,UACA,OAAO;AAAA;AAAA,QACN;AAAA,MACL;AAAA,MACC,YACG;AAAA,QAAC;AAAA;AAAA,UACG,KAAK;AAAA,UACL,eAAW;AAAA,YACP;AAAA;AAAA;AAAA;AAAA,kCAIM,cAAc,aAAa,iBAAiB;AAAA;AAAA,YAElD;AAAA,UACJ;AAAA,UACA,OAAO;AAAA;AAAA,QACN;AAAA,MACL;AAAA,IAER;AAAA,EACJ;AAER,CAAC;",
+  "sourcesContent": ["import { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { ComponentProps, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport type InfiniteScrollProps = ComponentProps<\"div\"> & {\r\n    /**\r\n     * 滚动的方向\r\n     * @default \"vertical\"\r\n     */\r\n    direction?: \"vertical\" | \"horizontal\"\r\n    /** 渲染 children 的容器的类名 */\r\n    containerClassName?: string\r\n    /** 渲染 children 的容器的样式 */\r\n    containerStyle?: CSSProperties\r\n    /**\r\n     * 两个 children 容器之间的间距\r\n     * @default 0\r\n     */\r\n    gap?: number\r\n    /** 一个周期的时间，单位：毫秒 */\r\n    duration: number\r\n    /** 是否将 gap 的距离也加入 overflow 的计算 */\r\n    withGap?: boolean\r\n    /** 尺寸刚好相同时，是否视为溢出 */\r\n    withEqual?: boolean\r\n    /** 鼠标移入时，是否停止动画 */\r\n    pauseOnHover?: boolean\r\n}\r\n\r\n/**\r\n * 无限滚动的组件\r\n * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果\r\n * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画\r\n */\r\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\r\n    const { className, direction = \"vertical\", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props\r\n\r\n    const wrapper = useRef<HTMLDivElement>(null)\r\n    const wrapperSize = useSize(wrapper)\r\n\r\n    const ele = useRef<HTMLDivElement>(null)\r\n\r\n    useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\r\n\r\n    const container = useRef<HTMLDivElement>(null)\r\n    const containerSize = useSize(container)\r\n\r\n    function bigger(containerSize: number, wrapperSize: number) {\r\n        return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\r\n    }\r\n\r\n    const overflow = wrapperSize && containerSize ? (direction === \"vertical\" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width)) : false\r\n\r\n    const animation = useRef<Animation | undefined>(undefined)\r\n\r\n    useEffect(() => {\r\n        if (!wrapperSize || !containerSize || !overflow) return\r\n        animation.current = ele.current?.animate(\r\n            {\r\n                transform: direction === \"vertical\" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]\r\n            },\r\n            { duration, iterations: Infinity }\r\n        )\r\n        return () => animation.current?.cancel()\r\n    }, [wrapperSize, containerSize, overflow, direction, duration])\r\n\r\n    function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (pauseOnHover) animation.current?.pause()\r\n        onMouseEnter?.(e)\r\n    }\r\n\r\n    function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (pauseOnHover) animation.current?.play()\r\n        onMouseLeave?.(e)\r\n    }\r\n\r\n    useEffect(() => {\r\n        if (!pauseOnHover) animation.current?.play()\r\n    }, [animation.current, pauseOnHover])\r\n\r\n    return (\r\n        <div\r\n            ref={wrapper}\r\n            className={clsx(\r\n                css`\r\n                    position: relative;\r\n                    overflow: hidden;\r\n                `,\r\n                className\r\n            )}\r\n            onMouseEnter={enter}\r\n            onMouseLeave={leave}\r\n            {...rest}>\r\n            <div\r\n                ref={ele}\r\n                style={{\r\n                    position: \"absolute\",\r\n                    width: direction === \"vertical\" ? \"100%\" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),\r\n                    height: direction === \"horizontal\" ? \"100%\" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width)\r\n                }}>\r\n                <div\r\n                    ref={container}\r\n                    className={clsx(\r\n                        css`\r\n                            position: absolute;\r\n                            left: 0;\r\n                            top: 0;\r\n                            ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n                        `,\r\n                        containerClassName\r\n                    )}\r\n                    style={containerStyle}>\r\n                    {children}\r\n                </div>\r\n                {overflow && (\r\n                    <div\r\n                        ref={container}\r\n                        className={clsx(\r\n                            css`\r\n                                position: absolute;\r\n                                right: 0;\r\n                                bottom: 0;\r\n                                ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n                            `,\r\n                            containerClassName\r\n                        )}\r\n                        style={containerStyle}>\r\n                        {children}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        </div>\r\n    )\r\n})\r\n"],
+  "mappings": "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",
   "names": ["containerSize", "wrapperSize"]
 }

package/dist/cjs/index.d.ts

@@ -14,3 +14,4 @@ export * from "./components/Skeleton";
 export * from "./components/TransitionBox";
 export * from "./components/TransitionNum";
 export * from "./components/Trapezium";
+export * from "./components/Echart";

package/dist/cjs/index.js

@@ -32,6 +32,7 @@ __reExport(src_exports, require("./components/Skeleton"), module.exports);
 __reExport(src_exports, require("./components/TransitionBox"), module.exports);
 __reExport(src_exports, require("./components/TransitionNum"), module.exports);
 __reExport(src_exports, require("./components/Trapezium"), module.exports);
+__reExport(src_exports, require("./components/Echart"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("./components/AutoFit"),
@@ -49,6 +50,7 @@ __reExport(src_exports, require("./components/Trapezium"), module.exports);
   ...require("./components/Skeleton"),
   ...require("./components/TransitionBox"),
   ...require("./components/TransitionNum"),
-  ...require("./components/Trapezium")
+  ...require("./components/Trapezium"),
+  ...require("./components/Echart")
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export * from \"./components/AutoFit\"\r\nexport * from \"./components/AutoScroll\"\r\nexport * from \"./components/AutoSizeTextarea\"\r\nexport * from \"./components/CircleText\"\r\nexport * from \"./components/Flow\"\r\nexport * from \"./components/HlsPlayer\"\r\nexport * from \"./components/InfiniteScroll\"\r\nexport * from \"./components/InputFile\"\r\nexport * from \"./components/LoopSwiper\"\r\nexport * from \"./components/Ring\"\r\nexport * from \"./components/Scroll\"\r\nexport * from \"./components/SectionRing\"\r\nexport * from \"./components/Skeleton\"\r\nexport * from \"./components/TransitionBox\"\r\nexport * from \"./components/TransitionNum\"\r\nexport * from \"./components/Trapezium\"\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,8BAJd;AAKA,wBAAc,mCALd;AAMA,wBAAc,wCANd;AAOA,wBAAc,mCAPd;AAQA,wBAAc,oCARd;AASA,wBAAc,8BATd;AAUA,wBAAc,gCAVd;AAWA,wBAAc,qCAXd;AAYA,wBAAc,kCAZd;AAaA,wBAAc,uCAbd;AAcA,wBAAc,uCAdd;AAeA,wBAAc,mCAfd;",
+  "sourcesContent": ["export * from \"./components/AutoFit\"\r\nexport * from \"./components/AutoScroll\"\r\nexport * from \"./components/AutoSizeTextarea\"\r\nexport * from \"./components/CircleText\"\r\nexport * from \"./components/Flow\"\r\nexport * from \"./components/HlsPlayer\"\r\nexport * from \"./components/InfiniteScroll\"\r\nexport * from \"./components/InputFile\"\r\nexport * from \"./components/LoopSwiper\"\r\nexport * from \"./components/Ring\"\r\nexport * from \"./components/Scroll\"\r\nexport * from \"./components/SectionRing\"\r\nexport * from \"./components/Skeleton\"\r\nexport * from \"./components/TransitionBox\"\r\nexport * from \"./components/TransitionNum\"\r\nexport * from \"./components/Trapezium\"\r\nexport * from \"./components/Echart\""],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,8BAJd;AAKA,wBAAc,mCALd;AAMA,wBAAc,wCANd;AAOA,wBAAc,mCAPd;AAQA,wBAAc,oCARd;AASA,wBAAc,8BATd;AAUA,wBAAc,gCAVd;AAWA,wBAAc,qCAXd;AAYA,wBAAc,kCAZd;AAaA,wBAAc,uCAbd;AAcA,wBAAc,uCAdd;AAeA,wBAAc,mCAfd;AAgBA,wBAAc,gCAhBd;",
   "names": []
 }

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

@@ -0,0 +1,15 @@
+import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from "echarts";
+import { ComponentProps, ForwardedRef, ForwardRefExoticComponent, RefAttributes } from "react";
+export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
+export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
+export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
+export interface EchartProps<T extends any = any> extends Omit<ComponentProps<"div">, "children"> {
+    width: number;
+    height: number;
+    option: T;
+    chart?: ForwardedRef<ECharts>;
+}
+export type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<Omit<EchartProps<T>, "ref"> & RefAttributes<HTMLDivElement>>;
+export declare const Pie: EchartComponent<PieOption>;
+export declare const Bar: EchartComponent<BarOption>;
+export declare const Line: EchartComponent<LineOption>;

package/dist/esm/components/Echart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Echart.d.ts","sourceRoot":"","sources":["Echart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,sBAAsB,EAAE,OAAO,EAAE,mBAAmB,EAAQ,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AACrM,OAAO,EAAE,cAAc,EAAE,YAAY,EAAc,yBAAyB,EAAE,aAAa,EAA2D,MAAM,OAAO,CAAA;AAEnK,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,eAAe,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,mBAAmB,GAAG,sBAAsB,CAAC,CAAA;AAErJ,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,eAAe,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,mBAAmB,GAAG,sBAAsB,CAAC,CAAA;AAErJ,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC,gBAAgB,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,mBAAmB,GAAG,sBAAsB,CAAC,CAAA;AAEvJ,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,GAAG,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7F,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,CAAC,CAAA;IACT,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;CAChC;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,GAAG,UAAU,IAAI,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC,CAAA;AAyBlK,eAAO,MAAM,GAAG,4BAAuC,CAAA;AACvD,eAAO,MAAM,GAAG,4BAAuC,CAAA;AACvD,eAAO,MAAM,IAAI,6BAAwC,CAAA"}

package/dist/esm/components/Echart.js

@@ -0,0 +1,39 @@
+import { init } from "echarts";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Echart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    width,
+    height,
+    option,
+    chart,
+    ...rest
+  } = props;
+  const container = useRef(null);
+  const chartRef = useRef(null);
+  useLayoutEffect(() => {
+    const ele = container.current;
+    chartRef.current = init(ele, option, {
+      width,
+      height
+    });
+    return () => chartRef.current?.dispose();
+  }, []);
+  useImperativeHandle(ref, () => container.current, []);
+  useImperativeHandle(chart, () => chartRef.current, []);
+  useEffect(() => {
+    chartRef.current?.setOption(option);
+    chartRef.current?.resize({
+      width,
+      height
+    });
+  });
+  return /*#__PURE__*/_jsx("div", {
+    ref: container,
+    ...rest
+  });
+});
+export const Pie = Echart;
+export const Bar = Echart;
+export const Line = Echart;
+//# sourceMappingURL=Echart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["init","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","jsx","_jsx","Echart","props","ref","width","height","option","chart","rest","container","chartRef","ele","current","dispose","setOption","resize","Pie","Bar","Line"],"sources":["../../../src/components/Echart.tsx"],"sourcesContent":["import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, init, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from \"echarts\"\r\nimport { ComponentProps, ForwardedRef, forwardRef, ForwardRefExoticComponent, RefAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\n\r\nexport type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\r\n\r\nexport type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\r\n\r\nexport type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\r\n\r\nexport interface EchartProps<T extends any = any> extends Omit<ComponentProps<\"div\">, \"children\"> {\r\n    width: number\r\n    height: number\r\n    option: T\r\n    chart?: ForwardedRef<ECharts>\r\n}\r\n\r\nexport type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<Omit<EchartProps<T>, \"ref\"> & RefAttributes<HTMLDivElement>>\r\n\r\nconst Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {\r\n    const { width, height, option, chart, ...rest } = props\r\n    const container = useRef<HTMLDivElement>(null)\r\n    const chartRef = useRef<ECharts | null>(null)\r\n\r\n    useLayoutEffect(() => {\r\n        const ele = container.current!\r\n        chartRef.current = init(ele, option, { width, height })\r\n        return () => chartRef.current?.dispose()\r\n    }, [])\r\n\r\n    useImperativeHandle(ref, () => container.current!, [])\r\n\r\n    useImperativeHandle(chart, () => chartRef.current!, [])\r\n\r\n    useEffect(() => {\r\n        chartRef.current?.setOption(option)\r\n        chartRef.current?.resize({ width, height })\r\n    })\r\n\r\n    return <div ref={container} {...rest} />\r\n})\r\n\r\nexport const Pie = Echart as EchartComponent<PieOption>\r\nexport const Bar = Echart as EchartComponent<BarOption>\r\nexport const Line = Echart as EchartComponent<LineOption>\r\n"],"mappings":"AAAA,SAA+FA,IAAI,QAAyF,SAAS;AACrM,SAAuCC,UAAU,EAA4CC,SAAS,EAAEC,mBAAmB,EAAEC,eAAe,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAiBnK,MAAMC,MAAM,gBAAGP,UAAU,CAA8B,CAACQ,KAAK,EAAEC,GAAG,KAAK;EACnE,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGN,KAAK;EACvD,MAAMO,SAAS,GAAGX,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAMY,QAAQ,GAAGZ,MAAM,CAAiB,IAAI,CAAC;EAE7CD,eAAe,CAAC,MAAM;IAClB,MAAMc,GAAG,GAAGF,SAAS,CAACG,OAAQ;IAC9BF,QAAQ,CAACE,OAAO,GAAGnB,IAAI,CAACkB,GAAG,EAAEL,MAAM,EAAE;MAAEF,KAAK;MAAEC;IAAO,CAAC,CAAC;IACvD,OAAO,MAAMK,QAAQ,CAACE,OAAO,EAAEC,OAAO,CAAC,CAAC;EAC5C,CAAC,EAAE,EAAE,CAAC;EAENjB,mBAAmB,CAACO,GAAG,EAAE,MAAMM,SAAS,CAACG,OAAQ,EAAE,EAAE,CAAC;EAEtDhB,mBAAmB,CAACW,KAAK,EAAE,MAAMG,QAAQ,CAACE,OAAQ,EAAE,EAAE,CAAC;EAEvDjB,SAAS,CAAC,MAAM;IACZe,QAAQ,CAACE,OAAO,EAAEE,SAAS,CAACR,MAAM,CAAC;IACnCI,QAAQ,CAACE,OAAO,EAAEG,MAAM,CAAC;MAAEX,KAAK;MAAEC;IAAO,CAAC,CAAC;EAC/C,CAAC,CAAC;EAEF,oBAAOL,IAAA;IAAKG,GAAG,EAAEM,SAAU;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC5C,CAAC,CAAC;AAEF,OAAO,MAAMQ,GAAG,GAAGf,MAAoC;AACvD,OAAO,MAAMgB,GAAG,GAAGhB,MAAoC;AACvD,OAAO,MAAMiB,IAAI,GAAGjB,MAAqC"}

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

@@ -20,6 +20,8 @@ export type InfiniteScrollProps = ComponentProps<"div"> & {
     withGap?: boolean;
     /** 尺寸刚好相同时，是否视为溢出 */
     withEqual?: boolean;
+    /** 鼠标移入时，是否停止动画 */
+    pauseOnHover?: boolean;
 };
 /**
  * 无限滚动的组件

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

@@ -1 +1 @@
-{"version":3,"file":"InfiniteScroll.d.ts","sourceRoot":"","sources":["InfiniteScroll.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAsD,MAAM,OAAO,CAAA;AAEzG,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACrC,yBAAyB;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,yBAAyB;IACzB,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,oBAAoB;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,6HAiFzB,CAAA"}
+{"version":3,"file":"InfiniteScroll.d.ts","sourceRoot":"","sources":["InfiniteScroll.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAqF,MAAM,OAAO,CAAA;AAExI,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACrC,yBAAyB;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,yBAAyB;IACzB,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,oBAAoB;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mBAAmB;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,6HAmGzB,CAAA"}

package/dist/esm/components/InfiniteScroll.js

@@ -20,6 +20,9 @@ export const InfiniteScroll = /*#__PURE__*/forwardRef((props, ref) => {
     duration,
     withGap,
     withEqual,
+    pauseOnHover,
+    onMouseEnter,
+    onMouseLeave,
     ...rest
   } = props;
   const wrapper = useRef(null);
@@ -32,22 +35,36 @@ export const InfiniteScroll = /*#__PURE__*/forwardRef((props, ref) => {
     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;
-    const animation = ele.current?.animate({
+    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?.cancel();
+    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?.play();
+  }, [animation.current, pauseOnHover]);
   return /*#__PURE__*/_jsx("div", {
     ref: wrapper,
     className: clsx(css`
                     position: relative;
                     overflow: hidden;
                 `, className),
+    onMouseEnter: enter,
+    onMouseLeave: leave,
     ...rest,
     children: /*#__PURE__*/_jsxs("div", {
       ref: ele,

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

@@ -1 +1 @@
-{"version":3,"names":["css","useSize","clsx","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","jsxs","_jsxs","InfiniteScroll","props","ref","className","direction","children","containerClassName","containerStyle","gap","duration","withGap","withEqual","rest","wrapper","wrapperSize","ele","current","container","containerSize","bigger","overflow","height","width","animation","animate","transform","iterations","Infinity","cancel","style","position"],"sources":["../../../src/components/InfiniteScroll.tsx"],"sourcesContent":["import { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { ComponentProps, CSSProperties, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport type InfiniteScrollProps = ComponentProps<\"div\"> & {\r\n    /**\r\n     * 滚动的方向\r\n     * @default \"vertical\"\r\n     */\r\n    direction?: \"vertical\" | \"horizontal\"\r\n    /** 渲染 children 的容器的类名 */\r\n    containerClassName?: string\r\n    /** 渲染 children 的容器的样式 */\r\n    containerStyle?: CSSProperties\r\n    /**\r\n     * 两个 children 容器之间的间距\r\n     * @default 0\r\n     */\r\n    gap?: number\r\n    /** 一个周期的时间，单位：毫秒 */\r\n    duration: number\r\n    /** 是否将 gap 的距离也加入 overflow 的计算 */\r\n    withGap?: boolean\r\n    /** 尺寸刚好相同时，是否视为溢出 */\r\n    withEqual?: boolean\r\n}\r\n\r\n/**\r\n * 无限滚动的组件\r\n * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果\r\n * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画\r\n */\r\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\r\n    const { className, direction = \"vertical\", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, ...rest } = props\r\n\r\n    const wrapper = useRef<HTMLDivElement>(null)\r\n    const wrapperSize = useSize(wrapper)\r\n\r\n    const ele = useRef<HTMLDivElement>(null)\r\n\r\n    useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\r\n\r\n    const container = useRef<HTMLDivElement>(null)\r\n    const containerSize = useSize(container)\r\n\r\n    function bigger(containerSize: number, wrapperSize: number) {\r\n        return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\r\n    }\r\n\r\n    const overflow = wrapperSize && containerSize ? (direction === \"vertical\" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width)) : false\r\n\r\n    useEffect(() => {\r\n        if (!wrapperSize || !containerSize || !overflow) return\r\n        const animation = ele.current?.animate(\r\n            {\r\n                transform: direction === \"vertical\" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]\r\n            },\r\n            { duration, iterations: Infinity }\r\n        )\r\n        return () => animation?.cancel()\r\n    }, [wrapperSize, containerSize, overflow, direction, duration])\r\n\r\n    return (\r\n        <div\r\n            ref={wrapper}\r\n            className={clsx(\r\n                css`\r\n                    position: relative;\r\n                    overflow: hidden;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}>\r\n            <div\r\n                ref={ele}\r\n                style={{\r\n                    position: \"absolute\",\r\n                    width: direction === \"vertical\" ? \"100%\" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),\r\n                    height: direction === \"horizontal\" ? \"100%\" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width)\r\n                }}>\r\n                <div\r\n                    ref={container}\r\n                    className={clsx(\r\n                        css`\r\n                            position: absolute;\r\n                            left: 0;\r\n                            top: 0;\r\n                            ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n                        `,\r\n                        containerClassName\r\n                    )}\r\n                    style={containerStyle}>\r\n                    {children}\r\n                </div>\r\n                {overflow && (\r\n                    <div\r\n                        ref={container}\r\n                        className={clsx(\r\n                            css`\r\n                                position: absolute;\r\n                                right: 0;\r\n                                bottom: 0;\r\n                                ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n                            `,\r\n                            containerClassName\r\n                        )}\r\n                        style={containerStyle}>\r\n                        {children}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        </div>\r\n    )\r\n})\r\n"],"mappings":"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"}
+{"version":3,"names":["css","useSize","clsx","forwardRef","useEffect","useImperativeHandle","useRef","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","style","position"],"sources":["../../../src/components/InfiniteScroll.tsx"],"sourcesContent":["import { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { ComponentProps, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport type InfiniteScrollProps = ComponentProps<\"div\"> & {\r\n    /**\r\n     * 滚动的方向\r\n     * @default \"vertical\"\r\n     */\r\n    direction?: \"vertical\" | \"horizontal\"\r\n    /** 渲染 children 的容器的类名 */\r\n    containerClassName?: string\r\n    /** 渲染 children 的容器的样式 */\r\n    containerStyle?: CSSProperties\r\n    /**\r\n     * 两个 children 容器之间的间距\r\n     * @default 0\r\n     */\r\n    gap?: number\r\n    /** 一个周期的时间，单位：毫秒 */\r\n    duration: number\r\n    /** 是否将 gap 的距离也加入 overflow 的计算 */\r\n    withGap?: boolean\r\n    /** 尺寸刚好相同时，是否视为溢出 */\r\n    withEqual?: boolean\r\n    /** 鼠标移入时，是否停止动画 */\r\n    pauseOnHover?: boolean\r\n}\r\n\r\n/**\r\n * 无限滚动的组件\r\n * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果\r\n * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画\r\n */\r\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\r\n    const { className, direction = \"vertical\", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props\r\n\r\n    const wrapper = useRef<HTMLDivElement>(null)\r\n    const wrapperSize = useSize(wrapper)\r\n\r\n    const ele = useRef<HTMLDivElement>(null)\r\n\r\n    useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\r\n\r\n    const container = useRef<HTMLDivElement>(null)\r\n    const containerSize = useSize(container)\r\n\r\n    function bigger(containerSize: number, wrapperSize: number) {\r\n        return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\r\n    }\r\n\r\n    const overflow = wrapperSize && containerSize ? (direction === \"vertical\" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width)) : false\r\n\r\n    const animation = useRef<Animation | undefined>(undefined)\r\n\r\n    useEffect(() => {\r\n        if (!wrapperSize || !containerSize || !overflow) return\r\n        animation.current = ele.current?.animate(\r\n            {\r\n                transform: direction === \"vertical\" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]\r\n            },\r\n            { duration, iterations: Infinity }\r\n        )\r\n        return () => animation.current?.cancel()\r\n    }, [wrapperSize, containerSize, overflow, direction, duration])\r\n\r\n    function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (pauseOnHover) animation.current?.pause()\r\n        onMouseEnter?.(e)\r\n    }\r\n\r\n    function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (pauseOnHover) animation.current?.play()\r\n        onMouseLeave?.(e)\r\n    }\r\n\r\n    useEffect(() => {\r\n        if (!pauseOnHover) animation.current?.play()\r\n    }, [animation.current, pauseOnHover])\r\n\r\n    return (\r\n        <div\r\n            ref={wrapper}\r\n            className={clsx(\r\n                css`\r\n                    position: relative;\r\n                    overflow: hidden;\r\n                `,\r\n                className\r\n            )}\r\n            onMouseEnter={enter}\r\n            onMouseLeave={leave}\r\n            {...rest}>\r\n            <div\r\n                ref={ele}\r\n                style={{\r\n                    position: \"absolute\",\r\n                    width: direction === \"vertical\" ? \"100%\" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),\r\n                    height: direction === \"horizontal\" ? \"100%\" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width)\r\n                }}>\r\n                <div\r\n                    ref={container}\r\n                    className={clsx(\r\n                        css`\r\n                            position: absolute;\r\n                            left: 0;\r\n                            top: 0;\r\n                            ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n                        `,\r\n                        containerClassName\r\n                    )}\r\n                    style={containerStyle}>\r\n                    {children}\r\n                </div>\r\n                {overflow && (\r\n                    <div\r\n                        ref={container}\r\n                        className={clsx(\r\n                            css`\r\n                                position: absolute;\r\n                                right: 0;\r\n                                bottom: 0;\r\n                                ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n                            `,\r\n                            containerClassName\r\n                        )}\r\n                        style={containerStyle}>\r\n                        {children}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        </div>\r\n    )\r\n})\r\n"],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -14,3 +14,4 @@ export * from "./components/Skeleton";
 export * from "./components/TransitionBox";
 export * from "./components/TransitionNum";
 export * from "./components/Trapezium";
+export * from "./components/Echart";

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA;AACvC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA;AACvC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,qBAAqB,CAAA"}

package/dist/esm/index.js

@@ -14,4 +14,5 @@ export * from "./components/Skeleton";
 export * from "./components/TransitionBox";
 export * from "./components/TransitionNum";
 export * from "./components/Trapezium";
+export * from "./components/Echart";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/index.tsx"],"sourcesContent":["export * from \"./components/AutoFit\"\r\nexport * from \"./components/AutoScroll\"\r\nexport * from \"./components/AutoSizeTextarea\"\r\nexport * from \"./components/CircleText\"\r\nexport * from \"./components/Flow\"\r\nexport * from \"./components/HlsPlayer\"\r\nexport * from \"./components/InfiniteScroll\"\r\nexport * from \"./components/InputFile\"\r\nexport * from \"./components/LoopSwiper\"\r\nexport * from \"./components/Ring\"\r\nexport * from \"./components/Scroll\"\r\nexport * from \"./components/SectionRing\"\r\nexport * from \"./components/Skeleton\"\r\nexport * from \"./components/TransitionBox\"\r\nexport * from \"./components/TransitionNum\"\r\nexport * from \"./components/Trapezium\"\r\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"names":[],"sources":["../../src/index.tsx"],"sourcesContent":["export * from \"./components/AutoFit\"\r\nexport * from \"./components/AutoScroll\"\r\nexport * from \"./components/AutoSizeTextarea\"\r\nexport * from \"./components/CircleText\"\r\nexport * from \"./components/Flow\"\r\nexport * from \"./components/HlsPlayer\"\r\nexport * from \"./components/InfiniteScroll\"\r\nexport * from \"./components/InputFile\"\r\nexport * from \"./components/LoopSwiper\"\r\nexport * from \"./components/Ring\"\r\nexport * from \"./components/Scroll\"\r\nexport * from \"./components/SectionRing\"\r\nexport * from \"./components/Skeleton\"\r\nexport * from \"./components/TransitionBox\"\r\nexport * from \"./components/TransitionNum\"\r\nexport * from \"./components/Trapezium\"\r\nexport * from \"./components/Echart\""],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "格数科技自用组件库",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -26,6 +26,7 @@
   "dependencies": {
     "@emotion/css": "^11.11.2",
     "ahooks": "^3.7.11",
+    "echarts": "^5.5.0",
     "hls.js": "^1.5.8",
     "smooth-scrollbar": "^8.8.4",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",

package/src/components/Echart.tsx

@@ -0,0 +1,44 @@
+import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, init, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from "echarts"
+import { ComponentProps, ForwardedRef, forwardRef, ForwardRefExoticComponent, RefAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
+
+export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
+
+export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
+
+export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
+
+export interface EchartProps<T extends any = any> extends Omit<ComponentProps<"div">, "children"> {
+    width: number
+    height: number
+    option: T
+    chart?: ForwardedRef<ECharts>
+}
+
+export type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<Omit<EchartProps<T>, "ref"> & RefAttributes<HTMLDivElement>>
+
+const Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {
+    const { width, height, option, chart, ...rest } = props
+    const container = useRef<HTMLDivElement>(null)
+    const chartRef = useRef<ECharts | null>(null)
+
+    useLayoutEffect(() => {
+        const ele = container.current!
+        chartRef.current = init(ele, option, { width, height })
+        return () => chartRef.current?.dispose()
+    }, [])
+
+    useImperativeHandle(ref, () => container.current!, [])
+
+    useImperativeHandle(chart, () => chartRef.current!, [])
+
+    useEffect(() => {
+        chartRef.current?.setOption(option)
+        chartRef.current?.resize({ width, height })
+    })
+
+    return <div ref={container} {...rest} />
+})
+
+export const Pie = Echart as EchartComponent<PieOption>
+export const Bar = Echart as EchartComponent<BarOption>
+export const Line = Echart as EchartComponent<LineOption>

package/src/components/InfiniteScroll.tsx

@@ -1,7 +1,7 @@
 import { css } from "@emotion/css"
 import { useSize } from "ahooks"
 import { clsx } from "deepsea-tools"
-import { ComponentProps, CSSProperties, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import { ComponentProps, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
 
 export type InfiniteScrollProps = ComponentProps<"div"> & {
     /**
@@ -24,6 +24,8 @@ export type InfiniteScrollProps = ComponentProps<"div"> & {
     withGap?: boolean
     /** 尺寸刚好相同时，是否视为溢出 */
     withEqual?: boolean
+    /** 鼠标移入时，是否停止动画 */
+    pauseOnHover?: boolean
 }
 
 /**
@@ -32,7 +34,7 @@ export type InfiniteScrollProps = ComponentProps<"div"> & {
  * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画
  */
 export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {
-    const { className, direction = "vertical", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, ...rest } = props
+    const { className, direction = "vertical", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props
 
     const wrapper = useRef<HTMLDivElement>(null)
     const wrapperSize = useSize(wrapper)
@@ -50,17 +52,33 @@ export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((p
 
     const overflow = wrapperSize && containerSize ? (direction === "vertical" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width)) : false
 
+    const animation = useRef<Animation | undefined>(undefined)
+
     useEffect(() => {
         if (!wrapperSize || !containerSize || !overflow) return
-        const animation = ele.current?.animate(
+        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?.cancel()
+        return () => animation.current?.cancel()
     }, [wrapperSize, containerSize, overflow, direction, duration])
 
+    function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
+        if (pauseOnHover) animation.current?.pause()
+        onMouseEnter?.(e)
+    }
+
+    function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
+        if (pauseOnHover) animation.current?.play()
+        onMouseLeave?.(e)
+    }
+
+    useEffect(() => {
+        if (!pauseOnHover) animation.current?.play()
+    }, [animation.current, pauseOnHover])
+
     return (
         <div
             ref={wrapper}
@@ -71,6 +89,8 @@ export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((p
                 `,
                 className
             )}
+            onMouseEnter={enter}
+            onMouseLeave={leave}
             {...rest}>
             <div
                 ref={ele}

package/src/index.tsx

@@ -14,3 +14,4 @@ export * from "./components/Skeleton"
 export * from "./components/TransitionBox"
 export * from "./components/TransitionNum"
 export * from "./components/Trapezium"
+export * from "./components/Echart"