deepsea-components 2.8.0-beta.20240516105156 → 2.8.0

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

@@ -1,22 +1,21 @@
-import { HTMLAttributes, ReactNode } from "react";
-import { ScrollOptions } from "./Scroll";
-export interface SwiperScrollProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+import { CSSProperties, FC } from "react";
+import { ScrollProps } from "./Scroll";
+export interface SwiperScrollProps extends Omit<ScrollProps, "scrollbar"> {
+    /** 轮播的数据 */
     count: number;
-    /** 轮播元素的长度 */
+    /** 轮播元素的高度 */
     itemHeight: number;
-    /** 轮播的数据 */
-    data: T[];
-    /** key 生成器 */
-    keyExtractor?: (item: T, index: number, data: T[]) => string | number;
-    /** 轮播元素的渲染函数 */
-    render: (item: T, index: number, data: T[]) => ReactNode;
     /** 轮播动画的时间 */
-    animationTime: number;
+    animation: number;
     /** 每个元素的停留时间 */
-    period: number;
+    duration: number;
     /** 元素之间的间距 */
     gap?: number;
-    /** 滚动条选项 */
-    options?: ScrollOptions;
+    /** 容器类名 */
+    containerClassName?: string;
+    /** 容器样式 */
+    containerStyle?: CSSProperties;
+    /** 在鼠标移入时是否继续播放 */
+    playOnMouseEnter?: boolean;
 }
-export declare function AutoScroll<T>(props: SwiperScrollProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const AutoScroll: FC<SwiperScrollProps>;

package/dist/cjs/components/AutoScroll.js

@@ -22,66 +22,83 @@ __export(AutoScroll_exports, {
   AutoScroll: () => AutoScroll
 });
 module.exports = __toCommonJS(AutoScroll_exports);
+var import_css = require("@emotion/css");
+var import_ahooks = require("ahooks");
+var import_deepsea_tools = require("deepsea-tools");
 var import_react = require("react");
 var import_Scroll = require("./Scroll");
-var import_ahooks = require("ahooks");
-function AutoScroll(props) {
-  const { style, itemHeight, count, data, render, animationTime, period, keyExtractor, options, onMouseEnter, onMouseLeave, gap = 0, ...rest } = props;
-  const [offset, setOffset] = (0, import_react.useState)(0);
-  const offsetRef = (0, import_ahooks.useLatest)(offset);
-  const targetRef = (0, import_react.useRef)(0);
-  const [paused, setPaused] = (0, import_react.useState)(false);
-  const pausedRef = (0, import_ahooks.useLatest)(paused);
-  const periodRef = (0, import_ahooks.useLatest)(period);
-  const height = (itemHeight + gap) * count - gap;
+var AutoScroll = (props) => {
+  const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, ...rest } = props;
   const bar = (0, import_react.useRef)(null);
   const timeout = (0, import_react.useRef)(void 0);
+  const ele = (0, import_react.useRef)(null);
+  const size = (0, import_ahooks.useSize)(ele);
+  const pause = (0, import_react.useRef)(false);
   (0, import_react.useEffect)(() => {
-    function listener(status) {
-      const y = status.offset.y;
-      const a = y / (itemHeight + gap);
-      if (a % 1 <= 0.05) {
-        targetRef.current = Math.floor(a);
-      } else {
-        targetRef.current = Math.ceil(a);
-      }
+    if (playOnMouseEnter)
+      pause.current = false;
+  }, [playOnMouseEnter]);
+  (0, import_react.useEffect)(() => {
+    if (!size || count === 0)
+      return;
+    const { height } = size;
+    const range = (0, import_deepsea_tools.getArray)(count, (index) => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0));
+    const scrollHeight = range[range.length - 1];
+    if (height >= scrollHeight)
+      return;
+    function scroll(target) {
       clearTimeout(timeout.current);
       timeout.current = setTimeout(() => {
-        setOffset(targetRef.current);
-      }, periodRef.current);
+        if (pause.current)
+          return scroll(target);
+        bar.current?.scrollTo(0, target, animation);
+      }, duration);
+    }
+    scroll(range[0]);
+    function listener(status) {
+      const { y } = status.offset;
+      const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05;
+      const target = scrollToBottom ? 0 : range.find((item) => item > y);
+      scroll(target);
     }
     bar.current?.addListener(listener);
     return () => {
+      clearTimeout(timeout.current);
       bar.current?.removeListener(listener);
+      bar.current?.scrollTo(0, 0);
     };
-  }, []);
-  (0, import_react.useEffect)(() => {
-    if (data.length <= count || paused === true)
-      return;
-    targetRef.current = (offset + 1) % (data.length + 1 - count);
-    timeout.current = setTimeout(() => {
-      setOffset(targetRef.current);
-    }, periodRef.current);
-    return () => clearTimeout(timeout.current);
-  }, [count, data.length, offset, paused]);
-  (0, import_react.useEffect)(() => {
-    setOffset(0);
-  }, [itemHeight, count, data.length, animationTime, period, gap]);
-  (0, import_react.useEffect)(() => {
-    if (pausedRef.current)
-      return;
-    bar.current?.scrollTo(0, offset * (itemHeight + gap), animationTime);
-  }, [offset]);
+  }, [size, count, itemHeight, gap, duration, animation]);
   function onContainerMouseEnter(e) {
-    setPaused(true);
+    if (playOnMouseEnter)
+      return;
+    pause.current = true;
     onMouseEnter?.(e);
   }
   function onContainerMouseLeave(e) {
-    setPaused(false);
+    if (playOnMouseEnter)
+      return;
+    pause.current = false;
     onMouseLeave?.(e);
   }
