deepsea-components 5.0.7 → 5.1.1

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

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

package/dist/cjs/components/InfiniteScroll.js

@@ -0,0 +1,133 @@
+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/InfiniteScroll.tsx
+var InfiniteScroll_exports = {};
+__export(InfiniteScroll_exports, {
+  InfiniteScroll: () => InfiniteScroll
+});
+module.exports = __toCommonJS(InfiniteScroll_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 InfiniteScroll = (0, import_react.forwardRef)((props, ref) => {
+  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);
+  (0, import_react.useImperativeHandle)(ref, () => wrapper.current, [wrapper.current]);
+  const container = (0, import_react.useRef)(null);
+  const containerSize = (0, import_ahooks.useSize)(container);
+  function bigger(containerSize2, wrapperSize2) {
+    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;
+    animation.current = ele.current?.animate(
+      {
+        transform: direction === "vertical" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]
+      },
+      { duration, iterations: Infinity }
+    );
+    return () => animation.current?.cancel();
+  }, [wrapperSize, containerSize, overflow, direction, duration]);
+  function enter(e) {
+    if (pauseOnHover)
+      animation.current?.pause();
+    onMouseEnter?.(e);
+  }
+  function leave(e) {
+    if (pauseOnHover)
+      animation.current?.play();
+    onMouseLeave?.(e);
+  }
+  (0, import_react.useEffect)(() => {
+    if (!pauseOnHover)
+      animation.current?.play();
+  }, [animation.current, pauseOnHover]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: wrapper,
+      className: (0, import_deepsea_tools.clsx)(
+        import_css.css`
+                    position: relative;
+                    overflow: hidden;
+                `,
+        className
+      ),
+      onMouseEnter: enter,
+      onMouseLeave: leave,
+      ...rest
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: ele,
+        style: {
+          position: "absolute",
+          width: direction === "vertical" ? "100%" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),
+          height: direction === "horizontal" ? "100%" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width)
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: container,
+          className: (0, import_deepsea_tools.clsx)(
+            import_css.css`
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            ${direction === "vertical" ? "width: 100%;" : "height: 100%;"}
+                        `,
+            containerClassName
+          ),
+          style: containerStyle
+        },
+        children
+      ),
+      overflow && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref: container,
+          className: (0, import_deepsea_tools.clsx)(
+            import_css.css`
+                                position: absolute;
+                                right: 0;
+                                bottom: 0;
+                                ${direction === "vertical" ? "width: 100%;" : "height: 100%;"}
+                            `,
+            containerClassName
+          ),
+          style: containerStyle
+        },
+        children
+      )
+    )
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InfiniteScroll
+});
+//# sourceMappingURL=InfiniteScroll.js.map

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

@@ -0,0 +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, 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

@@ -4,6 +4,7 @@ export * from "./components/AutoSizeTextarea";
 export * from "./components/CircleText";
 export * from "./components/Flow";
 export * from "./components/HlsPlayer";
+export * from "./components/InfiniteScroll";
 export * from "./components/InputFile";
 export * from "./components/LoopSwiper";
 export * from "./components/Ring";

package/dist/cjs/index.js

