deepsea-components 3.1.0 → 3.2.0-beta.20240606182955

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

@@ -68,8 +68,10 @@ export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "chil
     transitionDuration?: number;
     /** 变化的回调函数 */
     onSizeChange?: (sizeData: FlowSizeData) => void;
+    /** 宽度 */
+    width?: number;
 }
 export declare function getGapRange(gap?: undefined | number | "auto" | (number | "auto")[]): [number, number | "auto"];
 export declare function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | "auto"): [number, number];
 /** 自适应浮动组件 */
-export declare function Flow<T>(props: FlowProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Flow<T>(props: FlowProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/components/Flow.js

@@ -47,15 +47,13 @@ function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
     return [count, maxGap];
   return [count, averageGap];
 }
-function Flow(props) {
-  let { itemWidth, itemHeight, columnGap, rowGap, maxRows, data, render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, gap = 0, ...rest } = props;
+function RealFlow(props) {
+  let { itemWidth, itemHeight, columnGap, rowGap, maxRows, data, render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, gap = 0, width, ...rest } = props;
   rowGap ??= gap;
   columnGap ??= gap;
   const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
-  const [width, setWidth] = (0, import_react.useState)(0);
   const [columnCount, setColumnCount] = (0, import_react.useState)(1);
   const [columnGapSize, setColumnGapSize] = (0, import_react.useState)(minColumnGap);
-  const [showItems, setShowItems] = (0, import_react.useState)(false);
   const ele = (0, import_react.useRef)(null);
   const contentRows = Math.ceil(data.length / columnCount);
   const contentShownRows = typeof maxRows === "number" ? Math.min(contentRows, maxRows) : contentRows;
@@ -73,29 +71,20 @@ function Flow(props) {
       return false;
     return index >= maxRows * columnCount;
   }
+  function task() {
+    const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap);
+    setColumnCount(newColumnCount);
+    setColumnGapSize(newColumnGapSize);
+  }
   (0, import_react.useEffect)(() => {
-    let timeout;
-    const observer = new ResizeObserver((entries) => {
-      clearTimeout(timeout);
-      function task() {
-        const { width: width2 } = entries[0].contentRect;
-        const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width2, itemWidth, minColumnGap, maxColumnGap);
-        setShowItems(true);
-        setWidth(width2);
-        setColumnCount(newColumnCount);
-        setColumnGapSize(newColumnGapSize);
-      }
-      if (throttle === 0) {
-        task();
-      } else {
-        timeout = window.setTimeout(task, throttle || 200);
-      }
-    });
-    observer.observe(ele.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, [itemWidth, throttle, columnGap]);
+    task();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (throttle === 0)
+      return task();
+    const timeout = setTimeout(task, throttle || 200);
+    return () => clearTimeout(timeout);
+  }, [width, itemWidth, throttle, columnGap]);
   (0, import_react.useEffect)(() => {
     onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null });
   }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows]);
@@ -114,20 +103,20 @@ function Flow(props) {
       style: (0, import_utils.transformCSSVariable)({ height: (0, import_utils.px)(height) }, style),
       ...rest
     },