-  return /* @__PURE__ */ React.createElement(import_Scroll.Scroll, { scrollbar: bar, options, style: { height, ...style }, onMouseEnter: onContainerMouseEnter, onMouseLeave: onContainerMouseLeave, ...rest }, data.map((item, index, arr) => /* @__PURE__ */ React.createElement("div", { key: keyExtractor?.(item, index, arr) ?? index, style: { height: itemHeight, marginTop: index === 0 ? 0 : `${gap}px` } }, render(item, index, arr))));
-}
+  return /* @__PURE__ */ React.createElement(import_Scroll.Scroll, { ref: ele, scrollbar: bar, onMouseEnter: onContainerMouseEnter, onMouseLeave: onContainerMouseLeave, ...rest }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: (0, import_deepsea_tools.clsx)(
+        import_css.css`
+                        display: flex;
+                        flex-direction: column;
+                        gap: var(--gap, 0);
+                        & > * {
+                            flex: none;
+                        }
+                    `,
+        containerClassName
+      ),
+      style: { "--gap": `${gap}px`, ...containerStyle }
+    },
+    children
+  ));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AutoScroll

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/AutoScroll.tsx"],
-  "sourcesContent": ["import { HTMLAttributes, ReactNode, useEffect, useRef, useState, MouseEvent as ReactMouseEvent } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\r\nimport { Scroll, ScrollOptions } from \"./Scroll\"\r\nimport { useLatest } from \"ahooks\"\r\n\r\nexport interface SwiperScrollProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n    count: number\r\n\r\n    /** 轮播元素的长度 */\r\n    itemHeight: number\r\n\r\n    /** 轮播的数据 */\r\n    data: T[]\r\n\r\n    /** key 生成器 */\r\n    keyExtractor?: (item: T, index: number, data: T[]) => string | number\r\n\r\n    /** 轮播元素的渲染函数 */\r\n    render: (item: T, index: number, data: T[]) => ReactNode\r\n\r\n    /** 轮播动画的时间 */\r\n    animationTime: number\r\n\r\n    /** 每个元素的停留时间 */\r\n    period: number\r\n\r\n    /** 元素之间的间距 */\r\n    gap?: number\r\n\r\n    /** 滚动条选项 */\r\n    options?: ScrollOptions\r\n}\r\n\r\nexport function AutoScroll<T>(props: SwiperScrollProps<T>) {\r\n    const { style, itemHeight, count, data, render, animationTime, period, keyExtractor, options, onMouseEnter, onMouseLeave, gap = 0, ...rest } = props\r\n\r\n    const [offset, setOffset] = useState(0)\r\n\r\n    const offsetRef = useLatest(offset)\r\n\r\n    const targetRef = useRef(0)\r\n\r\n    const [paused, setPaused] = useState(false)\r\n\r\n    const pausedRef = useLatest(paused)\r\n\r\n    const periodRef = useLatest(period)\r\n\r\n    const height = (itemHeight + gap) * count - gap\r\n\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\r\n\r\n    useEffect(() => {\r\n        function listener(status: ScrollStatus) {\r\n            const y = status.offset.y\r\n            const a = y / (itemHeight + gap)\r\n            if (a % 1 <= 0.05) {\r\n                targetRef.current = Math.floor(a)\r\n            } else {\r\n                targetRef.current = Math.ceil(a)\r\n            }\r\n            clearTimeout(timeout.current)\r\n            timeout.current = setTimeout(() => {\r\n                setOffset(targetRef.current)\r\n            }, periodRef.current)\r\n        }\r\n        bar.current?.addListener(listener)\r\n        return () => {\r\n            bar.current?.removeListener(listener)\r\n        }\r\n    }, [])\r\n\r\n    useEffect(() => {\r\n        if (data.length <= count || paused === true) return\r\n        targetRef.current = (offset + 1) % (data.length + 1 - count)\r\n        timeout.current = setTimeout(() => {\r\n            setOffset(targetRef.current)\r\n        }, periodRef.current)\r\n        return () => clearTimeout(timeout.current)\r\n    }, [count, data.length, offset, paused])\r\n\r\n    useEffect(() => {\r\n        setOffset(0)\r\n    }, [itemHeight, count, data.length, animationTime, period, gap])\r\n\r\n    useEffect(() => {\r\n        if (pausedRef.current) return\r\n        bar.current?.scrollTo(0, offset * (itemHeight + gap), animationTime)\r\n    }, [offset])\r\n\r\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        setPaused(true)\r\n        onMouseEnter?.(e)\r\n    }\r\n\r\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        setPaused(false)\r\n        onMouseLeave?.(e)\r\n    }\r\n\r\n    return (\r\n        <Scroll scrollbar={bar} options={options} style={{ height, ...style }} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\r\n            {data.map((item, index, arr) => (\r\n                <div key={keyExtractor?.(item, index, arr) ?? index} style={{ height: itemHeight, marginTop: index === 0 ? 0 : `${gap}px` }}>\r\n                    {render(item, index, arr)}\r\n                </div>\r\n            ))}\r\n        </Scroll>\r\n    )\r\n}\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsG;AAGtG,oBAAsC;AACtC,oBAA0B;AA8BnB,SAAS,WAAc,OAA6B;AACvD,QAAM,EAAE,OAAO,YAAY,OAAO,MAAM,QAAQ,eAAe,QAAQ,cAAc,SAAS,cAAc,cAAc,MAAM,GAAG,GAAG,KAAK,IAAI;AAE/I,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,CAAC;AAEtC,QAAM,gBAAY,yBAAU,MAAM;AAElC,QAAM,gBAAY,qBAAO,CAAC;AAE1B,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAE1C,QAAM,gBAAY,yBAAU,MAAM;AAElC,QAAM,gBAAY,yBAAU,MAAM;AAElC,QAAM,UAAU,aAAa,OAAO,QAAQ;AAE5C,QAAM,UAAM,qBAAyB,IAAI;AAEzC,QAAM,cAAU,qBAAmC,MAAS;AAE5D,8BAAU,MAAM;AACZ,aAAS,SAAS,QAAsB;AACpC,YAAM,IAAI,OAAO,OAAO;AACxB,YAAM,IAAI,KAAK,aAAa;AAC5B,UAAI,IAAI,KAAK,MAAM;AACf,kBAAU,UAAU,KAAK,MAAM,CAAC;AAAA,MACpC,OAAO;AACH,kBAAU,UAAU,KAAK,KAAK,CAAC;AAAA,MACnC;AACA,mBAAa,QAAQ,OAAO;AAC5B,cAAQ,UAAU,WAAW,MAAM;AAC/B,kBAAU,UAAU,OAAO;AAAA,MAC/B,GAAG,UAAU,OAAO;AAAA,IACxB;AACA,QAAI,SAAS,YAAY,QAAQ;AACjC,WAAO,MAAM;AACT,UAAI,SAAS,eAAe,QAAQ;AAAA,IACxC;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACZ,QAAI,KAAK,UAAU,SAAS,WAAW;AAAM;AAC7C,cAAU,WAAW,SAAS,MAAM,KAAK,SAAS,IAAI;AACtD,YAAQ,UAAU,WAAW,MAAM;AAC/B,gBAAU,UAAU,OAAO;AAAA,IAC/B,GAAG,UAAU,OAAO;AACpB,WAAO,MAAM,aAAa,QAAQ,OAAO;AAAA,EAC7C,GAAG,CAAC,OAAO,KAAK,QAAQ,QAAQ,MAAM,CAAC;AAEvC,8BAAU,MAAM;AACZ,cAAU,CAAC;AAAA,EACf,GAAG,CAAC,YAAY,OAAO,KAAK,QAAQ,eAAe,QAAQ,GAAG,CAAC;AAE/D,8BAAU,MAAM;AACZ,QAAI,UAAU;AAAS;AACvB,QAAI,SAAS,SAAS,GAAG,UAAU,aAAa,MAAM,aAAa;AAAA,EACvE,GAAG,CAAC,MAAM,CAAC;AAEX,WAAS,sBAAsB,GAAgD;AAC3E,cAAU,IAAI;AACd,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,sBAAsB,GAAgD;AAC3E,cAAU,KAAK;AACf,mBAAe,CAAC;AAAA,EACpB;AAEA,SACI,oCAAC,wBAAO,WAAW,KAAK,SAAkB,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,cAAc,uBAAuB,cAAc,uBAAwB,GAAG,QAChJ,KAAK,IAAI,CAAC,MAAM,OAAO,QACpB,oCAAC,SAAI,KAAK,eAAe,MAAM,OAAO,GAAG,KAAK,OAAO,OAAO,EAAE,QAAQ,YAAY,WAAW,UAAU,IAAI,IAAI,GAAG,QAAQ,KACrH,OAAO,MAAM,OAAO,GAAG,CAC5B,CACH,CACL;AAER;",
+  "sourcesContent": ["import { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx, getArray } from \"deepsea-tools\"\r\nimport { CSSProperties, FC, MouseEvent as ReactMouseEvent, useEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\r\nimport { Scroll, ScrollProps } from \"./Scroll\"\r\n\r\nexport interface SwiperScrollProps extends Omit<ScrollProps, \"scrollbar\"> {\r\n    /** 轮播的数据 */\r\n    count: number\r\n\r\n    /** 轮播元素的高度 */\r\n    itemHeight: number\r\n\r\n    /** 轮播动画的时间 */\r\n    animation: number\r\n\r\n    /** 每个元素的停留时间 */\r\n    duration: number\r\n\r\n    /** 元素之间的间距 */\r\n    gap?: number\r\n\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n\r\n    /** 在鼠标移入时是否继续播放 */\r\n    playOnMouseEnter?: boolean\r\n}\r\n\r\nexport const AutoScroll: FC<SwiperScrollProps> = props => {\r\n    const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, ...rest } = props\r\n    const bar = useRef<Scrollbar | null>(null)\r\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const size = useSize(ele)\r\n    const pause = useRef(false)\r\n\r\n    useEffect(() => {\r\n        if (playOnMouseEnter) pause.current = false\r\n    }, [playOnMouseEnter])\r\n\r\n    useEffect(() => {\r\n        if (!size || count === 0) return\r\n        const { height } = size\r\n        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\r\n        const scrollHeight = range[range.length - 1]\r\n        if (height >= scrollHeight) return\r\n        function scroll(target: number) {\r\n            clearTimeout(timeout.current)\r\n            timeout.current = setTimeout(() => {\r\n                if (pause.current) return scroll(target)\r\n                bar.current?.scrollTo(0, target, animation)\r\n            }, duration)\r\n        }\r\n        scroll(range[0])\r\n        function listener(status: ScrollStatus) {\r\n            const { y } = status.offset\r\n            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\r\n            const target = scrollToBottom ? 0 : range.find(item => item > y)!\r\n            scroll(target)\r\n        }\r\n        bar.current?.addListener(listener)\r\n        return () => {\r\n            clearTimeout(timeout.current)\r\n            bar.current?.removeListener(listener)\r\n            bar.current?.scrollTo(0, 0)\r\n        }\r\n    }, [size, count, itemHeight, gap, duration, animation])\r\n\r\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pause.current = true\r\n        onMouseEnter?.(e)\r\n    }\r\n\r\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pause.current = false\r\n        onMouseLeave?.(e)\r\n    }\r\n\r\n    return (\r\n        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\r\n            <div\r\n                className={clsx(\r\n                    css`\r\n                        display: flex;\r\n                        flex-direction: column;\r\n                        gap: var(--gap, 0);\r\n                        & > * {\r\n                            flex: none;\r\n                        }\r\n                    `,\r\n                    containerClassName\r\n                )}\r\n                style={{ \"--gap\": `${gap}px`, ...containerStyle } as CSSProperties}>\r\n                {children}\r\n            </div>\r\n        </Scroll>\r\n    )\r\n}\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAoB;AACpB,oBAAwB;AACxB,2BAA+B;AAC/B,mBAAoF;AAGpF,oBAAoC;AA4B7B,IAAM,aAAoC,WAAS;AACtD,QAAM,EAAE,OAAO,YAAY,WAAW,UAAU,cAAc,cAAc,MAAM,GAAG,oBAAoB,gBAAgB,UAAU,kBAAkB,GAAG,KAAK,IAAI;AACjK,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,cAAU,qBAAmC,MAAS;AAC5D,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,WAAO,uBAAQ,GAAG;AACxB,QAAM,YAAQ,qBAAO,KAAK;AAE1B,8BAAU,MAAM;AACZ,QAAI;AAAkB,YAAM,UAAU;AAAA,EAC1C,GAAG,CAAC,gBAAgB,CAAC;AAErB,8BAAU,MAAM;AACZ,QAAI,CAAC,QAAQ,UAAU;AAAG;AAC1B,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,YAAQ,+BAAS,OAAO,YAAU,aAAa,QAAQ,QAAQ,MAAM,UAAU,QAAQ,IAAI,MAAM,EAAE;AACzG,UAAM,eAAe,MAAM,MAAM,SAAS,CAAC;AAC3C,QAAI,UAAU;AAAc;AAC5B,aAAS,OAAO,QAAgB;AAC5B,mBAAa,QAAQ,OAAO;AAC5B,cAAQ,UAAU,WAAW,MAAM;AAC/B,YAAI,MAAM;AAAS,iBAAO,OAAO,MAAM;AACvC,YAAI,SAAS,SAAS,GAAG,QAAQ,SAAS;AAAA,MAC9C,GAAG,QAAQ;AAAA,IACf;AACA,WAAO,MAAM,CAAC,CAAC;AACf,aAAS,SAAS,QAAsB;AACpC,YAAM,EAAE,EAAE,IAAI,OAAO;AACrB,YAAM,iBAAiB,KAAK,IAAI,IAAI,SAAS,YAAY,IAAI,cAAc;AAC3E,YAAM,SAAS,iBAAiB,IAAI,MAAM,KAAK,UAAQ,OAAO,CAAC;AAC/D,aAAO,MAAM;AAAA,IACjB;AACA,QAAI,SAAS,YAAY,QAAQ;AACjC,WAAO,MAAM;AACT,mBAAa,QAAQ,OAAO;AAC5B,UAAI,SAAS,eAAe,QAAQ;AACpC,UAAI,SAAS,SAAS,GAAG,CAAC;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,MAAM,OAAO,YAAY,KAAK,UAAU,SAAS,CAAC;AAEtD,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,UAAM,UAAU;AAChB,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,UAAM,UAAU;AAChB,mBAAe,CAAC;AAAA,EACpB;AAEA,SACI,oCAAC,wBAAO,KAAK,KAAK,WAAW,KAAK,cAAc,uBAAuB,cAAc,uBAAwB,GAAG,QAC5G;AAAA,IAAC;AAAA;AAAA,MACG,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQA;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,eAAe;AAAA;AAAA,IAC/C;AAAA,EACL,CACJ;AAER;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-import { CSSProperties, ForwardedRef, HTMLAttributes } from "react";
+import { ForwardedRef, HTMLAttributes } from "react";
 import Scrollbar from "smooth-scrollbar";
 import type { ScrollbarOptions, ScrollListener } from "smooth-scrollbar/interfaces";
 export { default as Scrollbar } from "smooth-scrollbar";
@@ -10,17 +10,9 @@ export interface ScrollOptions extends Partial<ScrollbarOptions> {
 export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
     /** 滚动的配置 */
     options?: ScrollOptions;
-    /** 容器宽度 */
-    containerClassName?: string;
-    /** 容器样式 */
-    containerStyle?: CSSProperties;
     /** 滚动条实例 */
     scrollbar?: ForwardedRef<Scrollbar>;
     /** 滚动条滚动事件 */
     onScrollbar?: ScrollListener;
 }
-/**
- * 滚动条组件
- * @description 注意 children 不是直接渲染在组件上的，而是渲染在内部的容器上
- */
 export declare const Scroll: import("react").ForwardRefExoticComponent<ScrollProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/Scroll.js

@@ -41,7 +41,7 @@ var import_smooth_scrollbar = __toESM(require("smooth-scrollbar"));
 var import_smooth_scrollbar2 = __toESM(require("smooth-scrollbar"));
 __reExport(Scroll_exports, require("smooth-scrollbar/interfaces"), module.exports);
 var Scroll = (0, import_react.forwardRef)((props, ref) => {
-  const { children, containerClassName, containerStyle, options, className, style, scrollbar, onScrollbar, ...rest } = props;
+  const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props;
   const { thumbWidth, ...scrollbarOptions } = options || {};
   const ele = (0, import_react.useRef)(null);
   const bar = (0, import_react.useRef)(null);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Scroll.tsx"],
-  "sourcesContent": ["import { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n    /** 滑块宽度 */\r\n    thumbWidth?: number\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 滚动的配置 */\r\n    options?: ScrollOptions\r\n    /** 容器宽度 */\r\n    containerClassName?: string\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n    /** 滚动条实例 */\r\n    scrollbar?: ForwardedRef<Scrollbar>\r\n    /** 滚动条滚动事件 */\r\n    onScrollbar?: ScrollListener\r\n}\r\n\r\n/**\r\n * 滚动条组件\r\n * @description 注意 children 不是直接渲染在组件上的，而是渲染在内部的容器上\r\n */\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n    const { children, containerClassName, containerStyle, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n    const { thumbWidth, ...scrollbarOptions } = options || {}\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useEffect(() => {\r\n        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n        return () => bar.current?.destroy()\r\n    }, [])\r\n\r\n    useEffect(() => {\r\n        if (!scrollbar) return\r\n        if (typeof scrollbar === \"function\") {\r\n            scrollbar(bar.current)\r\n            return () => scrollbar(null)\r\n        }\r\n        scrollbar.current = bar.current\r\n        return () => (scrollbar.current = null)\r\n    }, [scrollbar])\r\n\r\n    useEffect(() => {\r\n        if (!onScrollbar) return\r\n        bar.current?.addListener(onScrollbar)\r\n        return () => bar.current?.removeListener(onScrollbar)\r\n    }, [onScrollbar])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                typeof thumbWidth === \"number\" &&\r\n                    css`\r\n                        .scrollbar-track.scrollbar-track-x {\r\n                            height: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-thumb.scrollbar-thumb-x {\r\n                            height: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-track.scrollbar-track-y {\r\n                            width: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-thumb.scrollbar-thumb-y {\r\n                            width: var(--thumb-width);\r\n                        }\r\n                    `,\r\n                className\r\n            )}\r\n            style={\r\n                {\r\n                    \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : undefined,\r\n                    ...style\r\n                } as CSSProperties\r\n            }\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAoB;AACpB,2BAAqB;AACrB,mBAAgH;AAChH,8BAAsB;AAEtB,IAAAA,2BAAqC;AACrC,2BAAc,wCANd;AA8BO,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,oBAAoB,gBAAgB,SAAS,WAAW,OAAO,WAAW,aAAa,GAAG,KAAK,IAAI;AACrH,QAAM,EAAE,YAAY,GAAG,iBAAiB,IAAI,WAAW,CAAC;AACxD,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,UAAM,qBAAyB,IAAI;AAEzC,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,8BAAU,MAAM;AACZ,QAAI,UAAU,wBAAAC,QAAU,KAAK,IAAI,SAAU,gBAAgB;AAC3D,WAAO,MAAM,IAAI,SAAS,QAAQ;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAW;AAChB,QAAI,OAAO,cAAc,YAAY;AACjC,gBAAU,IAAI,OAAO;AACrB,aAAO,MAAM,UAAU,IAAI;AAAA,IAC/B;AACA,cAAU,UAAU,IAAI;AACxB,WAAO,MAAO,UAAU,UAAU;AAAA,EACtC,GAAG,CAAC,SAAS,CAAC;AAEd,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAa;AAClB,QAAI,SAAS,YAAY,WAAW;AACpC,WAAO,MAAM,IAAI,SAAS,eAAe,WAAW;AAAA,EACxD,GAAG,CAAC,WAAW,CAAC;AAEhB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP,OAAO,eAAe,YAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAiBJ;AAAA,MACJ;AAAA,MACA,OACI;AAAA,QACI,iBAAiB,OAAO,eAAe,WAAW,GAAG,iBAAiB;AAAA,QACtE,GAAG;AAAA,MACP;AAAA,MAEH,GAAG;AAAA;AAAA,IACH;AAAA,EACL;AAER,CAAC;",
+  "sourcesContent": ["import { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n    /** 滑块宽度 */\r\n    thumbWidth?: number\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 滚动的配置 */\r\n    options?: ScrollOptions\r\n    /** 滚动条实例 */\r\n    scrollbar?: ForwardedRef<Scrollbar>\r\n    /** 滚动条滚动事件 */\r\n    onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n    const { thumbWidth, ...scrollbarOptions } = options || {}\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useEffect(() => {\r\n        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n        return () => bar.current?.destroy()\r\n    }, [])\r\n\r\n    useEffect(() => {\r\n        if (!scrollbar) return\r\n        if (typeof scrollbar === \"function\") {\r\n            scrollbar(bar.current)\r\n            return () => scrollbar(null)\r\n        }\r\n        scrollbar.current = bar.current\r\n        return () => (scrollbar.current = null)\r\n    }, [scrollbar])\r\n\r\n    useEffect(() => {\r\n        if (!onScrollbar) return\r\n        bar.current?.addListener(onScrollbar)\r\n        return () => bar.current?.removeListener(onScrollbar)\r\n    }, [onScrollbar])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                typeof thumbWidth === \"number\" &&\r\n                    css`\r\n                        .scrollbar-track.scrollbar-track-x {\r\n                            height: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-thumb.scrollbar-thumb-x {\r\n                            height: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-track.scrollbar-track-y {\r\n                            width: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-thumb.scrollbar-thumb-y {\r\n                            width: var(--thumb-width);\r\n                        }\r\n                    `,\r\n                className\r\n            )}\r\n            style={\r\n                {\r\n                    \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : undefined,\r\n                    ...style\r\n                } as CSSProperties\r\n            }\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAoB;AACpB,2BAAqB;AACrB,mBAAgH;AAChH,8BAAsB;AAEtB,IAAAA,2BAAqC;AACrC,2BAAc,wCANd;AAsBO,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,SAAS,WAAW,OAAO,WAAW,aAAa,GAAG,KAAK,IAAI;AACjF,QAAM,EAAE,YAAY,GAAG,iBAAiB,IAAI,WAAW,CAAC;AACxD,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,UAAM,qBAAyB,IAAI;AAEzC,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,8BAAU,MAAM;AACZ,QAAI,UAAU,wBAAAC,QAAU,KAAK,IAAI,SAAU,gBAAgB;AAC3D,WAAO,MAAM,IAAI,SAAS,QAAQ;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAW;AAChB,QAAI,OAAO,cAAc,YAAY;AACjC,gBAAU,IAAI,OAAO;AACrB,aAAO,MAAM,UAAU,IAAI;AAAA,IAC/B;AACA,cAAU,UAAU,IAAI;AACxB,WAAO,MAAO,UAAU,UAAU;AAAA,EACtC,GAAG,CAAC,SAAS,CAAC;AAEd,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAa;AAClB,QAAI,SAAS,YAAY,WAAW;AACpC,WAAO,MAAM,IAAI,SAAS,eAAe,WAAW;AAAA,EACxD,GAAG,CAAC,WAAW,CAAC;AAEhB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP,OAAO,eAAe,YAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAiBJ;AAAA,MACJ;AAAA,MACA,OACI;AAAA,QACI,iBAAiB,OAAO,eAAe,WAAW,GAAG,iBAAiB;AAAA,QACtE,GAAG;AAAA,MACP;AAAA,MAEH,GAAG;AAAA;AAAA,IACH;AAAA,EACL;AAER,CAAC;",
   "names": ["import_smooth_scrollbar", "Scrollbar"]
 }

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

@@ -1,22 +1,21 @@
-import { HTMLAttributes, ReactNode } from "react";
-import { ScrollOptions } from "./Scroll";
-export interface SwiperScrollProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+import { CSSProperties, FC } from "react";
+import { ScrollProps } from "./Scroll";
+export interface SwiperScrollProps extends Omit<ScrollProps, "scrollbar"> {
+    /** 轮播的数据 */
     count: number;
-    /** 轮播元素的长度 */
+    /** 轮播元素的高度 */
     itemHeight: number;
-    /** 轮播的数据 */
-    data: T[];
-    /** key 生成器 */
-    keyExtractor?: (item: T, index: number, data: T[]) => string | number;
-    /** 轮播元素的渲染函数 */
-    render: (item: T, index: number, data: T[]) => ReactNode;
     /** 轮播动画的时间 */
-    animationTime: number;
+    animation: number;
     /** 每个元素的停留时间 */
-    period: number;
+    duration: number;
     /** 元素之间的间距 */
     gap?: number;
-    /** 滚动条选项 */
-    options?: ScrollOptions;
+    /** 容器类名 */
+    containerClassName?: string;
+    /** 容器样式 */
+    containerStyle?: CSSProperties;
+    /** 在鼠标移入时是否继续播放 */
+    playOnMouseEnter?: boolean;
 }
-export declare function AutoScroll<T>(props: SwiperScrollProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const AutoScroll: FC<SwiperScrollProps>;

package/dist/esm/components/AutoScroll.js

@@ -1,91 +1,94 @@
-import { useEffect, useRef, useState } from "react";
+import { css } from "@emotion/css";
+import { useSize } from "ahooks";
+import { clsx, getArray } from "deepsea-tools";
+import { useEffect, useRef } from "react";
 import { Scroll } from "./Scroll";
-import { useLatest } from "ahooks";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function AutoScroll(props) {
+export const AutoScroll = props => {
   const {
-    style,
-    itemHeight,
     count,
-    data,
-    render,
-    animationTime,
-    period,
-    keyExtractor,
-    options,
+    itemHeight,
+    animation,
+    duration,
     onMouseEnter,
     onMouseLeave,
     gap = 0,
+    containerClassName,
+    containerStyle,
+    children,
+    playOnMouseEnter,
     ...rest
   } = props;
-  const [offset, setOffset] = useState(0);
-  const offsetRef = useLatest(offset);
-  const targetRef = useRef(0);
-  const [paused, setPaused] = useState(false);
-  const pausedRef = useLatest(paused);
-  const periodRef = useLatest(period);
-  const height = (itemHeight + gap) * count - gap;
   const bar = useRef(null);
   const timeout = useRef(undefined);
+  const ele = useRef(null);
+  const size = useSize(ele);
+  const pause = useRef(false);
   useEffect(() => {
-    function listener(status) {
-      const y = status.offset.y;
-      const a = y / (itemHeight + gap);
-      if (a % 1 <= 0.05) {
-        targetRef.current = Math.floor(a);
-      } else {
-        targetRef.current = Math.ceil(a);
-      }
+    if (playOnMouseEnter) pause.current = false;
+  }, [playOnMouseEnter]);
+  useEffect(() => {
+    if (!size || count === 0) return;
+    const {
+      height
+    } = size;
+    const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0));
+    const scrollHeight = range[range.length - 1];
+    if (height >= scrollHeight) return;
+    function scroll(target) {
       clearTimeout(timeout.current);
       timeout.current = setTimeout(() => {
-        setOffset(targetRef.current);
-      }, periodRef.current);
+        if (pause.current) return scroll(target);
+        bar.current?.scrollTo(0, target, animation);
+      }, duration);
+    }
+    scroll(range[0]);
+    function listener(status) {
+      const {
+        y
+      } = status.offset;
+      const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05;
+      const target = scrollToBottom ? 0 : range.find(item => item > y);
+      scroll(target);
     }
     bar.current?.addListener(listener);
     return () => {
+      clearTimeout(timeout.current);
       bar.current?.removeListener(listener);
+      bar.current?.scrollTo(0, 0);
     };
-  }, []);
-  useEffect(() => {
-    if (data.length <= count || paused === true) return;
-    targetRef.current = (offset + 1) % (data.length + 1 - count);
-    timeout.current = setTimeout(() => {
-      setOffset(targetRef.current);
-    }, periodRef.current);
-    return () => clearTimeout(timeout.current);
-  }, [count, data.length, offset, paused]);
-  useEffect(() => {
-    setOffset(0);
-  }, [itemHeight, count, data.length, animationTime, period, gap]);
-  useEffect(() => {
-    if (pausedRef.current) return;
-    bar.current?.scrollTo(0, offset * (itemHeight + gap), animationTime);
-  }, [offset]);
+  }, [size, count, itemHeight, gap, duration, animation]);
   function onContainerMouseEnter(e) {
-    setPaused(true);
+    if (playOnMouseEnter) return;
+    pause.current = true;
     onMouseEnter?.(e);
   }
   function onContainerMouseLeave(e) {
-    setPaused(false);
+    if (playOnMouseEnter) return;
+    pause.current = false;
     onMouseLeave?.(e);
   }
   return /*#__PURE__*/_jsx(Scroll, {
+    ref: ele,
     scrollbar: bar,
-    options: options,
-    style: {
-      height,
-      ...style
-    },
     onMouseEnter: onContainerMouseEnter,
     onMouseLeave: onContainerMouseLeave,
     ...rest,
-    children: data.map((item, index, arr) => /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx("div", {
+      className: clsx(css`
+                        display: flex;
+                        flex-direction: column;
+                        gap: var(--gap, 0);
+                        & > * {
+                            flex: none;
+                        }
+                    `, containerClassName),
       style: {
-        height: itemHeight,
-        marginTop: index === 0 ? 0 : `${gap}px`
+        "--gap": `${gap}px`,
+        ...containerStyle
       },
-      children: render(item, index, arr)
-    }, keyExtractor?.(item, index, arr) ?? index))
+      children: children
+    })
   });
-}
+};
 //# sourceMappingURL=AutoScroll.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","useState","Scroll","useLatest","jsx","_jsx","AutoScroll","props","style","itemHeight","count","data","render","animationTime","period","keyExtractor","options","onMouseEnter","onMouseLeave","gap","rest","offset","setOffset","offsetRef","targetRef","paused","setPaused","pausedRef","periodRef","height","bar","timeout","undefined","listener","status","y","a","current","Math","floor","ceil","clearTimeout","setTimeout","addListener","removeListener","length","scrollTo","onContainerMouseEnter","e","onContainerMouseLeave","scrollbar","children","map","item","index","arr","marginTop"],"sources":["../../../src/components/AutoScroll.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useEffect, useRef, useState, MouseEvent as ReactMouseEvent } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\r\nimport { Scroll, ScrollOptions } from \"./Scroll\"\r\nimport { useLatest } from \"ahooks\"\r\n\r\nexport interface SwiperScrollProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n    count: number\r\n\r\n    /** 轮播元素的长度 */\r\n    itemHeight: number\r\n\r\n    /** 轮播的数据 */\r\n    data: T[]\r\n\r\n    /** key 生成器 */\r\n    keyExtractor?: (item: T, index: number, data: T[]) => string | number\r\n\r\n    /** 轮播元素的渲染函数 */\r\n    render: (item: T, index: number, data: T[]) => ReactNode\r\n\r\n    /** 轮播动画的时间 */\r\n    animationTime: number\r\n\r\n    /** 每个元素的停留时间 */\r\n    period: number\r\n\r\n    /** 元素之间的间距 */\r\n    gap?: number\r\n\r\n    /** 滚动条选项 */\r\n    options?: ScrollOptions\r\n}\r\n\r\nexport function AutoScroll<T>(props: SwiperScrollProps<T>) {\r\n    const { style, itemHeight, count, data, render, animationTime, period, keyExtractor, options, onMouseEnter, onMouseLeave, gap = 0, ...rest } = props\r\n\r\n    const [offset, setOffset] = useState(0)\r\n\r\n    const offsetRef = useLatest(offset)\r\n\r\n    const targetRef = useRef(0)\r\n\r\n    const [paused, setPaused] = useState(false)\r\n\r\n    const pausedRef = useLatest(paused)\r\n\r\n    const periodRef = useLatest(period)\r\n\r\n    const height = (itemHeight + gap) * count - gap\r\n\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\r\n\r\n    useEffect(() => {\r\n        function listener(status: ScrollStatus) {\r\n            const y = status.offset.y\r\n            const a = y / (itemHeight + gap)\r\n            if (a % 1 <= 0.05) {\r\n                targetRef.current = Math.floor(a)\r\n            } else {\r\n                targetRef.current = Math.ceil(a)\r\n            }\r\n            clearTimeout(timeout.current)\r\n            timeout.current = setTimeout(() => {\r\n                setOffset(targetRef.current)\r\n            }, periodRef.current)\r\n        }\r\n        bar.current?.addListener(listener)\r\n        return () => {\r\n            bar.current?.removeListener(listener)\r\n        }\r\n    }, [])\r\n\r\n    useEffect(() => {\r\n        if (data.length <= count || paused === true) return\r\n        targetRef.current = (offset + 1) % (data.length + 1 - count)\r\n        timeout.current = setTimeout(() => {\r\n            setOffset(targetRef.current)\r\n        }, periodRef.current)\r\n        return () => clearTimeout(timeout.current)\r\n    }, [count, data.length, offset, paused])\r\n\r\n    useEffect(() => {\r\n        setOffset(0)\r\n    }, [itemHeight, count, data.length, animationTime, period, gap])\r\n\r\n    useEffect(() => {\r\n        if (pausedRef.current) return\r\n        bar.current?.scrollTo(0, offset * (itemHeight + gap), animationTime)\r\n    }, [offset])\r\n\r\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        setPaused(true)\r\n        onMouseEnter?.(e)\r\n    }\r\n\r\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        setPaused(false)\r\n        onMouseLeave?.(e)\r\n    }\r\n\r\n    return (\r\n        <Scroll scrollbar={bar} options={options} style={{ height, ...style }} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\r\n            {data.map((item, index, arr) => (\r\n                <div key={keyExtractor?.(item, index, arr) ?? index} style={{ height: itemHeight, marginTop: index === 0 ? 0 : `${gap}px` }}>\r\n                    {render(item, index, arr)}\r\n                </div>\r\n            ))}\r\n        </Scroll>\r\n    )\r\n}\r\n"],"mappings":"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"}