@@ -22,6 +22,7 @@ __reExport(src_exports, require("./components/AutoSizeTextarea"), module.exports
 __reExport(src_exports, require("./components/CircleText"), module.exports);
 __reExport(src_exports, require("./components/Flow"), module.exports);
 __reExport(src_exports, require("./components/HlsPlayer"), module.exports);
+__reExport(src_exports, require("./components/InfiniteScroll"), module.exports);
 __reExport(src_exports, require("./components/InputFile"), module.exports);
 __reExport(src_exports, require("./components/LoopSwiper"), module.exports);
 __reExport(src_exports, require("./components/Ring"), module.exports);
@@ -39,6 +40,7 @@ __reExport(src_exports, require("./components/Trapezium"), module.exports);
   ...require("./components/CircleText"),
   ...require("./components/Flow"),
   ...require("./components/HlsPlayer"),
+  ...require("./components/InfiniteScroll"),
   ...require("./components/InputFile"),
   ...require("./components/LoopSwiper"),
   ...require("./components/Ring"),

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/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,mCANd;AAOA,wBAAc,oCAPd;AAQA,wBAAc,8BARd;AASA,wBAAc,gCATd;AAUA,wBAAc,qCAVd;AAWA,wBAAc,kCAXd;AAYA,wBAAc,uCAZd;AAaA,wBAAc,uCAbd;AAcA,wBAAc,mCAdd;",
+  "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;",
   "names": []
 }

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutoFit.d.ts","sourceRoot":"","sources":["AutoFit.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,cAAc,EAAqE,MAAM,OAAO,CAAA;AAGrH,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAA;CACjD;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,yGAqElB,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutoScroll.d.ts","sourceRoot":"","sources":["AutoScroll.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAqF,MAAM,OAAO,CAAA;AAIxH,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAA;AAE9C,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAChD,cAAc;IACd,KAAK,EAAE,MAAM,CAAA;IAEb,cAAc;IACd,UAAU,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ,WAAW;IACX,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B,WAAW;IACX,cAAc,CAAC,EAAE,aAAa,CAAA;IAE9B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,UAAU,4GA4ErB,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSizeTextarea.d.ts","sourceRoot":"","sources":["AutoSizeTextarea.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,sBAAsB,EAA0D,MAAM,OAAO,CAAA;AAGlH;;GAEG;AACH,eAAO,MAAM,gBAAgB,6IAsC3B,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"CircleText.d.ts","sourceRoot":"","sources":["CircleText.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAY,cAAc,EAAE,MAAM,OAAO,CAAA;AAEpD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACtF,eAAe;IACf,KAAK,EAAE,MAAM,CAAA;IACb,eAAe;IACf,MAAM,EAAE,MAAM,CAAA;IACd,qBAAqB;IACrB,MAAM,EAAE,MAAM,CAAA;IACd,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAC7B,eAAe;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC,CAAA;IAC1D,YAAY;IACZ,QAAQ,EAAE,MAAM,CAAA;CACnB;AAED,WAAW;AACX,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA2B1C,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.d.ts","sourceRoot":"","sources":["Flow.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"HlsPlayer.d.ts","sourceRoot":"","sources":["HlsPlayer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAsD,MAAM,OAAO,CAAA;AAE/F,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACtF,GAAG,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,SAAS,6GAwBpB,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +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","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/components/InputFile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputFile.d.ts","sourceRoot":"","sources":["InputFile.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoopSwiper.d.ts","sourceRoot":"","sources":["LoopSwiper.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAc,cAAc,EAAoD,MAAM,OAAO,CAAA;AAEnH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAA;CAC7B;AAED,aAAa;AACb,eAAO,MAAM,UAAU,4GAsFrB,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Ring.d.ts","sourceRoot":"","sources":["Ring.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,cAAc,EAAE,MAAM,OAAO,CAAA;AAElD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7D,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;CACrB;AAED,WAAW;AACX,eAAO,MAAM,IAAI,sGAQf,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Scroll.d.ts","sourceRoot":"","sources":["Scroll.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAc,cAAc,EAA2D,MAAM,OAAO,CAAA;AACxI,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAEnF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAA;AACvD,cAAc,6BAA6B,CAAA;AAE3C,MAAM,WAAW,aAAc,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IAC5D,WAAW;IACX,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,aAAa;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC7B,aAAa;IACb,UAAU,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAC7C,cAAc;IACd,UAAU,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;CAChD;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,YAAY;IACZ,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,YAAY;IACZ,SAAS,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACnC,cAAc;IACd,WAAW,CAAC,EAAE,cAAc,CAAA;CAC/B;AAED,eAAO,MAAM,MAAM,wGA+DjB,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionRing.d.ts","sourceRoot":"","sources":["SectionRing.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE1C,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuB5C,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["Skeleton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,cAAc,EAAE,MAAM,OAAO,CAAA;AAElD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,QAAQ,0GAmCnB,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransitionBox.d.ts","sourceRoot":"","sources":["TransitionBox.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAc,cAAc,EAA+B,MAAM,OAAO,CAAA;AAElG,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,cAAc;AACd,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAqB/C,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransitionNum.d.ts","sourceRoot":"","sources":["TransitionNum.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAsD,MAAM,OAAO,CAAA;AAExG,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxF,WAAW;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe;IACf,MAAM,EAAE,MAAM,CAAA;IACd,kBAAkB;IAClB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,SAAS;IACT,GAAG,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;CACvC;AAED,MAAM,WAAW,gBAAgB;IAC7B,GAAG,IAAI,MAAM,CAAA;CAChB;AAED,aAAa;AACb,eAAO,MAAM,aAAa,+GAgCxB,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Trapezium.d.ts","sourceRoot":"","sources":["Trapezium.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAA;AAGlD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,MAAM,CAAA;CACvB;AAED,WAAW;AACX,eAAO,MAAM,SAAS,2GA2CpB,CAAA"}

package/dist/esm/index.d.ts

@@ -4,6 +4,7 @@ export * from "./components/AutoSizeTextarea";
 export * from "./components/CircleText";
 export * from "./components/Flow";
 export * from "./components/HlsPlayer";
+export * from "./components/InfiniteScroll";
 export * from "./components/InputFile";
 export * from "./components/LoopSwiper";
 export * from "./components/Ring";

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

@@ -0,0 +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"}

package/dist/esm/index.js

@@ -4,6 +4,7 @@ export * from "./components/AutoSizeTextarea";
 export * from "./components/CircleText";
 export * from "./components/Flow";
 export * from "./components/HlsPlayer";
+export * from "./components/InfiniteScroll";
 export * from "./components/InputFile";
 export * from "./components/LoopSwiper";
 export * from "./components/Ring";

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/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"}
+{"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,MAAM,MAAM,eAAe,GAAG,KAAK,MAAM,EAAE,CAAA;AAE3C,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;AAE1D,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACvD,CAAC,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAA;CACzC;AAQD,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,CAEtE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,aAAa,GAAG,aAAa,CAQ5H;AAED,wBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAEzE"}

package/package.json

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

package/src/components/InfiniteScroll.tsx

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

package/src/index.tsx

@@ -4,6 +4,7 @@ export * from "./components/AutoSizeTextarea"
 export * from "./components/CircleText"
 export * from "./components/Flow"
 export * from "./components/HlsPlayer"
+export * from "./components/InfiniteScroll"
 export * from "./components/InputFile"
 export * from "./components/LoopSwiper"
 export * from "./components/Ring"