-    showItems && data.map((item, index, arr) => /* @__PURE__ */ React.createElement(
+    data.map((item, index, arr) => /* @__PURE__ */ React.createElement(
       "div",
       {
         key: keyExactor ? keyExactor(item, index, arr) : index,
         className: (0, import_deepsea_tools.clsx)(
           import_css.css`
-                                position: absolute;
-                                width: var(--width);
-                                height: var(--height);
-                                transition: var(--transition);
-                                left: 0;
-                                top: 0;
-                                transform: translate(var(--left), var(--top));
-                            `,
+                            position: absolute;
+                            width: var(--width);
+                            height: var(--height);
+                            transition: var(--transition);
+                            left: 0;
+                            top: 0;
+                            transform: translate(var(--left), var(--top));
+                        `,
           wrapperClassName
         ),
         style: (0, import_utils.transformCSSVariable)(
@@ -146,10 +135,10 @@ function Flow(props) {
         {
           className: (0, import_deepsea_tools.clsx)(
             import_css.css`
-                                    width: 100%;
-                                    height: 100%;
-                                    display: var(--display);
-                                `,
+                                width: 100%;
+                                height: 100%;
+                                display: var(--display);
+                            `,
             containerClassName
           ),
           style: (0, import_utils.transformCSSVariable)({ display: getHidden(index) ? "none" : "block" }, containerStyle)
@@ -159,6 +148,12 @@ function Flow(props) {
     ))
   );
 }
+function Flow(props) {
+  const { width, data } = props;
+  if (!width || data.length === 0)
+    return null;
+  return /* @__PURE__ */ React.createElement(RealFlow, { ...props, width });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Flow,

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 { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, useEffect, 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}\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 function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): [number, number] {\r\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\r\n    if (count === 1) return [count, 0]\r\n    const averageGap = (width - itemWidth * count) / (count - 1)\r\n    if (averageGap < minGap) return [count, minGap]\r\n    if (maxGap !== \"auto\" && averageGap > maxGap) return [count, maxGap]\r\n    return [count, averageGap]\r\n}\r\n\r\ninterface Position {\r\n    left: number\r\n    top: number\r\n}\r\n\r\n/** 自适应浮动组件 */\r\nexport function Flow<T>(props: FlowProps<T>) {\r\n    let { itemWidth, itemHeight, columnGap, rowGap, maxRows, data, render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, gap = 0, ...rest } = props\r\n    rowGap ??= gap\r\n    columnGap ??= gap\r\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\r\n    const [width, setWidth] = useState(0)\r\n    const [columnCount, setColumnCount] = useState(1)\r\n    const [columnGapSize, setColumnGapSize] = useState(minColumnGap)\r\n    const [showItems, setShowItems] = useState(false)\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): Position {\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    useEffect(() => {\r\n        let timeout: number\r\n        const observer = new ResizeObserver(entries => {\r\n            clearTimeout(timeout)\r\n            function task() {\r\n                const { width } = entries[0].contentRect\r\n                const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap)\r\n                setShowItems(true)\r\n                setWidth(width)\r\n                setColumnCount(newColumnCount)\r\n                setColumnGapSize(newColumnGapSize)\r\n            }\r\n            if (throttle === 0) {\r\n                task()\r\n            } else {\r\n                timeout = window.setTimeout(task, throttle || 200)\r\n            }\r\n        })\r\n        observer.observe(ele.current!)\r\n\r\n        return () => {\r\n            observer.disconnect()\r\n        }\r\n    }, [itemWidth, throttle, columnGap])\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            {showItems &&\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"],
-  "mappings": "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",
-  "names": ["width"]
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, useEffect, 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    /** 宽度 */\r\n    width?: number\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 function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): [number, number] {\r\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\r\n    if (count === 1) return [count, 0]\r\n    const averageGap = (width - itemWidth * count) / (count - 1)\r\n    if (averageGap < minGap) return [count, minGap]\r\n    if (maxGap !== \"auto\" && averageGap > maxGap) return [count, maxGap]\r\n    return [count, averageGap]\r\n}\r\n\r\ninterface Position {\r\n    left: number\r\n    top: number\r\n}\r\n\r\nfunction RealFlow<T>(props: FlowProps<T> & { width: number }) {\r\n    let { itemWidth, itemHeight, columnGap, rowGap, maxRows, data, render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, gap = 0, width, ...rest } = props\r\n    rowGap ??= gap\r\n    columnGap ??= gap\r\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\r\n    const [columnCount, setColumnCount] = useState(1)\r\n    const [columnGapSize, setColumnGapSize] = useState(minColumnGap)\r\n\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): Position {\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    function task() {\r\n        const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap)\r\n        setColumnCount(newColumnCount)\r\n        setColumnGapSize(newColumnGapSize)\r\n    }\r\n\r\n    useEffect(() => {\r\n        task()\r\n    }, [])\r\n\r\n    useEffect(() => {\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, columnGap])\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 { width, data } = props\r\n    if (!width || data.length === 0) return null\r\n    return <RealFlow {...props} width={width} />\r\n}\r\n"],
+  "mappings": "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",
+  "names": []
 }

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

@@ -2,5 +2,4 @@ import { MediaHTMLAttributes } from "react";
 export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
     src: string;
 }
-declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;
-export default HlsPlayer;
+export declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;

package/dist/cjs/components/HlsPlayer.js

@@ -30,7 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/HlsPlayer.tsx
 var HlsPlayer_exports = {};
 __export(HlsPlayer_exports, {
-  default: () => HlsPlayer_default
+  HlsPlayer: () => HlsPlayer
 });
 module.exports = __toCommonJS(HlsPlayer_exports);
 var import_hls = __toESM(require("hls.js"));
@@ -58,5 +58,8 @@ var HlsPlayer = (0, import_react.forwardRef)((props, ref) => {
   }, [src]);
   return /* @__PURE__ */ React.createElement("video", { ref: video, ...rest });
 });
-var HlsPlayer_default = HlsPlayer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HlsPlayer
+});
 //# sourceMappingURL=HlsPlayer.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/HlsPlayer.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nconst HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n\r\nexport default HlsPlayer\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAgB;AAChB,mBAAwF;AAMxF,IAAM,gBAAY,yBAA6C,CAAC,OAAO,QAAQ;AAC3E,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,wCAAoB,KAAK,MAAM,MAAM,SAAU,CAAC,CAAC;AAEjD,8BAAU,MAAM;AACZ,UAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAI,CAAC,UAAU,CAAC;AAAK;AACrB,QAAI,OAAO,YAAY,+BAA+B,GAAG;AACrD,aAAO,MAAM;AACb;AAAA,IACJ;AACA,QAAI,WAAAA,QAAI,YAAY,GAAG;AACnB,YAAM,MAAM,IAAI,WAAAA,QAAI;AACpB,UAAI,WAAW,GAAG;AAClB,UAAI,YAAY,MAAM;AACtB,aAAO,MAAM;AACT,YAAI,QAAQ;AAAA,MAChB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,oCAAC,WAAM,KAAK,OAAQ,GAAG,MAAM;AACxC,CAAC;AAED,IAAO,oBAAQ;",