+{"version":3,"names":["css","useSize","clsx","getArray","useEffect","useRef","Scroll","jsx","_jsx","AutoScroll","props","count","itemHeight","animation","duration","onMouseEnter","onMouseLeave","gap","containerClassName","containerStyle","children","playOnMouseEnter","rest","bar","timeout","undefined","ele","size","pause","current","height","range","index","scrollHeight","length","scroll","target","clearTimeout","setTimeout","scrollTo","listener","status","y","offset","scrollToBottom","Math","abs","find","item","addListener","removeListener","onContainerMouseEnter","e","onContainerMouseLeave","ref","scrollbar","className","style"],"sources":["../../../src/components/AutoScroll.tsx"],"sourcesContent":["import { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx, getArray } from \"deepsea-tools\"\r\nimport { CSSProperties, FC, MouseEvent as ReactMouseEvent, useEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\r\nimport { Scroll, ScrollProps } from \"./Scroll\"\r\n\r\nexport interface SwiperScrollProps extends Omit<ScrollProps, \"scrollbar\"> {\r\n    /** 轮播的数据 */\r\n    count: number\r\n\r\n    /** 轮播元素的高度 */\r\n    itemHeight: number\r\n\r\n    /** 轮播动画的时间 */\r\n    animation: number\r\n\r\n    /** 每个元素的停留时间 */\r\n    duration: number\r\n\r\n    /** 元素之间的间距 */\r\n    gap?: number\r\n\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n\r\n    /** 在鼠标移入时是否继续播放 */\r\n    playOnMouseEnter?: boolean\r\n}\r\n\r\nexport const AutoScroll: FC<SwiperScrollProps> = props => {\r\n    const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, ...rest } = props\r\n    const bar = useRef<Scrollbar | null>(null)\r\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const size = useSize(ele)\r\n    const pause = useRef(false)\r\n\r\n    useEffect(() => {\r\n        if (playOnMouseEnter) pause.current = false\r\n    }, [playOnMouseEnter])\r\n\r\n    useEffect(() => {\r\n        if (!size || count === 0) return\r\n        const { height } = size\r\n        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\r\n        const scrollHeight = range[range.length - 1]\r\n        if (height >= scrollHeight) return\r\n        function scroll(target: number) {\r\n            clearTimeout(timeout.current)\r\n            timeout.current = setTimeout(() => {\r\n                if (pause.current) return scroll(target)\r\n                bar.current?.scrollTo(0, target, animation)\r\n            }, duration)\r\n        }\r\n        scroll(range[0])\r\n        function listener(status: ScrollStatus) {\r\n            const { y } = status.offset\r\n            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\r\n            const target = scrollToBottom ? 0 : range.find(item => item > y)!\r\n            scroll(target)\r\n        }\r\n        bar.current?.addListener(listener)\r\n        return () => {\r\n            clearTimeout(timeout.current)\r\n            bar.current?.removeListener(listener)\r\n            bar.current?.scrollTo(0, 0)\r\n        }\r\n    }, [size, count, itemHeight, gap, duration, animation])\r\n\r\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pause.current = true\r\n        onMouseEnter?.(e)\r\n    }\r\n\r\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pause.current = false\r\n        onMouseLeave?.(e)\r\n    }\r\n\r\n    return (\r\n        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\r\n            <div\r\n                className={clsx(\r\n                    css`\r\n                        display: flex;\r\n                        flex-direction: column;\r\n                        gap: var(--gap, 0);\r\n                        & > * {\r\n                            flex: none;\r\n                        }\r\n                    `,\r\n                    containerClassName\r\n                )}\r\n                style={{ \"--gap\": `${gap}px`, ...containerStyle } as CSSProperties}>\r\n                {children}\r\n            </div>\r\n        </Scroll>\r\n    )\r\n}\r\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { CSSProperties, ForwardedRef, HTMLAttributes } from "react";
+import { ForwardedRef, HTMLAttributes } from "react";
 import Scrollbar from "smooth-scrollbar";
 import type { ScrollbarOptions, ScrollListener } from "smooth-scrollbar/interfaces";
 export { default as Scrollbar } from "smooth-scrollbar";
@@ -10,17 +10,9 @@ export interface ScrollOptions extends Partial<ScrollbarOptions> {
 export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
     /** 滚动的配置 */
     options?: ScrollOptions;
-    /** 容器宽度 */
-    containerClassName?: string;
-    /** 容器样式 */
-    containerStyle?: CSSProperties;
     /** 滚动条实例 */
     scrollbar?: ForwardedRef<Scrollbar>;
     /** 滚动条滚动事件 */
     onScrollbar?: ScrollListener;
 }
-/**
- * 滚动条组件
- * @description 注意 children 不是直接渲染在组件上的，而是渲染在内部的容器上
- */
 export declare const Scroll: import("react").ForwardRefExoticComponent<ScrollProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/Scroll.js

@@ -5,15 +5,9 @@ import Scrollbar from "smooth-scrollbar";
 import { jsx as _jsx } from "react/jsx-runtime";
 export { default as Scrollbar } from "smooth-scrollbar";
 export * from "smooth-scrollbar/interfaces";
-/**
- * 滚动条组件
- * @description 注意 children 不是直接渲染在组件上的，而是渲染在内部的容器上
- */
 export const Scroll = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
-    containerClassName,
-    containerStyle,
     options,
     className,
     style,

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

@@ -1 +1 @@
-{"version":3,"names":["css","clsx","forwardRef","useEffect","useImperativeHandle","useRef","Scrollbar","jsx","_jsx","default","Scroll","props","ref","children","containerClassName","containerStyle","options","className","style","scrollbar","onScrollbar","rest","thumbWidth","scrollbarOptions","ele","bar","current","init","destroy","addListener","removeListener","undefined"],"sources":["../../../src/components/Scroll.tsx"],"sourcesContent":["import { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n    /** 滑块宽度 */\r\n    thumbWidth?: number\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 滚动的配置 */\r\n    options?: ScrollOptions\r\n    /** 容器宽度 */\r\n    containerClassName?: string\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n    /** 滚动条实例 */\r\n    scrollbar?: ForwardedRef<Scrollbar>\r\n    /** 滚动条滚动事件 */\r\n    onScrollbar?: ScrollListener\r\n}\r\n\r\n/**\r\n * 滚动条组件\r\n * @description 注意 children 不是直接渲染在组件上的，而是渲染在内部的容器上\r\n */\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n    const { children, containerClassName, containerStyle, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n    const { thumbWidth, ...scrollbarOptions } = options || {}\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useEffect(() => {\r\n        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n        return () => bar.current?.destroy()\r\n    }, [])\r\n\r\n    useEffect(() => {\r\n        if (!scrollbar) return\r\n        if (typeof scrollbar === \"function\") {\r\n            scrollbar(bar.current)\r\n            return () => scrollbar(null)\r\n        }\r\n        scrollbar.current = bar.current\r\n        return () => (scrollbar.current = null)\r\n    }, [scrollbar])\r\n\r\n    useEffect(() => {\r\n        if (!onScrollbar) return\r\n        bar.current?.addListener(onScrollbar)\r\n        return () => bar.current?.removeListener(onScrollbar)\r\n    }, [onScrollbar])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                typeof thumbWidth === \"number\" &&\r\n                    css`\r\n                        .scrollbar-track.scrollbar-track-x {\r\n                            height: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-thumb.scrollbar-thumb-x {\r\n                            height: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-track.scrollbar-track-y {\r\n                            width: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-thumb.scrollbar-thumb-y {\r\n                            width: var(--thumb-width);\r\n                        }\r\n                    `,\r\n                className\r\n            )}\r\n            style={\r\n                {\r\n                    \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : undefined,\r\n                    ...style\r\n                } as CSSProperties\r\n            }\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAAsCC,UAAU,EAAkBC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AACvH,OAAOC,SAAS,MAAM,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAExC,SAASC,OAAO,IAAIH,SAAS,QAAQ,kBAAkB;AACvD,cAAc,6BAA6B;AAoB3C;AACA;AACA;AACA;AACA,OAAO,MAAMI,MAAM,gBAAGR,UAAU,CAA8B,CAACS,KAAK,EAAEC,GAAG,KAAK;EAC1E,MAAM;IAAEC,QAAQ;IAAEC,kBAAkB;IAAEC,cAAc;IAAEC,OAAO;IAAEC,SAAS;IAAEC,KAAK;IAAEC,SAAS;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGV,KAAK;EAC1H,MAAM;IAAEW,UAAU;IAAE,GAAGC;EAAiB,CAAC,GAAGP,OAAO,IAAI,CAAC,CAAC;EACzD,MAAMQ,GAAG,GAAGnB,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAMoB,GAAG,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAE1CD,mBAAmB,CAACQ,GAAG,EAAE,MAAMY,GAAG,CAACE,OAAQ,EAAE,EAAE,CAAC;EAEhDvB,SAAS,CAAC,MAAM;IACZsB,GAAG,CAACC,OAAO,GAAGpB,SAAS,CAACqB,IAAI,CAACH,GAAG,CAACE,OAAO,EAAGH,gBAAgB,CAAC;IAC5D,OAAO,MAAME,GAAG,CAACC,OAAO,EAAEE,OAAO,CAAC,CAAC;EACvC,CAAC,EAAE,EAAE,CAAC;EAENzB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACgB,SAAS,EAAE;IAChB,IAAI,OAAOA,SAAS,KAAK,UAAU,EAAE;MACjCA,SAAS,CAACM,GAAG,CAACC,OAAO,CAAC;MACtB,OAAO,MAAMP,SAAS,CAAC,IAAI,CAAC;IAChC;IACAA,SAAS,CAACO,OAAO,GAAGD,GAAG,CAACC,OAAO;IAC/B,OAAO,MAAOP,SAAS,CAACO,OAAO,GAAG,IAAK;EAC3C,CAAC,EAAE,CAACP,SAAS,CAAC,CAAC;EAEfhB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACiB,WAAW,EAAE;IAClBK,GAAG,CAACC,OAAO,EAAEG,WAAW,CAACT,WAAW,CAAC;IACrC,OAAO,MAAMK,GAAG,CAACC,OAAO,EAAEI,cAAc,CAACV,WAAW,CAAC;EACzD,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,oBACIZ,IAAA;IACII,GAAG,EAAEY,GAAI;IACTP,SAAS,EAAEhB,IAAI,CACX,OAAOqB,UAAU,KAAK,QAAQ,IAC1BtB,GAAI;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,EACLiB,SACJ,CAAE;IACFC,KAAK,EACD;MACI,eAAe,EAAE,OAAOI,UAAU,KAAK,QAAQ,GAAI,GAAEA,UAAW,IAAG,GAAGS,SAAS;MAC/E,GAAGb;IACP,CACH;IAAA,GACGG,IAAI;IAAAR,QAAA,EACPA;EAAQ,CACR,CAAC;AAEd,CAAC,CAAC"}
+{"version":3,"names":["css","clsx","forwardRef","useEffect","useImperativeHandle","useRef","Scrollbar","jsx","_jsx","default","Scroll","props","ref","children","options","className","style","scrollbar","onScrollbar","rest","thumbWidth","scrollbarOptions","ele","bar","current","init","destroy","addListener","removeListener","undefined"],"sources":["../../../src/components/Scroll.tsx"],"sourcesContent":["import { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n    /** 滑块宽度 */\r\n    thumbWidth?: number\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 滚动的配置 */\r\n    options?: ScrollOptions\r\n    /** 滚动条实例 */\r\n    scrollbar?: ForwardedRef<Scrollbar>\r\n    /** 滚动条滚动事件 */\r\n    onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n    const { thumbWidth, ...scrollbarOptions } = options || {}\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useEffect(() => {\r\n        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n        return () => bar.current?.destroy()\r\n    }, [])\r\n\r\n    useEffect(() => {\r\n        if (!scrollbar) return\r\n        if (typeof scrollbar === \"function\") {\r\n            scrollbar(bar.current)\r\n            return () => scrollbar(null)\r\n        }\r\n        scrollbar.current = bar.current\r\n        return () => (scrollbar.current = null)\r\n    }, [scrollbar])\r\n\r\n    useEffect(() => {\r\n        if (!onScrollbar) return\r\n        bar.current?.addListener(onScrollbar)\r\n        return () => bar.current?.removeListener(onScrollbar)\r\n    }, [onScrollbar])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                typeof thumbWidth === \"number\" &&\r\n                    css`\r\n                        .scrollbar-track.scrollbar-track-x {\r\n                            height: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-thumb.scrollbar-thumb-x {\r\n                            height: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-track.scrollbar-track-y {\r\n                            width: var(--thumb-width);\r\n                        }\r\n\r\n                        .scrollbar-thumb.scrollbar-thumb-y {\r\n                            width: var(--thumb-width);\r\n                        }\r\n                    `,\r\n                className\r\n            )}\r\n            style={\r\n                {\r\n                    \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : undefined,\r\n                    ...style\r\n                } as CSSProperties\r\n            }\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAAsCC,UAAU,EAAkBC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AACvH,OAAOC,SAAS,MAAM,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAExC,SAASC,OAAO,IAAIH,SAAS,QAAQ,kBAAkB;AACvD,cAAc,6BAA6B;AAgB3C,OAAO,MAAMI,MAAM,gBAAGR,UAAU,CAA8B,CAACS,KAAK,EAAEC,GAAG,KAAK;EAC1E,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,SAAS;IAAEC,KAAK;IAAEC,SAAS;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGR,KAAK;EACtF,MAAM;IAAES,UAAU;IAAE,GAAGC;EAAiB,CAAC,GAAGP,OAAO,IAAI,CAAC,CAAC;EACzD,MAAMQ,GAAG,GAAGjB,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAMkB,GAAG,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EAE1CD,mBAAmB,CAACQ,GAAG,EAAE,MAAMU,GAAG,CAACE,OAAQ,EAAE,EAAE,CAAC;EAEhDrB,SAAS,CAAC,MAAM;IACZoB,GAAG,CAACC,OAAO,GAAGlB,SAAS,CAACmB,IAAI,CAACH,GAAG,CAACE,OAAO,EAAGH,gBAAgB,CAAC;IAC5D,OAAO,MAAME,GAAG,CAACC,OAAO,EAAEE,OAAO,CAAC,CAAC;EACvC,CAAC,EAAE,EAAE,CAAC;EAENvB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACc,SAAS,EAAE;IAChB,IAAI,OAAOA,SAAS,KAAK,UAAU,EAAE;MACjCA,SAAS,CAACM,GAAG,CAACC,OAAO,CAAC;MACtB,OAAO,MAAMP,SAAS,CAAC,IAAI,CAAC;IAChC;IACAA,SAAS,CAACO,OAAO,GAAGD,GAAG,CAACC,OAAO;IAC/B,OAAO,MAAOP,SAAS,CAACO,OAAO,GAAG,IAAK;EAC3C,CAAC,EAAE,CAACP,SAAS,CAAC,CAAC;EAEfd,SAAS,CAAC,MAAM;IACZ,IAAI,CAACe,WAAW,EAAE;IAClBK,GAAG,CAACC,OAAO,EAAEG,WAAW,CAACT,WAAW,CAAC;IACrC,OAAO,MAAMK,GAAG,CAACC,OAAO,EAAEI,cAAc,CAACV,WAAW,CAAC;EACzD,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,oBACIV,IAAA;IACII,GAAG,EAAEU,GAAI;IACTP,SAAS,EAAEd,IAAI,CACX,OAAOmB,UAAU,KAAK,QAAQ,IAC1BpB,GAAI;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,EACLe,SACJ,CAAE;IACFC,KAAK,EACD;MACI,eAAe,EAAE,OAAOI,UAAU,KAAK,QAAQ,GAAI,GAAEA,UAAW,IAAG,GAAGS,SAAS;MAC/E,GAAGb;IACP,CACH;IAAA,GACGG,IAAI;IAAAN,QAAA,EACPA;EAAQ,CACR,CAAC;AAEd,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "deepsea-components",
-    "version": "2.8.0-beta.20240516105156",
+    "version": "2.8.0",
     "description": "格数科技自用组件库",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",

package/src/components/AutoScroll.tsx

@@ -1,113 +1,106 @@
-import { HTMLAttributes, ReactNode, useEffect, useRef, useState, MouseEvent as ReactMouseEvent } from "react"
+import { css } from "@emotion/css"
+import { useSize } from "ahooks"
+import { clsx, getArray } from "deepsea-tools"
+import { CSSProperties, FC, MouseEvent as ReactMouseEvent, useEffect, useRef } from "react"
 import Scrollbar from "smooth-scrollbar"
 import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
-import { Scroll, ScrollOptions } from "./Scroll"
-import { useLatest } from "ahooks"
+import { Scroll, ScrollProps } from "./Scroll"
 
-export interface SwiperScrollProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+export interface SwiperScrollProps extends Omit<ScrollProps, "scrollbar"> {
+    /** 轮播的数据 */
     count: number
 
-    /** 轮播元素的长度 */
+    /** 轮播元素的高度 */
     itemHeight: number
 
-    /** 轮播的数据 */
-    data: T[]
-
-    /** key 生成器 */
-    keyExtractor?: (item: T, index: number, data: T[]) => string | number
-
-    /** 轮播元素的渲染函数 */
-    render: (item: T, index: number, data: T[]) => ReactNode
-
     /** 轮播动画的时间 */
-    animationTime: number
+    animation: number
 
     /** 每个元素的停留时间 */
-    period: number
+    duration: number
 
     /** 元素之间的间距 */
     gap?: number
 
-    /** 滚动条选项 */
-    options?: ScrollOptions
-}
-
-export function AutoScroll<T>(props: SwiperScrollProps<T>) {
-    const { style, itemHeight, count, data, render, animationTime, period, keyExtractor, options, onMouseEnter, onMouseLeave, gap = 0, ...rest } = props
+    /** 容器类名 */
+    containerClassName?: string
 
-    const [offset, setOffset] = useState(0)
+    /** 容器样式 */
+    containerStyle?: CSSProperties
 
-    const offsetRef = useLatest(offset)
-
-    const targetRef = useRef(0)
-
-    const [paused, setPaused] = useState(false)
-
-    const pausedRef = useLatest(paused)
-
-    const periodRef = useLatest(period)
-
-    const height = (itemHeight + gap) * count - gap
+    /** 在鼠标移入时是否继续播放 */
+    playOnMouseEnter?: boolean
+}
 
+export const AutoScroll: FC<SwiperScrollProps> = props => {
+    const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, ...rest } = props
     const bar = useRef<Scrollbar | null>(null)
-
     const timeout = useRef<NodeJS.Timeout | undefined>(undefined)
+    const ele = useRef<HTMLDivElement>(null)
+    const size = useSize(ele)
+    const pause = useRef(false)
 
     useEffect(() => {
-        function listener(status: ScrollStatus) {
-            const y = status.offset.y
-            const a = y / (itemHeight + gap)
-            if (a % 1 <= 0.05) {
-                targetRef.current = Math.floor(a)
-            } else {
-                targetRef.current = Math.ceil(a)
-            }
+        if (playOnMouseEnter) pause.current = false
+    }, [playOnMouseEnter])
+
+    useEffect(() => {
+        if (!size || count === 0) return
+        const { height } = size
+        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))
+        const scrollHeight = range[range.length - 1]
+        if (height >= scrollHeight) return
+        function scroll(target: number) {
             clearTimeout(timeout.current)
             timeout.current = setTimeout(() => {
-                setOffset(targetRef.current)
-            }, periodRef.current)
+                if (pause.current) return scroll(target)
+                bar.current?.scrollTo(0, target, animation)
+            }, duration)
+        }
+        scroll(range[0])
+        function listener(status: ScrollStatus) {
+            const { y } = status.offset
+            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05
+            const target = scrollToBottom ? 0 : range.find(item => item > y)!
+            scroll(target)
         }
         bar.current?.addListener(listener)
         return () => {
+            clearTimeout(timeout.current)
             bar.current?.removeListener(listener)
+            bar.current?.scrollTo(0, 0)
         }
-    }, [])
-
-    useEffect(() => {
-        if (data.length <= count || paused === true) return
-        targetRef.current = (offset + 1) % (data.length + 1 - count)
-        timeout.current = setTimeout(() => {
-            setOffset(targetRef.current)
-        }, periodRef.current)
-        return () => clearTimeout(timeout.current)
-    }, [count, data.length, offset, paused])
-
-    useEffect(() => {
-        setOffset(0)
-    }, [itemHeight, count, data.length, animationTime, period, gap])
-
-    useEffect(() => {
-        if (pausedRef.current) return
-        bar.current?.scrollTo(0, offset * (itemHeight + gap), animationTime)
-    }, [offset])
+    }, [size, count, itemHeight, gap, duration, animation])
 
     function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
