deepsea-components 3.2.2 → 4.0.1

package/dist/cjs/components/Flow.js

@@ -149,10 +149,13 @@ function Flow(props) {
   const { itemWidth, itemHeight, columnGap, rowGap, gap, maxRows, data, render, keyExactor, wrapperClassName, wrapperStyle, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, element, ...rest } = props;
   const ele = (0, import_react.useRef)(null);
   const size = (0, import_ahooks.useSize)(ele);
+  const width = (0, import_react.useRef)(size?.width || 0);
+  if (size && size.width !== 0)
+    width.current = size.width;
   (0, import_react.useImperativeHandle)(element, () => ele.current, [ele.current]);
-  if (!size || size.width === 0)
+  if (width.current === 0)
     return /* @__PURE__ */ React.createElement("div", { ref: ele, ...rest });
-  return /* @__PURE__ */ React.createElement(ManualFlow, { element: ele, ...props, width: size.width });
+  return /* @__PURE__ */ React.createElement(ManualFlow, { element: ele, ...props, width: width.current });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

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

package/dist/esm/components/Flow.js

@@ -170,16 +170,17 @@ export function Flow(props) {
   } = props;
   const ele = useRef(null);
   const size = useSize(ele);
+  const width = useRef(size?.width || 0);
+  if (size && size.width !== 0) width.current = size.width;
   useImperativeHandle(element, () => ele.current, [ele.current]);
-  // 如果无法获取到宽度，直接返回
-  if (!size || size.width === 0) return /*#__PURE__*/_jsx("div", {
+  if (width.current === 0) return /*#__PURE__*/_jsx("div", {
     ref: ele,
     ...rest
   });
   return /*#__PURE__*/_jsx(ManualFlow, {
     element: ele,
     ...props,
-    width: size.width
+    width: width.current
   });
 }
 //# sourceMappingURL=Flow.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "deepsea-components",
-    "version": "3.2.2",
+    "version": "4.0.1",
     "description": "格数科技自用组件库",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -9,7 +9,7 @@
         "dev": "father dev",
         "build": "father build",
         "build:deps": "father prebundle",
-        "prepublishOnly": "father doctor && npm run build"
+        "prepublishOnly": "npm run build"
     },
     "repository": {
         "type": "git",
@@ -32,17 +32,17 @@
     "dependencies": {
         "@emotion/css": "^11.11.2",
         "ahooks": "^3.7.11",
-        "deepsea-tools": "npm:deepsea-tools@latest",
+        "deepsea-tools": "workspace:*",
         "hls.js": "^1.5.8",
         "smooth-scrollbar": "^8.8.4",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
     },
     "devDependencies": {
-        "@types/react": "^18.3.1",
         "father": "^4.4.1",
         "typescript": "^5.4.5"
     },
     "peerDependencies": {
+        "@types/react": "^18.3.1",
         "react": "^18.3.1"
     }
-}
+}

package/src/components/Flow.tsx

@@ -206,8 +206,9 @@ export function Flow<T>(props: FlowProps<T>) {
     const { itemWidth, itemHeight, columnGap, rowGap, gap, maxRows, data, render, keyExactor, wrapperClassName, wrapperStyle, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, element, ...rest } = props
     const ele = useRef<HTMLDivElement>(null)
     const size = useSize(ele)
+    const width = useRef(size?.width || 0)
+    if (size && size.width !== 0) width.current = size.width
     useImperativeHandle(element, () => ele.current!, [ele.current])
-    // 如果无法获取到宽度，直接返回
-    if (!size || size.width === 0) return <div ref={ele} {...rest} />
-    return <ManualFlow element={ele} {...props} width={size.width} />
+    if (width.current === 0) return <div ref={ele} {...rest} />
+    return <ManualFlow element={ele} {...props} width={width.current} />
 }