+  "sourcesContent": ["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nexport const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAgB;AAChB,mBAAwF;AAMjF,IAAM,gBAAY,yBAA6C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,wCAAoB,KAAK,MAAM,MAAM,SAAU,CAAC,CAAC;AAEjD,8BAAU,MAAM;AACZ,UAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAI,CAAC,UAAU,CAAC;AAAK;AACrB,QAAI,OAAO,YAAY,+BAA+B,GAAG;AACrD,aAAO,MAAM;AACb;AAAA,IACJ;AACA,QAAI,WAAAA,QAAI,YAAY,GAAG;AACnB,YAAM,MAAM,IAAI,WAAAA,QAAI;AACpB,UAAI,WAAW,GAAG;AAClB,UAAI,YAAY,MAAM;AACtB,aAAO,MAAM;AACT,YAAI,QAAQ;AAAA,MAChB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,oCAAC,WAAM,KAAK,OAAQ,GAAG,MAAM;AACxC,CAAC;",
   "names": ["Hls"]
 }

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

@@ -1,3 +1,5 @@
 import { HTMLAttributes } from "react";
-declare const Skeleton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export default Skeleton;
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    loading?: boolean;
+}
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/Skeleton.js

@@ -20,14 +20,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Skeleton.tsx
 var Skeleton_exports = {};
 __export(Skeleton_exports, {
-  default: () => Skeleton_default
+  Skeleton: () => Skeleton
 });
 module.exports = __toCommonJS(Skeleton_exports);
 var import_css = require("@emotion/css");
 var import_deepsea_tools = require("deepsea-tools");
 var import_react = require("react");
 var Skeleton = (0, import_react.forwardRef)((props, ref) => {
-  const { className, ...rest } = props;
+  let { className, loading, children, ...rest } = props;
+  loading ??= children === void 0 || children === null;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -42,20 +43,25 @@ var Skeleton = (0, import_react.forwardRef)((props, ref) => {
                             background-position: 400px 0px;
                         }
                     }
-
-                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
-                    animation-duration: 1s;
-                    animation-fill-mode: forwards;
-                    animation-iteration-count: infinite;
-                    animation-name: shimmer;
-                    animation-timing-function: linear;
-                    background-size: 800px 104px;
                 `,
+        loading && import_css.css`
+                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
+                        animation-duration: 1s;
+                        animation-fill-mode: forwards;
+                        animation-iteration-count: infinite;
+                        animation-name: shimmer;
+                        animation-timing-function: linear;
+                        background-size: 800px 104px;
+                    `,
         className
       ),
       ...rest
-    }
+    },
+    children
   );
 });
-var Skeleton_default = Skeleton;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton
+});
 //# sourceMappingURL=Skeleton.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Skeleton.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAE3C,IAAM,eAAW,yBAA2D,CAAC,OAAO,QAAQ;AACxF,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI;AAE/B,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;AAED,IAAO,mBAAQ;",
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\r\n    loading?: boolean\r\n}\r\n\r\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\r\n    let { className, loading, children, ...rest } = props\r\n\r\n    loading ??= children === undefined || children === null\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n                `,\r\n                loading &&\r\n                    css`\r\n                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                        animation-duration: 1s;\r\n                        animation-fill-mode: forwards;\r\n                        animation-iteration-count: infinite;\r\n                        animation-name: shimmer;\r\n                        animation-timing-function: linear;\r\n                        background-size: 800px 104px;\r\n                    `,\r\n                className\r\n            )}\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAMpC,IAAM,eAAW,yBAA0C,CAAC,OAAO,QAAQ;AAC9E,MAAI,EAAE,WAAW,SAAS,UAAU,GAAG,KAAK,IAAI;AAEhD,cAAY,aAAa,UAAa,aAAa;AAEnD,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUA,WACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASJ;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IACH;AAAA,EACL;AAER,CAAC;",
   "names": []
 }

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

@@ -68,8 +68,10 @@ export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "chil
     transitionDuration?: number;
     /** 变化的回调函数 */
     onSizeChange?: (sizeData: FlowSizeData) => void;
+    /** 宽度 */
+    width?: number;
 }
 export declare function getGapRange(gap?: undefined | number | "auto" | (number | "auto")[]): [number, number | "auto"];
 export declare function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | "auto"): [number, number];
 /** 自适应浮动组件 */