-        setPaused(true)
+        if (playOnMouseEnter) return
+        pause.current = true
         onMouseEnter?.(e)
     }
 
     function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
-        setPaused(false)
+        if (playOnMouseEnter) return
+        pause.current = false
         onMouseLeave?.(e)
     }
 
     return (
-        <Scroll scrollbar={bar} options={options} style={{ height, ...style }} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>
-            {data.map((item, index, arr) => (
-                <div key={keyExtractor?.(item, index, arr) ?? index} style={{ height: itemHeight, marginTop: index === 0 ? 0 : `${gap}px` }}>
-                    {render(item, index, arr)}
-                </div>
-            ))}
+        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>
+            <div
+                className={clsx(
+                    css`
+                        display: flex;
+                        flex-direction: column;
+                        gap: var(--gap, 0);
+                        & > * {
+                            flex: none;
+                        }
+                    `,
+                    containerClassName
+                )}
+                style={{ "--gap": `${gap}px`, ...containerStyle } as CSSProperties}>
+                {children}
+            </div>
         </Scroll>
     )
 }

package/src/components/Scroll.tsx

@@ -14,22 +14,14 @@ export interface ScrollOptions extends Partial<ScrollbarOptions> {
 export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
     /** 滚动的配置 */
     options?: ScrollOptions
-    /** 容器宽度 */
-    containerClassName?: string
-    /** 容器样式 */
-    containerStyle?: CSSProperties
     /** 滚动条实例 */
     scrollbar?: ForwardedRef<Scrollbar>
     /** 滚动条滚动事件 */
     onScrollbar?: ScrollListener
 }
 
-/**
- * 滚动条组件
- * @description 注意 children 不是直接渲染在组件上的，而是渲染在内部的容器上
- */
 export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
-    const { children, containerClassName, containerStyle, options, className, style, scrollbar, onScrollbar, ...rest } = props
+    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props
     const { thumbWidth, ...scrollbarOptions } = options || {}
     const ele = useRef<HTMLDivElement>(null)
     const bar = useRef<Scrollbar | null>(null)