deepsea-components 5.10.3 → 5.10.4

package/dist/cjs/components/AutoScroll.js

@@ -25,7 +25,7 @@ __export(AutoScroll_exports, {
 module.exports = __toCommonJS(AutoScroll_exports);
 var import_react = require("react");
 var import_css = require("@emotion/css");
-var import_ahooks = require("ahooks");
+var import_soda_hooks = require("soda-hooks");
 var import_deepsea_tools = require("deepsea-tools");
 var import_utils = require("../utils");
 var import_Scroll = require("./Scroll");
@@ -49,7 +49,7 @@ var AutoScroll = (0, import_react.forwardRef)((props, ref) => {
   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 size = (0, import_soda_hooks.useSize)(ele);
   const pausedRef = (0, import_react.useRef)(false);
   const pausedProps = (0, import_react.useRef)(paused);
   pausedProps.current = paused;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/AutoScroll.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx, getArray } from \"deepsea-tools\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nimport { Scroll, ScrollProps } from \"./Scroll\"\n\nexport interface AutoScrollProps extends ScrollProps {\n    /** 轮播元素的个数 */\n    count: number\n\n    /** 轮播元素的高度 */\n    itemHeight: number\n\n    /**\n     * 轮播动画的时间，单位毫秒\n     * @default 1000\n     */\n    animation?: number\n\n    /**\n     * 每个元素的停留时间，单位毫秒\n     * @default 3000\n     */\n    duration?: number\n\n    /**\n     * 元素之间的间距\n     * @default 0\n     */\n    gap?: number\n\n    /** 容器类名 */\n    containerClassName?: string\n\n    /** 容器样式 */\n    containerStyle?: CSSProperties\n\n    /**\n     * 在鼠标移入时是否继续播放\n     * @default false\n     */\n    playOnMouseEnter?: boolean\n\n    /**\n     * 是否暂停\n     * @default false\n     */\n    paused?: boolean\n}\n\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\n    const {\n        count,\n        itemHeight,\n        animation = 1000,\n        duration = 3000,\n        onMouseEnter,\n        onMouseLeave,\n        gap = 0,\n        containerClassName,\n        containerStyle,\n        children,\n        playOnMouseEnter,\n        scrollbar,\n        paused,\n        ...rest\n    } = props\n    const bar = useRef<Scrollbar | null>(null)\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\n    const ele = useRef<HTMLDivElement>(null)\n    const size = useSize(ele)\n    const pausedRef = useRef(false)\n    const pausedProps = useRef(paused)\n    pausedProps.current = paused\n\n    useImperativeHandle(ref, () => ele.current!, [])\n    useImperativeHandle(scrollbar, () => bar.current!, [])\n\n    useEffect(() => {\n        if (playOnMouseEnter) pausedRef.current = false\n    }, [playOnMouseEnter])\n\n    useEffect(() => {\n        if (!size || count === 0) return\n        const { height } = size\n        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\n        const scrollHeight = range[range.length - 1]\n        if (height >= scrollHeight) return\n        function scroll(target: number) {\n            clearTimeout(timeout.current)\n            timeout.current = setTimeout(() => {\n                if (pausedRef.current || pausedProps.current) return scroll(target)\n                bar.current?.scrollTo(0, target, animation)\n            }, duration)\n        }\n        scroll(range[0])\n        function listener(status: ScrollStatus) {\n            const { y } = status.offset\n            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\n            const target = scrollToBottom ? 0 : range.find(item => item > y)!\n            scroll(target)\n        }\n        bar.current?.addListener(listener)\n        return () => {\n            clearTimeout(timeout.current)\n            bar.current?.removeListener(listener)\n            bar.current?.scrollTo(0, 0)\n        }\n    }, [size, count, itemHeight, gap, duration, animation])\n\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (playOnMouseEnter) return\n        pausedRef.current = true\n        onMouseEnter?.(e)\n    }\n\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (playOnMouseEnter) return\n        pausedRef.current = false\n        onMouseLeave?.(e)\n    }\n\n    return (\n        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\n            <div\n                className={clsx(\n                    css`\n                        display: flex;\n                        flex-direction: column;\n                        gap: var(--gap, 0);\n                        & > * {\n                            flex: none;\n                        }\n                    `,\n                    containerClassName,\n                )}\n                style={transformCSSVariable({ gap: px(gap) }, containerStyle)}\n            >\n                {children}\n            </div>\n        </Scroll>\n    )\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAiH;AACjH,iBAAoB;AACpB,oBAAwB;AACxB,2BAA+B;AAI/B,mBAAyC;AAEzC,oBAAoC;AA8C7B,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,cAAU,qBAAmC,MAAS;AAC5D,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,WAAO,uBAAQ,GAAG;AACxB,QAAM,gBAAY,qBAAO,KAAK;AAC9B,QAAM,kBAAc,qBAAO,MAAM;AACjC,cAAY,UAAU;AAEtB,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAC/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI;AAAkB,gBAAU,UAAU;AAAA,EAC9C,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,UAAU,WAAW,YAAY;AAAS,iBAAO,OAAO,MAAM;AAClE,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,cAAU,UAAU;AACpB,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,cAAU,UAAU;AACpB,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,WAAO,mCAAqB,EAAE,SAAK,iBAAG,GAAG,EAAE,GAAG,cAAc;AAAA;AAAA,IAE3D;AAAA,EACL,CACJ;AAER,CAAC;",
+  "sourcesContent": ["\"use client\"\n\nimport { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"soda-hooks\"\nimport { clsx, getArray } from \"deepsea-tools\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nimport { Scroll, ScrollProps } from \"./Scroll\"\n\nexport interface AutoScrollProps extends ScrollProps {\n    /** 轮播元素的个数 */\n    count: number\n\n    /** 轮播元素的高度 */\n    itemHeight: number\n\n    /**\n     * 轮播动画的时间，单位毫秒\n     * @default 1000\n     */\n    animation?: number\n\n    /**\n     * 每个元素的停留时间，单位毫秒\n     * @default 3000\n     */\n    duration?: number\n\n    /**\n     * 元素之间的间距\n     * @default 0\n     */\n    gap?: number\n\n    /** 容器类名 */\n    containerClassName?: string\n\n    /** 容器样式 */\n    containerStyle?: CSSProperties\n\n    /**\n     * 在鼠标移入时是否继续播放\n     * @default false\n     */\n    playOnMouseEnter?: boolean\n\n    /**\n     * 是否暂停\n     * @default false\n     */\n    paused?: boolean\n}\n\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\n    const {\n        count,\n        itemHeight,\n        animation = 1000,\n        duration = 3000,\n        onMouseEnter,\n        onMouseLeave,\n        gap = 0,\n        containerClassName,\n        containerStyle,\n        children,\n        playOnMouseEnter,\n        scrollbar,\n        paused,\n        ...rest\n    } = props\n    const bar = useRef<Scrollbar | null>(null)\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\n    const ele = useRef<HTMLDivElement>(null)\n    const size = useSize(ele)\n    const pausedRef = useRef(false)\n    const pausedProps = useRef(paused)\n    pausedProps.current = paused\n\n    useImperativeHandle(ref, () => ele.current!, [])\n    useImperativeHandle(scrollbar, () => bar.current!, [])\n\n    useEffect(() => {\n        if (playOnMouseEnter) pausedRef.current = false\n    }, [playOnMouseEnter])\n\n    useEffect(() => {\n        if (!size || count === 0) return\n        const { height } = size\n        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\n        const scrollHeight = range[range.length - 1]\n        if (height >= scrollHeight) return\n        function scroll(target: number) {\n            clearTimeout(timeout.current)\n            timeout.current = setTimeout(() => {\n                if (pausedRef.current || pausedProps.current) return scroll(target)\n                bar.current?.scrollTo(0, target, animation)\n            }, duration)\n        }\n        scroll(range[0])\n        function listener(status: ScrollStatus) {\n            const { y } = status.offset\n            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\n            const target = scrollToBottom ? 0 : range.find(item => item > y)!\n            scroll(target)\n        }\n        bar.current?.addListener(listener)\n        return () => {\n            clearTimeout(timeout.current)\n            bar.current?.removeListener(listener)\n            bar.current?.scrollTo(0, 0)\n        }\n    }, [size, count, itemHeight, gap, duration, animation])\n\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (playOnMouseEnter) return\n        pausedRef.current = true\n        onMouseEnter?.(e)\n    }\n\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (playOnMouseEnter) return\n        pausedRef.current = false\n        onMouseLeave?.(e)\n    }\n\n    return (\n        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\n            <div\n                className={clsx(\n                    css`\n                        display: flex;\n                        flex-direction: column;\n                        gap: var(--gap, 0);\n                        & > * {\n                            flex: none;\n                        }\n                    `,\n                    containerClassName,\n                )}\n                style={transformCSSVariable({ gap: px(gap) }, containerStyle)}\n            >\n                {children}\n            </div>\n        </Scroll>\n    )\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAiH;AACjH,iBAAoB;AACpB,wBAAwB;AACxB,2BAA+B;AAI/B,mBAAyC;AAEzC,oBAAoC;AA8C7B,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,cAAU,qBAAmC,MAAS;AAC5D,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,WAAO,2BAAQ,GAAG;AACxB,QAAM,gBAAY,qBAAO,KAAK;AAC9B,QAAM,kBAAc,qBAAO,MAAM;AACjC,cAAY,UAAU;AAEtB,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAC/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI;AAAkB,gBAAU,UAAU;AAAA,EAC9C,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,UAAU,WAAW,YAAY;AAAS,iBAAO,OAAO,MAAM;AAClE,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,cAAU,UAAU;AACpB,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,cAAU,UAAU;AACpB,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,WAAO,mCAAqB,EAAE,SAAK,iBAAG,GAAG,EAAE,GAAG,cAAc;AAAA;AAAA,IAE3D;AAAA,EACL,CACJ;AAER,CAAC;",
   "names": []
 }

package/dist/cjs/components/CopyButton.js

@@ -35,14 +35,14 @@ __export(CopyButton_exports, {
 });
 module.exports = __toCommonJS(CopyButton_exports);
 var import_react = require("react");
-var import_ahooks = require("ahooks");
+var import_soda_hooks = require("soda-hooks");
 var import_clipboard = __toESM(require("clipboard"));
 var import_clipboard2 = require("clipboard");
 var CopyButton = (0, import_react.forwardRef)((props, ref) => {
   const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props;
   const ele = (0, import_react.useRef)(null);
-  const onCopySuccess = (0, import_ahooks.useLatest)(_onCoptSuccess);
-  const onCopyError = (0, import_ahooks.useLatest)(_onCopyError);
+  const onCopySuccess = (0, import_soda_hooks.useLatest)(_onCoptSuccess);
+  const onCopyError = (0, import_soda_hooks.useLatest)(_onCopyError);
   (0, import_react.useImperativeHandle)(ref, () => ele.current, [ele.current]);
   (0, import_react.useEffect)(() => {
     const clipboard = new import_clipboard.default(ele.current);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/CopyButton.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { useLatest } from \"ahooks\"\nimport ClipboardJS, { Event } from \"clipboard\"\n\nexport { Event } from \"clipboard\"\n\nexport type CopyButtonProps = ComponentPropsWithoutRef<\"button\"> & {\n    text?: string\n    onCopySuccess?: (e: Event) => void\n    onCopyError?: (e: Event) => void\n}\n\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {\n    const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props\n    const ele = useRef<HTMLButtonElement>(null)\n    const onCopySuccess = useLatest(_onCoptSuccess)\n    const onCopyError = useLatest(_onCopyError)\n\n    useImperativeHandle(ref, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        const clipboard = new ClipboardJS(ele.current!)\n        clipboard.on(\"success\", event => onCopySuccess.current?.(event))\n        clipboard.on(\"error\", event => onCopyError.current?.(event))\n        return () => clipboard.destroy()\n    }, [])\n\n    return <button ref={ele} {...rest} data-clipboard-text={text} />\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA6F;AAC7F,oBAA0B;AAC1B,uBAAmC;AAEnC,IAAAA,oBAAsB;AAQf,IAAM,iBAAa,yBAA+C,CAAC,OAAO,QAAQ;AACrF,QAAM,EAAE,MAAM,eAAe,gBAAgB,aAAa,cAAc,GAAG,KAAK,IAAI;AACpF,QAAM,UAAM,qBAA0B,IAAI;AAC1C,QAAM,oBAAgB,yBAAU,cAAc;AAC9C,QAAM,kBAAc,yBAAU,YAAY;AAE1C,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,IAAI,OAAO,CAAC;AAE1D,8BAAU,MAAM;AACZ,UAAM,YAAY,IAAI,iBAAAC,QAAY,IAAI,OAAQ;AAC9C,cAAU,GAAG,WAAW,WAAS,cAAc,UAAU,KAAK,CAAC;AAC/D,cAAU,GAAG,SAAS,WAAS,YAAY,UAAU,KAAK,CAAC;AAC3D,WAAO,MAAM,UAAU,QAAQ;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SAAO,oCAAC,YAAO,KAAK,KAAM,GAAG,MAAM,uBAAqB,MAAM;AAClE,CAAC;",
+  "sourcesContent": ["\"use client\"\n\nimport { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { useLatest } from \"soda-hooks\"\nimport ClipboardJS, { Event } from \"clipboard\"\n\nexport { Event } from \"clipboard\"\n\nexport type CopyButtonProps = ComponentPropsWithoutRef<\"button\"> & {\n    text?: string\n    onCopySuccess?: (e: Event) => void\n    onCopyError?: (e: Event) => void\n}\n\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {\n    const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props\n    const ele = useRef<HTMLButtonElement>(null)\n    const onCopySuccess = useLatest(_onCoptSuccess)\n    const onCopyError = useLatest(_onCopyError)\n\n    useImperativeHandle(ref, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        const clipboard = new ClipboardJS(ele.current!)\n        clipboard.on(\"success\", event => onCopySuccess.current?.(event))\n        clipboard.on(\"error\", event => onCopyError.current?.(event))\n        return () => clipboard.destroy()\n    }, [])\n\n    return <button ref={ele} {...rest} data-clipboard-text={text} />\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA6F;AAC7F,wBAA0B;AAC1B,uBAAmC;AAEnC,IAAAA,oBAAsB;AAQf,IAAM,iBAAa,yBAA+C,CAAC,OAAO,QAAQ;AACrF,QAAM,EAAE,MAAM,eAAe,gBAAgB,aAAa,cAAc,GAAG,KAAK,IAAI;AACpF,QAAM,UAAM,qBAA0B,IAAI;AAC1C,QAAM,oBAAgB,6BAAU,cAAc;AAC9C,QAAM,kBAAc,6BAAU,YAAY;AAE1C,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,IAAI,OAAO,CAAC;AAE1D,8BAAU,MAAM;AACZ,UAAM,YAAY,IAAI,iBAAAC,QAAY,IAAI,OAAQ;AAC9C,cAAU,GAAG,WAAW,WAAS,cAAc,UAAU,KAAK,CAAC;AAC/D,cAAU,GAAG,SAAS,WAAS,YAAY,UAAU,KAAK,CAAC;AAC3D,WAAO,MAAM,UAAU,QAAQ;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SAAO,oCAAC,YAAO,KAAK,KAAM,GAAG,MAAM,uBAAqB,MAAM;AAClE,CAAC;",
   "names": ["import_clipboard", "ClipboardJS"]
 }

package/dist/cjs/components/Flow.js

@@ -27,7 +27,7 @@ __export(Flow_exports, {
 });
 module.exports = __toCommonJS(Flow_exports);
 var import_css = require("@emotion/css");
-var import_ahooks = require("ahooks");
+var import_soda_hooks = require("soda-hooks");
 var import_deepsea_tools = require("deepsea-tools");
 var import_react = require("react");
 var import_utils = require("../utils");
@@ -201,7 +201,7 @@ function Flow(props) {
     ...rest
   } = props;
   const ele = (0, import_react.useRef)(null);
-  const size = (0, import_ahooks.useSize)(ele);
+  const size = (0, import_soda_hooks.useSize)(ele);
   const width = (0, import_react.useRef)(size?.width || 0);
   if (size && size.width !== 0)
     width.current = size.width;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Flow.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from \"react\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nexport interface FlowSizeData {\n    /** 容器宽度 */\n    width: number\n    /** 容器高度 */\n    height: number\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /** 列间距 */\n    columnGap: number\n    /** 列数 */\n    columnCount: number\n    /** 行间距 */\n    rowGap: number\n    /** 行数 */\n    rowCount: number\n    /** 元素格数 */\n    itemCount: number\n    /** 最大行数 */\n    maxRows: number | null\n    /** 是否有元素被隐藏 */\n    overflow: boolean\n}\n\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /**\n     * 列间距\n     * 1. 如果是数字，表示列间距是固定的\n     * 2. 如果是 auto，表示会在尽可能放进更多列的情况下，列间距是平均的\n     * 2. 如果是数组，表示列间距是区间的，第一个元素是最小值，第二个元素是最大值\n     */\n    columnGap?: number | \"auto\" | [number | \"auto\", number | \"auto\"]\n    /** 行间距 */\n    rowGap?: number\n    gap?: number\n    /** 最大行数 */\n    maxRows?: number | null\n    /** 源数据 */\n    data?: T[]\n    /** 渲染 */\n    render: (item: T, index: number, arr: T[]) => ReactNode\n    /** key释放器，默认为 index */\n    keyExactor?: (item: T, index: number, arr: T[]) => Key\n    /**\n     * 渲染的元素由两层容器包裹，外层容器类名\n     */\n    wrapperClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，外层容器样式\n     */\n    wrapperStyle?: CSSProperties\n    /**\n     * 渲染的元素由两层容器包裹，内层容器类名\n     */\n    containerClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，内层容器样式\n     */\n    containerStyle?: CSSProperties\n    /** 节流时间，单位毫秒，默认200ms，传入 0 不节流 */\n    throttle?: number\n    /** 动画时间，单位毫秒，默认400ms，传入 0 不展示动画 */\n    transitionDuration?: number\n    /** 变化的回调函数 */\n    onSizeChange?: (sizeData: FlowSizeData) => void\n    element?: Ref<HTMLDivElement>\n}\n\nexport function getGapRange(gap?: undefined | number | \"auto\" | (number | \"auto\")[]): [number, number | \"auto\"] {\n    if (typeof gap === \"number\") return [gap, gap]\n    if (Array.isArray(gap)) return [typeof gap[0] === \"number\" ? gap[0] : 0, gap[1]]\n    return [0, \"auto\"]\n}\n\nexport interface GapAndCount {\n    count: number\n    gap: number\n}\n\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): GapAndCount {\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\n    if (count === 1) return { count, gap: 0 }\n    const averageGap = (width - itemWidth * count) / (count - 1)\n    if (averageGap < minGap) return { count, gap: minGap }\n    if (maxGap !== \"auto\" && averageGap > maxGap) return { count, gap: maxGap }\n    return { count, gap: averageGap }\n}\n\nexport interface ManualFlowProps<T> extends FlowProps<T> {\n    /** 组件宽度，必须指定 */\n    width: number\n}\n\n/** 手动组件，由外界指定宽度，性能更好 */\nexport function ManualFlow<T>(props: ManualFlowProps<T>) {\n    let {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        maxRows,\n        data = [],\n        render,\n        keyExactor,\n        className,\n        style,\n        wrapperClassName,\n        wrapperStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        containerClassName,\n        containerStyle,\n        gap = 0,\n        width,\n        element,\n        ...rest\n    } = props\n    rowGap ??= gap\n    columnGap ??= gap\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\n    const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = useState(() => getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n    const ele = useRef<HTMLDivElement>(null)\n    const contentRows = Math.ceil(data.length / columnCount)\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\n\n    function getPosition(index: number) {\n        const y = Math.floor(index / columnCount)\n        const x = index - y * columnCount\n        return {\n            left: x * (itemWidth + columnGapSize),\n            top: y * (itemHeight + rowGap!),\n        }\n    }\n\n    function getHidden(index: number) {\n        if (typeof maxRows !== \"number\") return false\n        return index >= maxRows * columnCount\n    }\n\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        function task() {\n            setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n        }\n        if (throttle === 0) return task()\n        const timeout = setTimeout(task, throttle || 200)\n        return () => clearTimeout(timeout)\n    }, [width, itemWidth, throttle, minColumnGap, maxColumnGap])\n\n    useEffect(() => {\n        onSizeChange?.({\n            width,\n            height,\n            itemWidth,\n            itemHeight,\n            columnGap: columnGapSize,\n            columnCount,\n            rowGap: rowGap!,\n            rowCount: contentShownRows,\n            overflow: data.length > contentShownRows * columnCount,\n            itemCount: data.length,\n            maxRows: maxRows ?? null,\n        })\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\n\n    return (\n        <div\n            ref={ele}\n            className={clsx(\n                css`\n                    position: relative;\n                    height: var(--height);\n                    overflow: hidden;\n                `,\n                className,\n            )}\n            style={transformCSSVariable({ height: px(height) }, style)}\n            {...rest}\n        >\n            {data.map((item, index, arr) => (\n                <div\n                    key={keyExactor ? keyExactor(item, index, arr) : index}\n                    className={clsx(\n                        css`\n                            position: absolute;\n                            width: var(--width);\n                            height: var(--height);\n                            transition: var(--transition);\n                            left: 0;\n                            top: 0;\n                            transform: translate(var(--left), var(--top));\n                        `,\n                        wrapperClassName,\n                    )}\n                    style={transformCSSVariable(\n                        {\n                            width: px(itemWidth),\n                            height: px(itemHeight),\n                            transition: transitionDuration === 0 ? \"none\" : `all ${transitionDuration || 400}ms`,\n                            left: px(getPosition(index).left),\n                            top: px(getPosition(index).top),\n                        },\n                        wrapperStyle,\n                    )}\n                >\n                    <div\n                        className={clsx(\n                            css`\n                                width: 100%;\n                                height: 100%;\n                                display: var(--display);\n                            `,\n                            containerClassName,\n                        )}\n                        style={transformCSSVariable({ display: getHidden(index) ? \"none\" : \"block\" }, containerStyle)}\n                    >\n                        {render(item, index, arr)}\n                    </div>\n                </div>\n            ))}\n        </div>\n    )\n}\n\n/** 自适应浮动组件 */\nexport function Flow<T>(props: FlowProps<T>): ReactNode {\n    const {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        gap,\n        maxRows,\n        data,\n        render,\n        keyExactor,\n        wrapperClassName,\n        wrapperStyle,\n        containerClassName,\n        containerStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        element,\n        ...rest\n    } = props\n    const ele = useRef<HTMLDivElement>(null)\n    const size = useSize(ele)\n    const width = useRef(size?.width || 0)\n    if (size && size.width !== 0) width.current = size.width\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n    if (width.current === 0) return <div ref={ele} {...rest} />\n    return <ManualFlow element={ele} {...props} width={width.current} />\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"soda-hooks\"\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from \"react\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nexport interface FlowSizeData {\n    /** 容器宽度 */\n    width: number\n    /** 容器高度 */\n    height: number\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /** 列间距 */\n    columnGap: number\n    /** 列数 */\n    columnCount: number\n    /** 行间距 */\n    rowGap: number\n    /** 行数 */\n    rowCount: number\n    /** 元素格数 */\n    itemCount: number\n    /** 最大行数 */\n    maxRows: number | null\n    /** 是否有元素被隐藏 */\n    overflow: boolean\n}\n\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /**\n     * 列间距\n     * 1. 如果是数字，表示列间距是固定的\n     * 2. 如果是 auto，表示会在尽可能放进更多列的情况下，列间距是平均的\n     * 2. 如果是数组，表示列间距是区间的，第一个元素是最小值，第二个元素是最大值\n     */\n    columnGap?: number | \"auto\" | [number | \"auto\", number | \"auto\"]\n    /** 行间距 */\n    rowGap?: number\n    gap?: number\n    /** 最大行数 */\n    maxRows?: number | null\n    /** 源数据 */\n    data?: T[]\n    /** 渲染 */\n    render: (item: T, index: number, arr: T[]) => ReactNode\n    /** key释放器，默认为 index */\n    keyExactor?: (item: T, index: number, arr: T[]) => Key\n    /**\n     * 渲染的元素由两层容器包裹，外层容器类名\n     */\n    wrapperClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，外层容器样式\n     */\n    wrapperStyle?: CSSProperties\n    /**\n     * 渲染的元素由两层容器包裹，内层容器类名\n     */\n    containerClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，内层容器样式\n     */\n    containerStyle?: CSSProperties\n    /** 节流时间，单位毫秒，默认200ms，传入 0 不节流 */\n    throttle?: number\n    /** 动画时间，单位毫秒，默认400ms，传入 0 不展示动画 */\n    transitionDuration?: number\n    /** 变化的回调函数 */\n    onSizeChange?: (sizeData: FlowSizeData) => void\n    element?: Ref<HTMLDivElement>\n}\n\nexport function getGapRange(gap?: undefined | number | \"auto\" | (number | \"auto\")[]): [number, number | \"auto\"] {\n    if (typeof gap === \"number\") return [gap, gap]\n    if (Array.isArray(gap)) return [typeof gap[0] === \"number\" ? gap[0] : 0, gap[1]]\n    return [0, \"auto\"]\n}\n\nexport interface GapAndCount {\n    count: number\n    gap: number\n}\n\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): GapAndCount {\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\n    if (count === 1) return { count, gap: 0 }\n    const averageGap = (width - itemWidth * count) / (count - 1)\n    if (averageGap < minGap) return { count, gap: minGap }\n    if (maxGap !== \"auto\" && averageGap > maxGap) return { count, gap: maxGap }\n    return { count, gap: averageGap }\n}\n\nexport interface ManualFlowProps<T> extends FlowProps<T> {\n    /** 组件宽度，必须指定 */\n    width: number\n}\n\n/** 手动组件，由外界指定宽度，性能更好 */\nexport function ManualFlow<T>(props: ManualFlowProps<T>) {\n    let {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        maxRows,\n        data = [],\n        render,\n        keyExactor,\n        className,\n        style,\n        wrapperClassName,\n        wrapperStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        containerClassName,\n        containerStyle,\n        gap = 0,\n        width,\n        element,\n        ...rest\n    } = props\n    rowGap ??= gap\n    columnGap ??= gap\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\n    const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = useState(() => getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n    const ele = useRef<HTMLDivElement>(null)\n    const contentRows = Math.ceil(data.length / columnCount)\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\n\n    function getPosition(index: number) {\n        const y = Math.floor(index / columnCount)\n        const x = index - y * columnCount\n        return {\n            left: x * (itemWidth + columnGapSize),\n            top: y * (itemHeight + rowGap!),\n        }\n    }\n\n    function getHidden(index: number) {\n        if (typeof maxRows !== \"number\") return false\n        return index >= maxRows * columnCount\n    }\n\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        function task() {\n            setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n        }\n        if (throttle === 0) return task()\n        const timeout = setTimeout(task, throttle || 200)\n        return () => clearTimeout(timeout)\n    }, [width, itemWidth, throttle, minColumnGap, maxColumnGap])\n\n    useEffect(() => {\n        onSizeChange?.({\n            width,\n            height,\n            itemWidth,\n            itemHeight,\n            columnGap: columnGapSize,\n            columnCount,\n            rowGap: rowGap!,\n            rowCount: contentShownRows,\n            overflow: data.length > contentShownRows * columnCount,\n            itemCount: data.length,\n            maxRows: maxRows ?? null,\n        })\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\n\n    return (\n        <div\n            ref={ele}\n            className={clsx(\n                css`\n                    position: relative;\n                    height: var(--height);\n                    overflow: hidden;\n                `,\n                className,\n            )}\n            style={transformCSSVariable({ height: px(height) }, style)}\n            {...rest}\n        >\n            {data.map((item, index, arr) => (\n                <div\n                    key={keyExactor ? keyExactor(item, index, arr) : index}\n                    className={clsx(\n                        css`\n                            position: absolute;\n                            width: var(--width);\n                            height: var(--height);\n                            transition: var(--transition);\n                            left: 0;\n                            top: 0;\n                            transform: translate(var(--left), var(--top));\n                        `,\n                        wrapperClassName,\n                    )}\n                    style={transformCSSVariable(\n                        {\n                            width: px(itemWidth),\n                            height: px(itemHeight),\n                            transition: transitionDuration === 0 ? \"none\" : `all ${transitionDuration || 400}ms`,\n                            left: px(getPosition(index).left),\n                            top: px(getPosition(index).top),\n                        },\n                        wrapperStyle,\n                    )}\n                >\n                    <div\n                        className={clsx(\n                            css`\n                                width: 100%;\n                                height: 100%;\n                                display: var(--display);\n                            `,\n                            containerClassName,\n                        )}\n                        style={transformCSSVariable({ display: getHidden(index) ? \"none\" : \"block\" }, containerStyle)}\n                    >\n                        {render(item, index, arr)}\n                    </div>\n                </div>\n            ))}\n        </div>\n    )\n}\n\n/** 自适应浮动组件 */\nexport function Flow<T>(props: FlowProps<T>): ReactNode {\n    const {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        gap,\n        maxRows,\n        data,\n        render,\n        keyExactor,\n        wrapperClassName,\n        wrapperStyle,\n        containerClassName,\n        containerStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        element,\n        ...rest\n    } = props\n    const ele = useRef<HTMLDivElement>(null)\n    const size = useSize(ele)\n    const width = useRef(size?.width || 0)\n    if (size && size.width !== 0) width.current = size.width\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n    if (width.current === 0) return <div ref={ele} {...rest} />\n    return <ManualFlow element={ele} {...props} width={width.current} />\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/components/InfiniteScroll.js

@@ -25,7 +25,7 @@ __export(InfiniteScroll_exports, {
 module.exports = __toCommonJS(InfiniteScroll_exports);
 var import_react = require("react");
 var import_css = require("@emotion/css");
-var import_ahooks = require("ahooks");
+var import_soda_hooks = require("soda-hooks");
 var import_deepsea_tools = require("deepsea-tools");
 var InfiniteScroll = (0, import_react.forwardRef)((props, ref) => {
   const {
@@ -44,11 +44,11 @@ var InfiniteScroll = (0, import_react.forwardRef)((props, ref) => {
     ...rest
   } = props;
   const wrapper = (0, import_react.useRef)(null);
-  const wrapperSize = (0, import_ahooks.useSize)(wrapper);
+  const wrapperSize = (0, import_soda_hooks.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);
+  const containerSize = (0, import_soda_hooks.useSize)(container);
   function bigger(containerSize2, wrapperSize2) {
     return withEqual ? containerSize2 + (withGap ? gap : 0) >= wrapperSize2 : containerSize2 + (withGap ? gap : 0) > wrapperSize2;
   }

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

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

package/dist/cjs/components/TransitionBox.js

@@ -24,11 +24,11 @@ __export(TransitionBox_exports, {
 });
 module.exports = __toCommonJS(TransitionBox_exports);
 var import_react = require("react");
-var import_ahooks = require("ahooks");
+var import_soda_hooks = require("soda-hooks");
 var TransitionBox = (0, import_react.forwardRef)((props, ref) => {
   const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3e3, ...rest } = props;
   const container = (0, import_react.useRef)(null);
-  const size = (0, import_ahooks.useSize)(container);
+  const size = (0, import_soda_hooks.useSize)(container);
   const width = size?.width ?? 0;
   const height = size?.height ?? 0;
   const [count, setCount] = (0, import_react.useState)(0);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/TransitionBox.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from \"react\"\nimport { useSize } from \"ahooks\"\n\nexport interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {\n    containerClassName?: string\n    containerStyle?: CSSProperties\n    vertical?: boolean\n    horizontal?: boolean\n    time?: number\n}\n\n/** 尺寸渐变的组件 */\nexport const TransitionBox: FC<TransitionBoxProps> = forwardRef<HTMLDivElement, TransitionBoxProps>((props, ref) => {\n    const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props\n    const container = useRef<HTMLDivElement>(null)\n    const size = useSize(container)\n    const width = size?.width ?? 0\n    const height = size?.height ?? 0\n    const [count, setCount] = useState(0)\n\n    useEffect(() => {\n        setCount(count => Math.min(count + 1, 3))\n    }, [width, height])\n\n    const outerStyle: CSSProperties = {\n        transitionProperty: count === 3 ? [horizontal && \"width\", vertical && \"height\"].filter(Boolean).join(\", \") : undefined,\n        transitionDuration: count === 3 ? `${time}ms` : undefined,\n        width,\n        height,\n        overflow: \"hidden\",\n        position: \"relative\",\n        ...style,\n    }\n\n    return (\n        <div ref={ref} style={outerStyle} {...rest}>\n            <div className={containerClassName} style={{ position: \"absolute\", ...containerStyle }} ref={container}>\n                {children}\n            </div>\n        </div>\n    )\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA2F;AAC3F,oBAAwB;AAWjB,IAAM,oBAAwC,yBAA+C,CAAC,OAAO,QAAQ;AAChH,QAAM,EAAE,OAAO,oBAAoB,gBAAgB,UAAU,WAAW,MAAM,aAAa,MAAM,OAAO,KAAM,GAAG,KAAK,IAAI;AAC1H,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,WAAO,uBAAQ,SAAS;AAC9B,QAAM,QAAQ,MAAM,SAAS;AAC7B,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AAEpC,8BAAU,MAAM;AACZ,aAAS,CAAAA,WAAS,KAAK,IAAIA,SAAQ,GAAG,CAAC,CAAC;AAAA,EAC5C,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,aAA4B;AAAA,IAC9B,oBAAoB,UAAU,IAAI,CAAC,cAAc,SAAS,YAAY,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI,IAAI;AAAA,IAC7G,oBAAoB,UAAU,IAAI,GAAG,WAAW;AAAA,IAChD;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAG;AAAA,EACP;AAEA,SACI,oCAAC,SAAI,KAAU,OAAO,YAAa,GAAG,QAClC,oCAAC,SAAI,WAAW,oBAAoB,OAAO,EAAE,UAAU,YAAY,GAAG,eAAe,GAAG,KAAK,aACxF,QACL,CACJ;AAER,CAAC;",
+  "sourcesContent": ["\"use client\"\n\nimport { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from \"react\"\nimport { useSize } from \"soda-hooks\"\n\nexport interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {\n    containerClassName?: string\n    containerStyle?: CSSProperties\n    vertical?: boolean\n    horizontal?: boolean\n    time?: number\n}\n\n/** 尺寸渐变的组件 */\nexport const TransitionBox: FC<TransitionBoxProps> = forwardRef<HTMLDivElement, TransitionBoxProps>((props, ref) => {\n    const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props\n    const container = useRef<HTMLDivElement>(null)\n    const size = useSize(container)\n    const width = size?.width ?? 0\n    const height = size?.height ?? 0\n    const [count, setCount] = useState(0)\n\n    useEffect(() => {\n        setCount(count => Math.min(count + 1, 3))\n    }, [width, height])\n\n    const outerStyle: CSSProperties = {\n        transitionProperty: count === 3 ? [horizontal && \"width\", vertical && \"height\"].filter(Boolean).join(\", \") : undefined,\n        transitionDuration: count === 3 ? `${time}ms` : undefined,\n        width,\n        height,\n        overflow: \"hidden\",\n        position: \"relative\",\n        ...style,\n    }\n\n    return (\n        <div ref={ref} style={outerStyle} {...rest}>\n            <div className={containerClassName} style={{ position: \"absolute\", ...containerStyle }} ref={container}>\n                {children}\n            </div>\n        </div>\n    )\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA2F;AAC3F,wBAAwB;AAWjB,IAAM,oBAAwC,yBAA+C,CAAC,OAAO,QAAQ;AAChH,QAAM,EAAE,OAAO,oBAAoB,gBAAgB,UAAU,WAAW,MAAM,aAAa,MAAM,OAAO,KAAM,GAAG,KAAK,IAAI;AAC1H,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,WAAO,2BAAQ,SAAS;AAC9B,QAAM,QAAQ,MAAM,SAAS;AAC7B,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AAEpC,8BAAU,MAAM;AACZ,aAAS,CAAAA,WAAS,KAAK,IAAIA,SAAQ,GAAG,CAAC,CAAC;AAAA,EAC5C,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,aAA4B;AAAA,IAC9B,oBAAoB,UAAU,IAAI,CAAC,cAAc,SAAS,YAAY,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI,IAAI;AAAA,IAC7G,oBAAoB,UAAU,IAAI,GAAG,WAAW;AAAA,IAChD;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAG;AAAA,EACP;AAEA,SACI,oCAAC,SAAI,KAAU,OAAO,YAAa,GAAG,QAClC,oCAAC,SAAI,WAAW,oBAAoB,OAAO,EAAE,UAAU,YAAY,GAAG,eAAe,GAAG,KAAK,aACxF,QACL,CACJ;AAER,CAAC;",
   "names": ["count"]
 }

package/dist/esm/components/AutoScroll.js

@@ -2,7 +2,7 @@
 
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { css } from "@emotion/css";
-import { useSize } from "ahooks";
+import { useSize } from "soda-hooks";
 import { clsx, getArray } from "deepsea-tools";
 import { px, transformCSSVariable } from "../utils";
 import { Scroll } from "./Scroll";

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","css","useSize","clsx","getArray","px","transformCSSVariable","Scroll","jsx","_jsx","AutoScroll","props","ref","count","itemHeight","animation","duration","onMouseEnter","onMouseLeave","gap","containerClassName","containerStyle","children","playOnMouseEnter","scrollbar","paused","rest","bar","timeout","undefined","ele","size","pausedRef","pausedProps","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","className","style"],"sources":["../../../src/components/AutoScroll.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx, getArray } from \"deepsea-tools\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nimport { Scroll, ScrollProps } from \"./Scroll\"\n\nexport interface AutoScrollProps extends ScrollProps {\n    /** 轮播元素的个数 */\n    count: number\n\n    /** 轮播元素的高度 */\n    itemHeight: number\n\n    /**\n     * 轮播动画的时间，单位毫秒\n     * @default 1000\n     */\n    animation?: number\n\n    /**\n     * 每个元素的停留时间，单位毫秒\n     * @default 3000\n     */\n    duration?: number\n\n    /**\n     * 元素之间的间距\n     * @default 0\n     */\n    gap?: number\n\n    /** 容器类名 */\n    containerClassName?: string\n\n    /** 容器样式 */\n    containerStyle?: CSSProperties\n\n    /**\n     * 在鼠标移入时是否继续播放\n     * @default false\n     */\n    playOnMouseEnter?: boolean\n\n    /**\n     * 是否暂停\n     * @default false\n     */\n    paused?: boolean\n}\n\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\n    const {\n        count,\n        itemHeight,\n        animation = 1000,\n        duration = 3000,\n        onMouseEnter,\n        onMouseLeave,\n        gap = 0,\n        containerClassName,\n        containerStyle,\n        children,\n        playOnMouseEnter,\n        scrollbar,\n        paused,\n        ...rest\n    } = props\n    const bar = useRef<Scrollbar | null>(null)\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\n    const ele = useRef<HTMLDivElement>(null)\n    const size = useSize(ele)\n    const pausedRef = useRef(false)\n    const pausedProps = useRef(paused)\n    pausedProps.current = paused\n\n    useImperativeHandle(ref, () => ele.current!, [])\n    useImperativeHandle(scrollbar, () => bar.current!, [])\n\n    useEffect(() => {\n        if (playOnMouseEnter) pausedRef.current = false\n    }, [playOnMouseEnter])\n\n    useEffect(() => {\n        if (!size || count === 0) return\n        const { height } = size\n        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\n        const scrollHeight = range[range.length - 1]\n        if (height >= scrollHeight) return\n        function scroll(target: number) {\n            clearTimeout(timeout.current)\n            timeout.current = setTimeout(() => {\n                if (pausedRef.current || pausedProps.current) return scroll(target)\n                bar.current?.scrollTo(0, target, animation)\n            }, duration)\n        }\n        scroll(range[0])\n        function listener(status: ScrollStatus) {\n            const { y } = status.offset\n            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\n            const target = scrollToBottom ? 0 : range.find(item => item > y)!\n            scroll(target)\n        }\n        bar.current?.addListener(listener)\n        return () => {\n            clearTimeout(timeout.current)\n            bar.current?.removeListener(listener)\n            bar.current?.scrollTo(0, 0)\n        }\n    }, [size, count, itemHeight, gap, duration, animation])\n\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (playOnMouseEnter) return\n        pausedRef.current = true\n        onMouseEnter?.(e)\n    }\n\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (playOnMouseEnter) return\n        pausedRef.current = false\n        onMouseLeave?.(e)\n    }\n\n    return (\n        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\n            <div\n                className={clsx(\n                    css`\n                        display: flex;\n                        flex-direction: column;\n                        gap: var(--gap, 0);\n                        & > * {\n                            flex: none;\n                        }\n                    `,\n                    containerClassName,\n                )}\n                style={transformCSSVariable({ gap: px(gap) }, containerStyle)}\n            >\n                {children}\n            </div>\n        </Scroll>\n    )\n})\n"],"mappings":"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"}
+{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","css","useSize","clsx","getArray","px","transformCSSVariable","Scroll","jsx","_jsx","AutoScroll","props","ref","count","itemHeight","animation","duration","onMouseEnter","onMouseLeave","gap","containerClassName","containerStyle","children","playOnMouseEnter","scrollbar","paused","rest","bar","timeout","undefined","ele","size","pausedRef","pausedProps","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","className","style"],"sources":["../../../src/components/AutoScroll.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"soda-hooks\"\nimport { clsx, getArray } from \"deepsea-tools\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nimport { Scroll, ScrollProps } from \"./Scroll\"\n\nexport interface AutoScrollProps extends ScrollProps {\n    /** 轮播元素的个数 */\n    count: number\n\n    /** 轮播元素的高度 */\n    itemHeight: number\n\n    /**\n     * 轮播动画的时间，单位毫秒\n     * @default 1000\n     */\n    animation?: number\n\n    /**\n     * 每个元素的停留时间，单位毫秒\n     * @default 3000\n     */\n    duration?: number\n\n    /**\n     * 元素之间的间距\n     * @default 0\n     */\n    gap?: number\n\n    /** 容器类名 */\n    containerClassName?: string\n\n    /** 容器样式 */\n    containerStyle?: CSSProperties\n\n    /**\n     * 在鼠标移入时是否继续播放\n     * @default false\n     */\n    playOnMouseEnter?: boolean\n\n    /**\n     * 是否暂停\n     * @default false\n     */\n    paused?: boolean\n}\n\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\n    const {\n        count,\n        itemHeight,\n        animation = 1000,\n        duration = 3000,\n        onMouseEnter,\n        onMouseLeave,\n        gap = 0,\n        containerClassName,\n        containerStyle,\n        children,\n        playOnMouseEnter,\n        scrollbar,\n        paused,\n        ...rest\n    } = props\n    const bar = useRef<Scrollbar | null>(null)\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\n    const ele = useRef<HTMLDivElement>(null)\n    const size = useSize(ele)\n    const pausedRef = useRef(false)\n    const pausedProps = useRef(paused)\n    pausedProps.current = paused\n\n    useImperativeHandle(ref, () => ele.current!, [])\n    useImperativeHandle(scrollbar, () => bar.current!, [])\n\n    useEffect(() => {\n        if (playOnMouseEnter) pausedRef.current = false\n    }, [playOnMouseEnter])\n\n    useEffect(() => {\n        if (!size || count === 0) return\n        const { height } = size\n        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\n        const scrollHeight = range[range.length - 1]\n        if (height >= scrollHeight) return\n        function scroll(target: number) {\n            clearTimeout(timeout.current)\n            timeout.current = setTimeout(() => {\n                if (pausedRef.current || pausedProps.current) return scroll(target)\n                bar.current?.scrollTo(0, target, animation)\n            }, duration)\n        }\n        scroll(range[0])\n        function listener(status: ScrollStatus) {\n            const { y } = status.offset\n            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\n            const target = scrollToBottom ? 0 : range.find(item => item > y)!\n            scroll(target)\n        }\n        bar.current?.addListener(listener)\n        return () => {\n            clearTimeout(timeout.current)\n            bar.current?.removeListener(listener)\n            bar.current?.scrollTo(0, 0)\n        }\n    }, [size, count, itemHeight, gap, duration, animation])\n\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (playOnMouseEnter) return\n        pausedRef.current = true\n        onMouseEnter?.(e)\n    }\n\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (playOnMouseEnter) return\n        pausedRef.current = false\n        onMouseLeave?.(e)\n    }\n\n    return (\n        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\n            <div\n                className={clsx(\n                    css`\n                        display: flex;\n                        flex-direction: column;\n                        gap: var(--gap, 0);\n                        & > * {\n                            flex: none;\n                        }\n                    `,\n                    containerClassName,\n                )}\n                style={transformCSSVariable({ gap: px(gap) }, containerStyle)}\n            >\n                {children}\n            </div>\n        </Scroll>\n    )\n})\n"],"mappings":"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"}

package/dist/esm/components/CopyButton.js

@@ -1,7 +1,7 @@
 "use client";
 
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import { useLatest } from "ahooks";
+import { useLatest } from "soda-hooks";
 import ClipboardJS from "clipboard";
 import { jsx as _jsx } from "react/jsx-runtime";
 export { Event } from "clipboard";

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","useLatest","ClipboardJS","jsx","_jsx","Event","CopyButton","props","ref","text","onCopySuccess","_onCoptSuccess","onCopyError","_onCopyError","rest","ele","current","clipboard","on","event","destroy"],"sources":["../../../src/components/CopyButton.tsx"],"sourcesContent":["\"use client\"\n\nimport { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { useLatest } from \"ahooks\"\nimport ClipboardJS, { Event } from \"clipboard\"\n\nexport { Event } from \"clipboard\"\n\nexport type CopyButtonProps = ComponentPropsWithoutRef<\"button\"> & {\n    text?: string\n    onCopySuccess?: (e: Event) => void\n    onCopyError?: (e: Event) => void\n}\n\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {\n    const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props\n    const ele = useRef<HTMLButtonElement>(null)\n    const onCopySuccess = useLatest(_onCoptSuccess)\n    const onCopyError = useLatest(_onCopyError)\n\n    useImperativeHandle(ref, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        const clipboard = new ClipboardJS(ele.current!)\n        clipboard.on(\"success\", event => onCopySuccess.current?.(event))\n        clipboard.on(\"error\", event => onCopyError.current?.(event))\n        return () => clipboard.destroy()\n    }, [])\n\n    return <button ref={ele} {...rest} data-clipboard-text={text} />\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAmCA,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AACpG,SAASC,SAAS,QAAQ,QAAQ;AAClC,OAAOC,WAAW,MAAiB,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE9C,SAASC,KAAK,QAAQ,WAAW;AAQjC,OAAO,MAAMC,UAAU,gBAAGT,UAAU,CAAqC,CAACU,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAM;IAAEC,IAAI;IAAEC,aAAa,EAAEC,cAAc;IAAEC,WAAW,EAAEC,YAAY;IAAE,GAAGC;EAAK,CAAC,GAAGP,KAAK;EACzF,MAAMQ,GAAG,GAAGf,MAAM,CAAoB,IAAI,CAAC;EAC3C,MAAMU,aAAa,GAAGT,SAAS,CAACU,cAAc,CAAC;EAC/C,MAAMC,WAAW,GAAGX,SAAS,CAACY,YAAY,CAAC;EAE3Cd,mBAAmB,CAACS,GAAG,EAAE,MAAMO,GAAG,CAACC,OAAQ,EAAE,CAACD,GAAG,CAACC,OAAO,CAAC,CAAC;EAE3DlB,SAAS,CAAC,MAAM;IACZ,MAAMmB,SAAS,GAAG,IAAIf,WAAW,CAACa,GAAG,CAACC,OAAQ,CAAC;IAC/CC,SAAS,CAACC,EAAE,CAAC,SAAS,EAAEC,KAAK,IAAIT,aAAa,CAACM,OAAO,GAAGG,KAAK,CAAC,CAAC;IAChEF,SAAS,CAACC,EAAE,CAAC,OAAO,EAAEC,KAAK,IAAIP,WAAW,CAACI,OAAO,GAAGG,KAAK,CAAC,CAAC;IAC5D,OAAO,MAAMF,SAAS,CAACG,OAAO,CAAC,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAEN,oBAAOhB,IAAA;IAAQI,GAAG,EAAEO,GAAI;IAAA,GAAKD,IAAI;IAAE,uBAAqBL;EAAK,CAAE,CAAC;AACpE,CAAC,CAAC"}
+{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","useLatest","ClipboardJS","jsx","_jsx","Event","CopyButton","props","ref","text","onCopySuccess","_onCoptSuccess","onCopyError","_onCopyError","rest","ele","current","clipboard","on","event","destroy"],"sources":["../../../src/components/CopyButton.tsx"],"sourcesContent":["\"use client\"\n\nimport { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { useLatest } from \"soda-hooks\"\nimport ClipboardJS, { Event } from \"clipboard\"\n\nexport { Event } from \"clipboard\"\n\nexport type CopyButtonProps = ComponentPropsWithoutRef<\"button\"> & {\n    text?: string\n    onCopySuccess?: (e: Event) => void\n    onCopyError?: (e: Event) => void\n}\n\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {\n    const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props\n    const ele = useRef<HTMLButtonElement>(null)\n    const onCopySuccess = useLatest(_onCoptSuccess)\n    const onCopyError = useLatest(_onCopyError)\n\n    useImperativeHandle(ref, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        const clipboard = new ClipboardJS(ele.current!)\n        clipboard.on(\"success\", event => onCopySuccess.current?.(event))\n        clipboard.on(\"error\", event => onCopyError.current?.(event))\n        return () => clipboard.destroy()\n    }, [])\n\n    return <button ref={ele} {...rest} data-clipboard-text={text} />\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAmCA,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AACpG,SAASC,SAAS,QAAQ,YAAY;AACtC,OAAOC,WAAW,MAAiB,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE9C,SAASC,KAAK,QAAQ,WAAW;AAQjC,OAAO,MAAMC,UAAU,gBAAGT,UAAU,CAAqC,CAACU,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAM;IAAEC,IAAI;IAAEC,aAAa,EAAEC,cAAc;IAAEC,WAAW,EAAEC,YAAY;IAAE,GAAGC;EAAK,CAAC,GAAGP,KAAK;EACzF,MAAMQ,GAAG,GAAGf,MAAM,CAAoB,IAAI,CAAC;EAC3C,MAAMU,aAAa,GAAGT,SAAS,CAACU,cAAc,CAAC;EAC/C,MAAMC,WAAW,GAAGX,SAAS,CAACY,YAAY,CAAC;EAE3Cd,mBAAmB,CAACS,GAAG,EAAE,MAAMO,GAAG,CAACC,OAAQ,EAAE,CAACD,GAAG,CAACC,OAAO,CAAC,CAAC;EAE3DlB,SAAS,CAAC,MAAM;IACZ,MAAMmB,SAAS,GAAG,IAAIf,WAAW,CAACa,GAAG,CAACC,OAAQ,CAAC;IAC/CC,SAAS,CAACC,EAAE,CAAC,SAAS,EAAEC,KAAK,IAAIT,aAAa,CAACM,OAAO,GAAGG,KAAK,CAAC,CAAC;IAChEF,SAAS,CAACC,EAAE,CAAC,OAAO,EAAEC,KAAK,IAAIP,WAAW,CAACI,OAAO,GAAGG,KAAK,CAAC,CAAC;IAC5D,OAAO,MAAMF,SAAS,CAACG,OAAO,CAAC,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAEN,oBAAOhB,IAAA;IAAQI,GAAG,EAAEO,GAAI;IAAA,GAAKD,IAAI;IAAE,uBAAqBL;EAAK,CAAE,CAAC;AACpE,CAAC,CAAC"}

package/dist/esm/components/Flow.js

@@ -1,7 +1,7 @@
 "use client";
 
 import { css } from "@emotion/css";
-import { useSize } from "ahooks";
+import { useSize } from "soda-hooks";
 import { clsx } from "deepsea-tools";
 import { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { px, transformCSSVariable } from "../utils";

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

@@ -1 +1 @@
-{"version":3,"names":["css","useSize","clsx","useEffect","useImperativeHandle","useRef","useState","px","transformCSSVariable","jsx","_jsx","getGapRange","gap","Array","isArray","getGapCountAndSize","width","itemWidth","minGap","maxGap","count","Math","floor","averageGap","ManualFlow","props","itemHeight","columnGap","rowGap","maxRows","data","render","keyExactor","className","style","wrapperClassName","wrapperStyle","throttle","transitionDuration","onSizeChange","containerClassName","containerStyle","element","rest","minColumnGap","maxColumnGap","columnCount","columnGapSize","setGapAndCount","ele","contentRows","ceil","length","contentShownRows","min","height","getPosition","index","y","x","left","top","getHidden","current","task","timeout","setTimeout","clearTimeout","rowCount","overflow","itemCount","ref","children","map","item","arr","transition","display","Flow","size"],"sources":["../../../src/components/Flow.tsx"],"sourcesContent":["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from \"react\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nexport interface FlowSizeData {\n    /** 容器宽度 */\n    width: number\n    /** 容器高度 */\n    height: number\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /** 列间距 */\n    columnGap: number\n    /** 列数 */\n    columnCount: number\n    /** 行间距 */\n    rowGap: number\n    /** 行数 */\n    rowCount: number\n    /** 元素格数 */\n    itemCount: number\n    /** 最大行数 */\n    maxRows: number | null\n    /** 是否有元素被隐藏 */\n    overflow: boolean\n}\n\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /**\n     * 列间距\n     * 1. 如果是数字，表示列间距是固定的\n     * 2. 如果是 auto，表示会在尽可能放进更多列的情况下，列间距是平均的\n     * 2. 如果是数组，表示列间距是区间的，第一个元素是最小值，第二个元素是最大值\n     */\n    columnGap?: number | \"auto\" | [number | \"auto\", number | \"auto\"]\n    /** 行间距 */\n    rowGap?: number\n    gap?: number\n    /** 最大行数 */\n    maxRows?: number | null\n    /** 源数据 */\n    data?: T[]\n    /** 渲染 */\n    render: (item: T, index: number, arr: T[]) => ReactNode\n    /** key释放器，默认为 index */\n    keyExactor?: (item: T, index: number, arr: T[]) => Key\n    /**\n     * 渲染的元素由两层容器包裹，外层容器类名\n     */\n    wrapperClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，外层容器样式\n     */\n    wrapperStyle?: CSSProperties\n    /**\n     * 渲染的元素由两层容器包裹，内层容器类名\n     */\n    containerClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，内层容器样式\n     */\n    containerStyle?: CSSProperties\n    /** 节流时间，单位毫秒，默认200ms，传入 0 不节流 */\n    throttle?: number\n    /** 动画时间，单位毫秒，默认400ms，传入 0 不展示动画 */\n    transitionDuration?: number\n    /** 变化的回调函数 */\n    onSizeChange?: (sizeData: FlowSizeData) => void\n    element?: Ref<HTMLDivElement>\n}\n\nexport function getGapRange(gap?: undefined | number | \"auto\" | (number | \"auto\")[]): [number, number | \"auto\"] {\n    if (typeof gap === \"number\") return [gap, gap]\n    if (Array.isArray(gap)) return [typeof gap[0] === \"number\" ? gap[0] : 0, gap[1]]\n    return [0, \"auto\"]\n}\n\nexport interface GapAndCount {\n    count: number\n    gap: number\n}\n\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): GapAndCount {\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\n    if (count === 1) return { count, gap: 0 }\n    const averageGap = (width - itemWidth * count) / (count - 1)\n    if (averageGap < minGap) return { count, gap: minGap }\n    if (maxGap !== \"auto\" && averageGap > maxGap) return { count, gap: maxGap }\n    return { count, gap: averageGap }\n}\n\nexport interface ManualFlowProps<T> extends FlowProps<T> {\n    /** 组件宽度，必须指定 */\n    width: number\n}\n\n/** 手动组件，由外界指定宽度，性能更好 */\nexport function ManualFlow<T>(props: ManualFlowProps<T>) {\n    let {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        maxRows,\n        data = [],\n        render,\n        keyExactor,\n        className,\n        style,\n        wrapperClassName,\n        wrapperStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        containerClassName,\n        containerStyle,\n        gap = 0,\n        width,\n        element,\n        ...rest\n    } = props\n    rowGap ??= gap\n    columnGap ??= gap\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\n    const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = useState(() => getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n    const ele = useRef<HTMLDivElement>(null)\n    const contentRows = Math.ceil(data.length / columnCount)\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\n\n    function getPosition(index: number) {\n        const y = Math.floor(index / columnCount)\n        const x = index - y * columnCount\n        return {\n            left: x * (itemWidth + columnGapSize),\n            top: y * (itemHeight + rowGap!),\n        }\n    }\n\n    function getHidden(index: number) {\n        if (typeof maxRows !== \"number\") return false\n        return index >= maxRows * columnCount\n    }\n\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        function task() {\n            setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n        }\n        if (throttle === 0) return task()\n        const timeout = setTimeout(task, throttle || 200)\n        return () => clearTimeout(timeout)\n    }, [width, itemWidth, throttle, minColumnGap, maxColumnGap])\n\n    useEffect(() => {\n        onSizeChange?.({\n            width,\n            height,\n            itemWidth,\n            itemHeight,\n            columnGap: columnGapSize,\n            columnCount,\n            rowGap: rowGap!,\n            rowCount: contentShownRows,\n            overflow: data.length > contentShownRows * columnCount,\n            itemCount: data.length,\n            maxRows: maxRows ?? null,\n        })\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\n\n    return (\n        <div\n            ref={ele}\n            className={clsx(\n                css`\n                    position: relative;\n                    height: var(--height);\n                    overflow: hidden;\n                `,\n                className,\n            )}\n            style={transformCSSVariable({ height: px(height) }, style)}\n            {...rest}\n        >\n            {data.map((item, index, arr) => (\n                <div\n                    key={keyExactor ? keyExactor(item, index, arr) : index}\n                    className={clsx(\n                        css`\n                            position: absolute;\n                            width: var(--width);\n                            height: var(--height);\n                            transition: var(--transition);\n                            left: 0;\n                            top: 0;\n                            transform: translate(var(--left), var(--top));\n                        `,\n                        wrapperClassName,\n                    )}\n                    style={transformCSSVariable(\n                        {\n                            width: px(itemWidth),\n                            height: px(itemHeight),\n                            transition: transitionDuration === 0 ? \"none\" : `all ${transitionDuration || 400}ms`,\n                            left: px(getPosition(index).left),\n                            top: px(getPosition(index).top),\n                        },\n                        wrapperStyle,\n                    )}\n                >\n                    <div\n                        className={clsx(\n                            css`\n                                width: 100%;\n                                height: 100%;\n                                display: var(--display);\n                            `,\n                            containerClassName,\n                        )}\n                        style={transformCSSVariable({ display: getHidden(index) ? \"none\" : \"block\" }, containerStyle)}\n                    >\n                        {render(item, index, arr)}\n                    </div>\n                </div>\n            ))}\n        </div>\n    )\n}\n\n/** 自适应浮动组件 */\nexport function Flow<T>(props: FlowProps<T>): ReactNode {\n    const {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        gap,\n        maxRows,\n        data,\n        render,\n        keyExactor,\n        wrapperClassName,\n        wrapperStyle,\n        containerClassName,\n        containerStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        element,\n        ...rest\n    } = props\n    const ele = useRef<HTMLDivElement>(null)\n    const size = useSize(ele)\n    const width = useRef(size?.width || 0)\n    if (size && size.width !== 0) width.current = size.width\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n    if (width.current === 0) return <div ref={ele} {...rest} />\n    return <ManualFlow element={ele} {...props} width={width.current} />\n}\n"],"mappings":"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"}
+{"version":3,"names":["css","useSize","clsx","useEffect","useImperativeHandle","useRef","useState","px","transformCSSVariable","jsx","_jsx","getGapRange","gap","Array","isArray","getGapCountAndSize","width","itemWidth","minGap","maxGap","count","Math","floor","averageGap","ManualFlow","props","itemHeight","columnGap","rowGap","maxRows","data","render","keyExactor","className","style","wrapperClassName","wrapperStyle","throttle","transitionDuration","onSizeChange","containerClassName","containerStyle","element","rest","minColumnGap","maxColumnGap","columnCount","columnGapSize","setGapAndCount","ele","contentRows","ceil","length","contentShownRows","min","height","getPosition","index","y","x","left","top","getHidden","current","task","timeout","setTimeout","clearTimeout","rowCount","overflow","itemCount","ref","children","map","item","arr","transition","display","Flow","size"],"sources":["../../../src/components/Flow.tsx"],"sourcesContent":["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"soda-hooks\"\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from \"react\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nexport interface FlowSizeData {\n    /** 容器宽度 */\n    width: number\n    /** 容器高度 */\n    height: number\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /** 列间距 */\n    columnGap: number\n    /** 列数 */\n    columnCount: number\n    /** 行间距 */\n    rowGap: number\n    /** 行数 */\n    rowCount: number\n    /** 元素格数 */\n    itemCount: number\n    /** 最大行数 */\n    maxRows: number | null\n    /** 是否有元素被隐藏 */\n    overflow: boolean\n}\n\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /**\n     * 列间距\n     * 1. 如果是数字，表示列间距是固定的\n     * 2. 如果是 auto，表示会在尽可能放进更多列的情况下，列间距是平均的\n     * 2. 如果是数组，表示列间距是区间的，第一个元素是最小值，第二个元素是最大值\n     */\n    columnGap?: number | \"auto\" | [number | \"auto\", number | \"auto\"]\n    /** 行间距 */\n    rowGap?: number\n    gap?: number\n    /** 最大行数 */\n    maxRows?: number | null\n    /** 源数据 */\n    data?: T[]\n    /** 渲染 */\n    render: (item: T, index: number, arr: T[]) => ReactNode\n    /** key释放器，默认为 index */\n    keyExactor?: (item: T, index: number, arr: T[]) => Key\n    /**\n     * 渲染的元素由两层容器包裹，外层容器类名\n     */\n    wrapperClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，外层容器样式\n     */\n    wrapperStyle?: CSSProperties\n    /**\n     * 渲染的元素由两层容器包裹，内层容器类名\n     */\n    containerClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，内层容器样式\n     */\n    containerStyle?: CSSProperties\n    /** 节流时间，单位毫秒，默认200ms，传入 0 不节流 */\n    throttle?: number\n    /** 动画时间，单位毫秒，默认400ms，传入 0 不展示动画 */\n    transitionDuration?: number\n    /** 变化的回调函数 */\n    onSizeChange?: (sizeData: FlowSizeData) => void\n    element?: Ref<HTMLDivElement>\n}\n\nexport function getGapRange(gap?: undefined | number | \"auto\" | (number | \"auto\")[]): [number, number | \"auto\"] {\n    if (typeof gap === \"number\") return [gap, gap]\n    if (Array.isArray(gap)) return [typeof gap[0] === \"number\" ? gap[0] : 0, gap[1]]\n    return [0, \"auto\"]\n}\n\nexport interface GapAndCount {\n    count: number\n    gap: number\n}\n\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): GapAndCount {\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\n    if (count === 1) return { count, gap: 0 }\n    const averageGap = (width - itemWidth * count) / (count - 1)\n    if (averageGap < minGap) return { count, gap: minGap }\n    if (maxGap !== \"auto\" && averageGap > maxGap) return { count, gap: maxGap }\n    return { count, gap: averageGap }\n}\n\nexport interface ManualFlowProps<T> extends FlowProps<T> {\n    /** 组件宽度，必须指定 */\n    width: number\n}\n\n/** 手动组件，由外界指定宽度，性能更好 */\nexport function ManualFlow<T>(props: ManualFlowProps<T>) {\n    let {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        maxRows,\n        data = [],\n        render,\n        keyExactor,\n        className,\n        style,\n        wrapperClassName,\n        wrapperStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        containerClassName,\n        containerStyle,\n        gap = 0,\n        width,\n        element,\n        ...rest\n    } = props\n    rowGap ??= gap\n    columnGap ??= gap\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\n    const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = useState(() => getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n    const ele = useRef<HTMLDivElement>(null)\n    const contentRows = Math.ceil(data.length / columnCount)\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\n\n    function getPosition(index: number) {\n        const y = Math.floor(index / columnCount)\n        const x = index - y * columnCount\n        return {\n            left: x * (itemWidth + columnGapSize),\n            top: y * (itemHeight + rowGap!),\n        }\n    }\n\n    function getHidden(index: number) {\n        if (typeof maxRows !== \"number\") return false\n        return index >= maxRows * columnCount\n    }\n\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        function task() {\n            setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n        }\n        if (throttle === 0) return task()\n        const timeout = setTimeout(task, throttle || 200)\n        return () => clearTimeout(timeout)\n    }, [width, itemWidth, throttle, minColumnGap, maxColumnGap])\n\n    useEffect(() => {\n        onSizeChange?.({\n            width,\n            height,\n            itemWidth,\n            itemHeight,\n            columnGap: columnGapSize,\n            columnCount,\n            rowGap: rowGap!,\n            rowCount: contentShownRows,\n            overflow: data.length > contentShownRows * columnCount,\n            itemCount: data.length,\n            maxRows: maxRows ?? null,\n        })\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\n\n    return (\n        <div\n            ref={ele}\n            className={clsx(\n                css`\n                    position: relative;\n                    height: var(--height);\n                    overflow: hidden;\n                `,\n                className,\n            )}\n            style={transformCSSVariable({ height: px(height) }, style)}\n            {...rest}\n        >\n            {data.map((item, index, arr) => (\n                <div\n                    key={keyExactor ? keyExactor(item, index, arr) : index}\n                    className={clsx(\n                        css`\n                            position: absolute;\n                            width: var(--width);\n                            height: var(--height);\n                            transition: var(--transition);\n                            left: 0;\n                            top: 0;\n                            transform: translate(var(--left), var(--top));\n                        `,\n                        wrapperClassName,\n                    )}\n                    style={transformCSSVariable(\n                        {\n                            width: px(itemWidth),\n                            height: px(itemHeight),\n                            transition: transitionDuration === 0 ? \"none\" : `all ${transitionDuration || 400}ms`,\n                            left: px(getPosition(index).left),\n                            top: px(getPosition(index).top),\n                        },\n                        wrapperStyle,\n                    )}\n                >\n                    <div\n                        className={clsx(\n                            css`\n                                width: 100%;\n                                height: 100%;\n                                display: var(--display);\n                            `,\n                            containerClassName,\n                        )}\n                        style={transformCSSVariable({ display: getHidden(index) ? \"none\" : \"block\" }, containerStyle)}\n                    >\n                        {render(item, index, arr)}\n                    </div>\n                </div>\n            ))}\n        </div>\n    )\n}\n\n/** 自适应浮动组件 */\nexport function Flow<T>(props: FlowProps<T>): ReactNode {\n    const {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        gap,\n        maxRows,\n        data,\n        render,\n        keyExactor,\n        wrapperClassName,\n        wrapperStyle,\n        containerClassName,\n        containerStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        element,\n        ...rest\n    } = props\n    const ele = useRef<HTMLDivElement>(null)\n    const size = useSize(ele)\n    const width = useRef(size?.width || 0)\n    if (size && size.width !== 0) width.current = size.width\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n    if (width.current === 0) return <div ref={ele} {...rest} />\n    return <ManualFlow element={ele} {...props} width={width.current} />\n}\n"],"mappings":"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"}

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

@@ -33,7 +33,7 @@ export declare const InfiniteScroll: import("react").ForwardRefExoticComponent<O
      * 滚动的方向
      * @default "vertical"
      */
-    direction?: "horizontal" | "vertical" | undefined;
+    direction?: "vertical" | "horizontal" | undefined;
     /** 渲染 children 的容器的类名 */
     containerClassName?: string | undefined;
     /** 渲染 children 的容器的样式 */

package/dist/esm/components/InfiniteScroll.js

@@ -2,7 +2,7 @@
 
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { css } from "@emotion/css";
-import { useSize } from "ahooks";
+import { useSize } from "soda-hooks";
 import { clsx } from "deepsea-tools";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

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

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

package/dist/esm/components/TransitionBox.js

@@ -1,7 +1,7 @@
 "use client";
 
 import { forwardRef, useEffect, useRef, useState } from "react";
-import { useSize } from "ahooks";
+import { useSize } from "soda-hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** 尺寸渐变的组件 */
 export const TransitionBox = /*#__PURE__*/forwardRef((props, ref) => {

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useEffect","useRef","useState","useSize","jsx","_jsx","TransitionBox","props","ref","style","containerClassName","containerStyle","children","vertical","horizontal","time","rest","container","size","width","height","count","setCount","Math","min","outerStyle","transitionProperty","filter","Boolean","join","undefined","transitionDuration","overflow","position","className"],"sources":["../../../src/components/TransitionBox.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from \"react\"\nimport { useSize } from \"ahooks\"\n\nexport interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {\n    containerClassName?: string\n    containerStyle?: CSSProperties\n    vertical?: boolean\n    horizontal?: boolean\n    time?: number\n}\n\n/** 尺寸渐变的组件 */\nexport const TransitionBox: FC<TransitionBoxProps> = forwardRef<HTMLDivElement, TransitionBoxProps>((props, ref) => {\n    const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props\n    const container = useRef<HTMLDivElement>(null)\n    const size = useSize(container)\n    const width = size?.width ?? 0\n    const height = size?.height ?? 0\n    const [count, setCount] = useState(0)\n\n    useEffect(() => {\n        setCount(count => Math.min(count + 1, 3))\n    }, [width, height])\n\n    const outerStyle: CSSProperties = {\n        transitionProperty: count === 3 ? [horizontal && \"width\", vertical && \"height\"].filter(Boolean).join(\", \") : undefined,\n        transitionDuration: count === 3 ? `${time}ms` : undefined,\n        width,\n        height,\n        overflow: \"hidden\",\n        position: \"relative\",\n        ...style,\n    }\n\n    return (\n        <div ref={ref} style={outerStyle} {...rest}>\n            <div className={containerClassName} style={{ position: \"absolute\", ...containerStyle }} ref={container}>\n                {children}\n            </div>\n        </div>\n    )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAA4CA,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAClG,SAASC,OAAO,QAAQ,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAUhC;AACA,OAAO,MAAMC,aAAqC,gBAAGP,UAAU,CAAqC,CAACQ,KAAK,EAAEC,GAAG,KAAK;EAChH,MAAM;IAAEC,KAAK;IAAEC,kBAAkB;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,QAAQ,GAAG,IAAI;IAAEC,UAAU,GAAG,IAAI;IAAEC,IAAI,GAAG,IAAI;IAAE,GAAGC;EAAK,CAAC,GAAGT,KAAK;EAC/H,MAAMU,SAAS,GAAGhB,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAMiB,IAAI,GAAGf,OAAO,CAACc,SAAS,CAAC;EAC/B,MAAME,KAAK,GAAGD,IAAI,EAAEC,KAAK,IAAI,CAAC;EAC9B,MAAMC,MAAM,GAAGF,IAAI,EAAEE,MAAM,IAAI,CAAC;EAChC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGpB,QAAQ,CAAC,CAAC,CAAC;EAErCF,SAAS,CAAC,MAAM;IACZsB,QAAQ,CAACD,KAAK,IAAIE,IAAI,CAACC,GAAG,CAACH,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;EAC7C,CAAC,EAAE,CAACF,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnB,MAAMK,UAAyB,GAAG;IAC9BC,kBAAkB,EAAEL,KAAK,KAAK,CAAC,GAAG,CAACP,UAAU,IAAI,OAAO,EAAED,QAAQ,IAAI,QAAQ,CAAC,CAACc,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC,GAAGC,SAAS;IACtHC,kBAAkB,EAAEV,KAAK,KAAK,CAAC,GAAI,GAAEN,IAAK,IAAG,GAAGe,SAAS;IACzDX,KAAK;IACLC,MAAM;IACNY,QAAQ,EAAE,QAAQ;IAClBC,QAAQ,EAAE,UAAU;IACpB,GAAGxB;EACP,CAAC;EAED,oBACIJ,IAAA;IAAKG,GAAG,EAAEA,GAAI;IAACC,KAAK,EAAEgB,UAAW;IAAA,GAAKT,IAAI;IAAAJ,QAAA,eACtCP,IAAA;MAAK6B,SAAS,EAAExB,kBAAmB;MAACD,KAAK,EAAE;QAAEwB,QAAQ,EAAE,UAAU;QAAE,GAAGtB;MAAe,CAAE;MAACH,GAAG,EAAES,SAAU;MAAAL,QAAA,EAClGA;IAAQ,CACR;EAAC,CACL,CAAC;AAEd,CAAC,CAAC"}
+{"version":3,"names":["forwardRef","useEffect","useRef","useState","useSize","jsx","_jsx","TransitionBox","props","ref","style","containerClassName","containerStyle","children","vertical","horizontal","time","rest","container","size","width","height","count","setCount","Math","min","outerStyle","transitionProperty","filter","Boolean","join","undefined","transitionDuration","overflow","position","className"],"sources":["../../../src/components/TransitionBox.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from \"react\"\nimport { useSize } from \"soda-hooks\"\n\nexport interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {\n    containerClassName?: string\n    containerStyle?: CSSProperties\n    vertical?: boolean\n    horizontal?: boolean\n    time?: number\n}\n\n/** 尺寸渐变的组件 */\nexport const TransitionBox: FC<TransitionBoxProps> = forwardRef<HTMLDivElement, TransitionBoxProps>((props, ref) => {\n    const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props\n    const container = useRef<HTMLDivElement>(null)\n    const size = useSize(container)\n    const width = size?.width ?? 0\n    const height = size?.height ?? 0\n    const [count, setCount] = useState(0)\n\n    useEffect(() => {\n        setCount(count => Math.min(count + 1, 3))\n    }, [width, height])\n\n    const outerStyle: CSSProperties = {\n        transitionProperty: count === 3 ? [horizontal && \"width\", vertical && \"height\"].filter(Boolean).join(\", \") : undefined,\n        transitionDuration: count === 3 ? `${time}ms` : undefined,\n        width,\n        height,\n        overflow: \"hidden\",\n        position: \"relative\",\n        ...style,\n    }\n\n    return (\n        <div ref={ref} style={outerStyle} {...rest}>\n            <div className={containerClassName} style={{ position: \"absolute\", ...containerStyle }} ref={container}>\n                {children}\n            </div>\n        </div>\n    )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAA4CA,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAClG,SAASC,OAAO,QAAQ,YAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAUpC;AACA,OAAO,MAAMC,aAAqC,gBAAGP,UAAU,CAAqC,CAACQ,KAAK,EAAEC,GAAG,KAAK;EAChH,MAAM;IAAEC,KAAK;IAAEC,kBAAkB;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,QAAQ,GAAG,IAAI;IAAEC,UAAU,GAAG,IAAI;IAAEC,IAAI,GAAG,IAAI;IAAE,GAAGC;EAAK,CAAC,GAAGT,KAAK;EAC/H,MAAMU,SAAS,GAAGhB,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAMiB,IAAI,GAAGf,OAAO,CAACc,SAAS,CAAC;EAC/B,MAAME,KAAK,GAAGD,IAAI,EAAEC,KAAK,IAAI,CAAC;EAC9B,MAAMC,MAAM,GAAGF,IAAI,EAAEE,MAAM,IAAI,CAAC;EAChC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGpB,QAAQ,CAAC,CAAC,CAAC;EAErCF,SAAS,CAAC,MAAM;IACZsB,QAAQ,CAACD,KAAK,IAAIE,IAAI,CAACC,GAAG,CAACH,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;EAC7C,CAAC,EAAE,CAACF,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnB,MAAMK,UAAyB,GAAG;IAC9BC,kBAAkB,EAAEL,KAAK,KAAK,CAAC,GAAG,CAACP,UAAU,IAAI,OAAO,EAAED,QAAQ,IAAI,QAAQ,CAAC,CAACc,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC,GAAGC,SAAS;IACtHC,kBAAkB,EAAEV,KAAK,KAAK,CAAC,GAAI,GAAEN,IAAK,IAAG,GAAGe,SAAS;IACzDX,KAAK;IACLC,MAAM;IACNY,QAAQ,EAAE,QAAQ;IAClBC,QAAQ,EAAE,UAAU;IACpB,GAAGxB;EACP,CAAC;EAED,oBACIJ,IAAA;IAAKG,GAAG,EAAEA,GAAI;IAACC,KAAK,EAAEgB,UAAW;IAAA,GAAKT,IAAI;IAAAJ,QAAA,eACtCP,IAAA;MAAK6B,SAAS,EAAExB,kBAAmB;MAACD,KAAK,EAAE;QAAEwB,QAAQ,EAAE,UAAU;QAAE,GAAGtB;MAAe,CAAE;MAACH,GAAG,EAAES,SAAU;MAAAL,QAAA,EAClGA;IAAQ,CACR;EAAC,CACL,CAAC;AAEd,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.10.3",
+  "version": "5.10.4",
   "description": "格数科技自用组件库",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -27,12 +27,12 @@
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",
-    "ahooks": "^3.8.4",
     "clipboard": "^2.0.11",
     "echarts": "^5.6.0",
     "hls.js": "^1.5.20",
     "smooth-scrollbar": "^8.8.4",
-    "deepsea-tools": "5.19.3"
+    "deepsea-tools": "5.19.3",
+    "soda-hooks": "6.5.8"
   },
   "peerDependencies": {
     "@types/react": ">=18.3.18",

package/src/components/AutoScroll.tsx

@@ -2,7 +2,7 @@
 
 import { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import { css } from "@emotion/css"
-import { useSize } from "ahooks"
+import { useSize } from "soda-hooks"
 import { clsx, getArray } from "deepsea-tools"
 import Scrollbar from "smooth-scrollbar"
 import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"

package/src/components/CopyButton.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
-import { useLatest } from "ahooks"
+import { useLatest } from "soda-hooks"
 import ClipboardJS, { Event } from "clipboard"
 
 export { Event } from "clipboard"

package/src/components/Flow.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { css } from "@emotion/css"
-import { useSize } from "ahooks"
+import { useSize } from "soda-hooks"
 import { clsx } from "deepsea-tools"
 import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
 

package/src/components/InfiniteScroll.tsx

@@ -2,7 +2,7 @@
 
 import { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import { css } from "@emotion/css"
-import { useSize } from "ahooks"
+import { useSize } from "soda-hooks"
 import { clsx } from "deepsea-tools"
 
 export type InfiniteScrollProps = ComponentPropsWithoutRef<"div"> & {

package/src/components/TransitionBox.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from "react"
-import { useSize } from "ahooks"
+import { useSize } from "soda-hooks"
 
 export interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {
     containerClassName?: string