-export declare function Flow<T>(props: FlowProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Flow<T>(props: FlowProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/Flow.js

@@ -18,8 +18,7 @@ export function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
   if (maxGap !== "auto" && averageGap > maxGap) return [count, maxGap];
   return [count, averageGap];
 }
-/** 自适应浮动组件 */
-export function Flow(props) {
+function RealFlow(props) {
   let {
     itemWidth,
     itemHeight,
@@ -39,15 +38,14 @@ export function Flow(props) {
     containerClassName,
     containerStyle,
     gap = 0,
+    width,
     ...rest
   } = props;
   rowGap ??= gap;
   columnGap ??= gap;
   const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
-  const [width, setWidth] = useState(0);
   const [columnCount, setColumnCount] = useState(1);
   const [columnGapSize, setColumnGapSize] = useState(minColumnGap);
-  const [showItems, setShowItems] = useState(false);
   const ele = useRef(null);
   const contentRows = Math.ceil(data.length / columnCount);
   const contentShownRows = typeof maxRows === "number" ? Math.min(contentRows, maxRows) : contentRows;
@@ -64,31 +62,19 @@ export function Flow(props) {
     if (typeof maxRows !== "number") return false;
     return index >= maxRows * columnCount;
   }
+  function task() {
+    const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap);
+    setColumnCount(newColumnCount);
+    setColumnGapSize(newColumnGapSize);
+  }
   useEffect(() => {
-    let timeout;
-    const observer = new ResizeObserver(entries => {
-      clearTimeout(timeout);
-      function task() {
-        const {
-          width
-        } = entries[0].contentRect;
-        const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap);
-        setShowItems(true);
-        setWidth(width);
-        setColumnCount(newColumnCount);
-        setColumnGapSize(newColumnGapSize);
-      }
-      if (throttle === 0) {
-        task();
-      } else {
-        timeout = window.setTimeout(task, throttle || 200);
-      }
-    });
-    observer.observe(ele.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, [itemWidth, throttle, columnGap]);
+    task();
+  }, []);
+  useEffect(() => {
+    if (throttle === 0) return task();
+    const timeout = setTimeout(task, throttle || 200);
+    return () => clearTimeout(timeout);
+  }, [width, itemWidth, throttle, columnGap]);
   useEffect(() => {
     onSizeChange?.({
       width,
@@ -115,16 +101,16 @@ export function Flow(props) {
       height: px(height)
     }, style),
     ...rest,
-    children: showItems && data.map((item, index, arr) => /*#__PURE__*/_jsx("div", {
+    children: data.map((item, index, arr) => /*#__PURE__*/_jsx("div", {
       className: clsx(css`
-                                position: absolute;
-                                width: var(--width);
-                                height: var(--height);
-                                transition: var(--transition);
-                                left: 0;
-                                top: 0;
-                                transform: translate(var(--left), var(--top));
-                            `, wrapperClassName),
+                            position: absolute;
+                            width: var(--width);
+                            height: var(--height);
+                            transition: var(--transition);
+                            left: 0;
+                            top: 0;
+                            transform: translate(var(--left), var(--top));
+                        `, wrapperClassName),
       style: transformCSSVariable({
         width: px(itemWidth),
         height: px(itemHeight),
@@ -134,10 +120,10 @@ export function Flow(props) {
       }, wrapperStyle),
       children: /*#__PURE__*/_jsx("div", {
         className: clsx(css`
-                                    width: 100%;
-                                    height: 100%;
-                                    display: var(--display);
-                                `, containerClassName),
+                                width: 100%;
+                                height: 100%;
+                                display: var(--display);
+                            `, containerClassName),
         style: transformCSSVariable({
           display: getHidden(index) ? "none" : "block"
         }, containerStyle),
@@ -146,4 +132,17 @@ export function Flow(props) {
     }, keyExactor ? keyExactor(item, index, arr) : index))
   });
 }
+
+/** 自适应浮动组件 */
+export function Flow(props) {
+  const {
+    width,
+    data
+  } = props;
+  if (!width || data.length === 0) return null;
+  return /*#__PURE__*/_jsx(RealFlow, {
+    ...props,
+    width: width
+  });
+}
 //# sourceMappingURL=Flow.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["css","clsx","useEffect","useRef","useState","px","transformCSSVariable","jsx","_jsx","getGapRange","gap","Array","isArray","getGapCountAndSize","width","itemWidth","minGap","maxGap","count","Math","floor","averageGap","Flow","props","itemHeight","columnGap","rowGap","maxRows","data","render","keyExactor","className","style","wrapperClassName","wrapperStyle","throttle","transitionDuration","onSizeChange","containerClassName","containerStyle","rest","minColumnGap","maxColumnGap","setWidth","columnCount","setColumnCount","columnGapSize","setColumnGapSize","showItems","setShowItems","ele","contentRows","ceil","length","contentShownRows","min","height","getPosition","index","y","x","left","top","getHidden","timeout","observer","ResizeObserver","entries","clearTimeout","task","contentRect","newColumnCount","newColumnGapSize","window","setTimeout","observe","current","disconnect","rowCount","overflow","itemCount","ref","children","map","item","arr","transition","display"],"sources":["../../../src/components/Flow.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, useEffect, 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}\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 function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): [number, number] {\r\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\r\n    if (count === 1) return [count, 0]\r\n    const averageGap = (width - itemWidth * count) / (count - 1)\r\n    if (averageGap < minGap) return [count, minGap]\r\n    if (maxGap !== \"auto\" && averageGap > maxGap) return [count, maxGap]\r\n    return [count, averageGap]\r\n}\r\n\r\ninterface Position {\r\n    left: number\r\n    top: number\r\n}\r\n\r\n/** 自适应浮动组件 */\r\nexport function Flow<T>(props: FlowProps<T>) {\r\n    let { itemWidth, itemHeight, columnGap, rowGap, maxRows, data, render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, gap = 0, ...rest } = props\r\n    rowGap ??= gap\r\n    columnGap ??= gap\r\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\r\n    const [width, setWidth] = useState(0)\r\n    const [columnCount, setColumnCount] = useState(1)\r\n    const [columnGapSize, setColumnGapSize] = useState(minColumnGap)\r\n    const [showItems, setShowItems] = useState(false)\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): Position {\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    useEffect(() => {\r\n        let timeout: number\r\n        const observer = new ResizeObserver(entries => {\r\n            clearTimeout(timeout)\r\n            function task() {\r\n                const { width } = entries[0].contentRect\r\n                const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap)\r\n                setShowItems(true)\r\n                setWidth(width)\r\n                setColumnCount(newColumnCount)\r\n                setColumnGapSize(newColumnGapSize)\r\n            }\r\n            if (throttle === 0) {\r\n                task()\r\n            } else {\r\n                timeout = window.setTimeout(task, throttle || 200)\r\n            }\r\n        })\r\n        observer.observe(ele.current!)\r\n\r\n        return () => {\r\n            observer.disconnect()\r\n        }\r\n    }, [itemWidth, throttle, columnGap])\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            {showItems &&\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"],"mappings":"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"}
+{"version":3,"names":["css","clsx","useEffect","useRef","useState","px","transformCSSVariable","jsx","_jsx","getGapRange","gap","Array","isArray","getGapCountAndSize","width","itemWidth","minGap","maxGap","count","Math","floor","averageGap","RealFlow","props","itemHeight","columnGap","rowGap","maxRows","data","render","keyExactor","className","style","wrapperClassName","wrapperStyle","throttle","transitionDuration","onSizeChange","containerClassName","containerStyle","rest","minColumnGap","maxColumnGap","columnCount","setColumnCount","columnGapSize","setColumnGapSize","ele","contentRows","ceil","length","contentShownRows","min","height","getPosition","index","y","x","left","top","getHidden","task","newColumnCount","newColumnGapSize","timeout","setTimeout","clearTimeout","rowCount","overflow","itemCount","ref","children","map","item","arr","transition","display","Flow"],"sources":["../../../src/components/Flow.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, useEffect, 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    /** 宽度 */\r\n    width?: number\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 function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): [number, number] {\r\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\r\n    if (count === 1) return [count, 0]\r\n    const averageGap = (width - itemWidth * count) / (count - 1)\r\n    if (averageGap < minGap) return [count, minGap]\r\n    if (maxGap !== \"auto\" && averageGap > maxGap) return [count, maxGap]\r\n    return [count, averageGap]\r\n}\r\n\r\ninterface Position {\r\n    left: number\r\n    top: number\r\n}\r\n\r\nfunction RealFlow<T>(props: FlowProps<T> & { width: number }) {\r\n    let { itemWidth, itemHeight, columnGap, rowGap, maxRows, data, render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, gap = 0, width, ...rest } = props\r\n    rowGap ??= gap\r\n    columnGap ??= gap\r\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\r\n    const [columnCount, setColumnCount] = useState(1)\r\n    const [columnGapSize, setColumnGapSize] = useState(minColumnGap)\r\n\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): Position {\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    function task() {\r\n        const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap)\r\n        setColumnCount(newColumnCount)\r\n        setColumnGapSize(newColumnGapSize)\r\n    }\r\n\r\n    useEffect(() => {\r\n        task()\r\n    }, [])\r\n\r\n    useEffect(() => {\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, columnGap])\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 { width, data } = props\r\n    if (!width || data.length === 0) return null\r\n    return <RealFlow {...props} width={width} />\r\n}\r\n"],"mappings":"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"}

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

@@ -2,5 +2,4 @@ import { MediaHTMLAttributes } from "react";
 export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
     src: string;
 }
-declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;
-export default HlsPlayer;
+export declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;

package/dist/esm/components/HlsPlayer.js

@@ -3,7 +3,7 @@
 import Hls from "hls.js";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-const HlsPlayer = /*#__PURE__*/forwardRef((props, ref) => {
+export const HlsPlayer = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     src,
     ...rest
@@ -33,5 +33,4 @@ const HlsPlayer = /*#__PURE__*/forwardRef((props, ref) => {
     ...rest
   });
 });
-export default HlsPlayer;
 //# sourceMappingURL=HlsPlayer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Hls","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","HlsPlayer","props","ref","src","rest","video","current","player","canPlayType","isSupported","hls","loadSource","attachMedia","destroy"],"sources":["../../../src/components/HlsPlayer.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nconst HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n\r\nexport default HlsPlayer\r\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,GAAG,MAAM,QAAQ;AACxB,SAA8BC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAM/F,MAAMC,SAAS,gBAAGN,UAAU,CAAmC,CAACO,KAAK,EAAEC,GAAG,KAAK;EAC3E,MAAM;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC9B,MAAMI,KAAK,GAAGR,MAAM,CAAmB,IAAI,CAAC;EAE5CD,mBAAmB,CAACM,GAAG,EAAE,MAAMG,KAAK,CAACC,OAAQ,EAAE,EAAE,CAAC;EAElDX,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEW,OAAO,EAAEC;IAAO,CAAC,GAAGF,KAAK;IACjC,IAAI,CAACE,MAAM,IAAI,CAACJ,GAAG,EAAE;IACrB,IAAII,MAAM,CAACC,WAAW,CAAC,+BAA+B,CAAC,EAAE;MACrDD,MAAM,CAACJ,GAAG,GAAGA,GAAG;MAChB;IACJ;IACA,IAAIV,GAAG,CAACgB,WAAW,CAAC,CAAC,EAAE;MACnB,MAAMC,GAAG,GAAG,IAAIjB,GAAG,CAAC,CAAC;MACrBiB,GAAG,CAACC,UAAU,CAACR,GAAG,CAAC;MACnBO,GAAG,CAACE,WAAW,CAACL,MAAM,CAAC;MACvB,OAAO,MAAM;QACTG,GAAG,CAACG,OAAO,CAAC,CAAC;MACjB,CAAC;IACL;EACJ,CAAC,EAAE,CAACV,GAAG,CAAC,CAAC;EAET,oBAAOJ,IAAA;IAAOG,GAAG,EAAEG,KAAM;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC1C,CAAC,CAAC;AAEF,eAAeJ,SAAS"}
+{"version":3,"names":["Hls","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","HlsPlayer","props","ref","src","rest","video","current","player","canPlayType","isSupported","hls","loadSource","attachMedia","destroy"],"sources":["../../../src/components/HlsPlayer.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nexport const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,GAAG,MAAM,QAAQ;AACxB,SAA8BC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAM/F,OAAO,MAAMC,SAAS,gBAAGN,UAAU,CAAmC,CAACO,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC9B,MAAMI,KAAK,GAAGR,MAAM,CAAmB,IAAI,CAAC;EAE5CD,mBAAmB,CAACM,GAAG,EAAE,MAAMG,KAAK,CAACC,OAAQ,EAAE,EAAE,CAAC;EAElDX,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEW,OAAO,EAAEC;IAAO,CAAC,GAAGF,KAAK;IACjC,IAAI,CAACE,MAAM,IAAI,CAACJ,GAAG,EAAE;IACrB,IAAII,MAAM,CAACC,WAAW,CAAC,+BAA+B,CAAC,EAAE;MACrDD,MAAM,CAACJ,GAAG,GAAGA,GAAG;MAChB;IACJ;IACA,IAAIV,GAAG,CAACgB,WAAW,CAAC,CAAC,EAAE;MACnB,MAAMC,GAAG,GAAG,IAAIjB,GAAG,CAAC,CAAC;MACrBiB,GAAG,CAACC,UAAU,CAACR,GAAG,CAAC;MACnBO,GAAG,CAACE,WAAW,CAACL,MAAM,CAAC;MACvB,OAAO,MAAM;QACTG,GAAG,CAACG,OAAO,CAAC,CAAC;MACjB,CAAC;IACL;EACJ,CAAC,EAAE,CAACV,GAAG,CAAC,CAAC;EAET,oBAAOJ,IAAA;IAAOG,GAAG,EAAEG,KAAM;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC1C,CAAC,CAAC"}

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

@@ -1,3 +1,5 @@
 import { HTMLAttributes } from "react";
-declare const Skeleton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export default Skeleton;
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    loading?: boolean;
+}
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/Skeleton.js

@@ -4,11 +4,14 @@ import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
 import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Skeleton = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
+export const Skeleton = /*#__PURE__*/forwardRef((props, ref) => {
+  let {
     className,
+    loading,
+    children,
     ...rest
   } = props;
+  loading ??= children === undefined || children === null;
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     className: clsx(css`
@@ -20,17 +23,17 @@ const Skeleton = /*#__PURE__*/forwardRef((props, ref) => {
                             background-position: 400px 0px;
                         }
                     }
-
-                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
-                    animation-duration: 1s;
-                    animation-fill-mode: forwards;
-                    animation-iteration-count: infinite;
-                    animation-name: shimmer;
-                    animation-timing-function: linear;
-                    background-size: 800px 104px;
-                `, className),
-    ...rest
+                `, loading && css`
+                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
+                        animation-duration: 1s;
+                        animation-fill-mode: forwards;
+                        animation-iteration-count: infinite;
+                        animation-name: shimmer;
+                        animation-timing-function: linear;
+                        background-size: 800px 104px;
+                    `, className),
+    ...rest,
+    children: children
   });
 });
-export default Skeleton;
 //# sourceMappingURL=Skeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["css","clsx","forwardRef","jsx","_jsx","Skeleton","props","ref","className","rest"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,UAAU,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAElD,MAAMC,QAAQ,gBAAGH,UAAU,CAAiD,CAACI,KAAK,EAAEC,GAAG,KAAK;EACxF,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAEpC,oBACIF,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTC,SAAS,EAAEP,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDQ,SACJ,CAAE;IAAA,GACEC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC;AAEF,eAAeJ,QAAQ"}
+{"version":3,"names":["css","clsx","forwardRef","jsx","_jsx","Skeleton","props","ref","className","loading","children","rest","undefined"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\r\n    loading?: boolean\r\n}\r\n\r\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\r\n    let { className, loading, children, ...rest } = props\r\n\r\n    loading ??= children === undefined || children === null\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n                `,\r\n                loading &&\r\n                    css`\r\n                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                        animation-duration: 1s;\r\n                        animation-fill-mode: forwards;\r\n                        animation-iteration-count: infinite;\r\n                        animation-name: shimmer;\r\n                        animation-timing-function: linear;\r\n                        background-size: 800px 104px;\r\n                    `,\r\n                className\r\n            )}\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,UAAU,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMlD,OAAO,MAAMC,QAAQ,gBAAGH,UAAU,CAAgC,CAACI,KAAK,EAAEC,GAAG,KAAK;EAC9E,IAAI;IAAEC,SAAS;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC,GAAGL,KAAK;EAErDG,OAAO,KAAKC,QAAQ,KAAKE,SAAS,IAAIF,QAAQ,KAAK,IAAI;EAEvD,oBACIN,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTC,SAAS,EAAEP,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDS,OAAO,IACHT,GAAI;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,EACLQ,SACJ,CAAE;IAAA,GACEG,IAAI;IAAAD,QAAA,EACPA;EAAQ,CACR,CAAC;AAEd,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "deepsea-components",
-    "version": "3.1.0",
+    "version": "3.2.0-beta.20240606182955",
     "description": "格数科技自用组件库",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -45,4 +45,4 @@
     "peerDependencies": {
         "react": "^18.3.1"
     }
-}
+}

package/src/components/Flow.tsx

@@ -61,7 +61,7 @@ export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "chil
      * 渲染的元素由两层容器包裹，外层容器样式
      */
     wrapperStyle?: CSSProperties
-    /** 
+    /**
      * 渲染的元素由两层容器包裹，内层容器类名
      */
     containerClassName?: string
@@ -75,6 +75,8 @@ export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "chil
     transitionDuration?: number
     /** 变化的回调函数 */
     onSizeChange?: (sizeData: FlowSizeData) => void
+    /** 宽度 */
+    width?: number
 }
 
 export function getGapRange(gap?: undefined | number | "auto" | (number | "auto")[]): [number, number | "auto"] {
@@ -97,16 +99,14 @@ interface Position {
     top: number
 }
 
-/** 自适应浮动组件 */
-export function Flow<T>(props: FlowProps<T>) {
-    let { itemWidth, itemHeight, columnGap, rowGap, maxRows, data, render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, gap = 0, ...rest } = props
+function RealFlow<T>(props: FlowProps<T> & { width: number }) {
+    let { itemWidth, itemHeight, columnGap, rowGap, maxRows, data, render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, gap = 0, width, ...rest } = props
     rowGap ??= gap
     columnGap ??= gap
     const [minColumnGap, maxColumnGap] = getGapRange(columnGap)
-    const [width, setWidth] = useState(0)
     const [columnCount, setColumnCount] = useState(1)
     const [columnGapSize, setColumnGapSize] = useState(minColumnGap)
-    const [showItems, setShowItems] = useState(false)
+
     const ele = useRef<HTMLDivElement>(null)
     const contentRows = Math.ceil(data.length / columnCount)
     const contentShownRows = typeof maxRows === "number" ? Math.min(contentRows, maxRows) : contentRows
@@ -126,30 +126,21 @@ export function Flow<T>(props: FlowProps<T>) {
         return index >= maxRows * columnCount
     }
 
+    function task() {
+        const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap)
+        setColumnCount(newColumnCount)
+        setColumnGapSize(newColumnGapSize)
+    }
+
     useEffect(() => {
-        let timeout: number
-        const observer = new ResizeObserver(entries => {
-            clearTimeout(timeout)
-            function task() {
-                const { width } = entries[0].contentRect
-                const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap)
-                setShowItems(true)
-                setWidth(width)
-                setColumnCount(newColumnCount)
-                setColumnGapSize(newColumnGapSize)
-            }
-            if (throttle === 0) {
-                task()
-            } else {
-                timeout = window.setTimeout(task, throttle || 200)
-            }
-        })
-        observer.observe(ele.current!)
-
-        return () => {
-            observer.disconnect()
-        }
-    }, [itemWidth, throttle, columnGap])
+        task()
+    }, [])
+
+    useEffect(() => {
+        if (throttle === 0) return task()
+        const timeout = setTimeout(task, throttle || 200)
+        return () => clearTimeout(timeout)
+    }, [width, itemWidth, throttle, columnGap])
 
     useEffect(() => {
         onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap: rowGap!, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null })
@@ -168,46 +159,52 @@ export function Flow<T>(props: FlowProps<T>) {
             )}
             style={transformCSSVariable({ height: px(height) }, style)}
             {...rest}>
-            {showItems &&
-                data.map((item, index, arr) => (
+            {data.map((item, index, arr) => (
+                <div
+                    key={keyExactor ? keyExactor(item, index, arr) : index}
+                    className={clsx(
+                        css`
+                            position: absolute;
+                            width: var(--width);
+                            height: var(--height);
+                            transition: var(--transition);
+                            left: 0;
+                            top: 0;
+                            transform: translate(var(--left), var(--top));
+                        `,
+                        wrapperClassName
+                    )}
+                    style={transformCSSVariable(
+                        {
+                            width: px(itemWidth),
+                            height: px(itemHeight),
+                            transition: transitionDuration === 0 ? "none" : `all ${transitionDuration || 400}ms`,
+                            left: px(getPosition(index).left),
+                            top: px(getPosition(index).top)
+                        },
+                        wrapperStyle
+                    )}>
                     <div
-                        key={keyExactor ? keyExactor(item, index, arr) : index}
                         className={clsx(
                             css`
-                                position: absolute;
-                                width: var(--width);
-                                height: var(--height);
-                                transition: var(--transition);
-                                left: 0;
-                                top: 0;
-                                transform: translate(var(--left), var(--top));
+                                width: 100%;
+                                height: 100%;
+                                display: var(--display);
                             `,
-                            wrapperClassName
+                            containerClassName
                         )}
-                        style={transformCSSVariable(
-                            {
-                                width: px(itemWidth),
-                                height: px(itemHeight),
-                                transition: transitionDuration === 0 ? "none" : `all ${transitionDuration || 400}ms`,
-                                left: px(getPosition(index).left),
-                                top: px(getPosition(index).top)
-                            },
-                            wrapperStyle
-                        )}>
-                        <div
-                            className={clsx(
-                                css`
-                                    width: 100%;
-                                    height: 100%;
-                                    display: var(--display);
-                                `,
-                                containerClassName
-                            )}
-                            style={transformCSSVariable({ display: getHidden(index) ? "none" : "block" }, containerStyle)}>
-                            {render(item, index, arr)}
-                        </div>
+                        style={transformCSSVariable({ display: getHidden(index) ? "none" : "block" }, containerStyle)}>
+                        {render(item, index, arr)}
                     </div>
-                ))}
+                </div>
+            ))}
         </div>
     )
 }
+
+/** 自适应浮动组件 */
+export function Flow<T>(props: FlowProps<T>) {
+    const { width, data } = props
+    if (!width || data.length === 0) return null
+    return <RealFlow {...props} width={width} />
+}

package/src/components/HlsPlayer.tsx

@@ -7,7 +7,7 @@ export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElemen
     src: string
 }
 
-const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {
+export const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {
     const { src, ...rest } = props
     const video = useRef<HTMLVideoElement>(null)
 
@@ -32,5 +32,3 @@ const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {
 
     return <video ref={video} {...rest} />
 })
-
-export default HlsPlayer

package/src/components/Skeleton.tsx

@@ -4,8 +4,14 @@ import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 import { forwardRef, HTMLAttributes } from "react"
 
-const Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
-    const { className, ...rest } = props
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    loading?: boolean
+}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {
+    let { className, loading, children, ...rest } = props
+
+    loading ??= children === undefined || children === null
 
     return (
         <div
@@ -20,20 +26,21 @@ const Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((pro
                             background-position: 400px 0px;
                         }
                     }
-
-                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
-                    animation-duration: 1s;
-                    animation-fill-mode: forwards;
-                    animation-iteration-count: infinite;
-                    animation-name: shimmer;
-                    animation-timing-function: linear;
-                    background-size: 800px 104px;
                 `,
+                loading &&
+                    css`
+                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
+                        animation-duration: 1s;
+                        animation-fill-mode: forwards;
+                        animation-iteration-count: infinite;
+                        animation-name: shimmer;
+                        animation-timing-function: linear;
+                        background-size: 800px 104px;
+                    `,
                 className
             )}
-            {...rest}
-        />
+            {...rest}>
+            {children}
+        </div>
     )
 })
-
-export default Skeleton