@canlooks/can-ui 0.0.39 → 0.0.41

package/dist/cjs/components/descriptions/descriptionItem.js

@@ -19,13 +19,13 @@ size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span = {
     labelPlacement ??= context.labelPlacement ?? 'left';
     disableMargin ??= context.disableMargin;
     disablePadding ??= context.disablePadding;
-    const spanNum = (0, utils_1.useResponsiveValue)(span);
+    const spanNum = (0, utils_1.useResponsiveValue)(span, variant === 'grid');
     return variant === 'grid'
         ? (0, jsx_runtime_1.jsxs)(grid_1.GridItem, { ...props, css: descriptions_style_1.gridItemStyle, className: (0, utils_1.clsx)(descriptions_style_1.classes.item, props.className), span: span, "data-size": size, "data-label-placement": labelPlacement, "data-disable-margin": disableMargin, children: [!!label &&
                     (0, jsx_runtime_1.jsxs)("div", { className: descriptions_style_1.classes.label, style: { width: labelWidth }, children: [label, !!colon && (labelPlacement === 'left' || labelPlacement === 'right') &&
                                 (0, jsx_runtime_1.jsx)("div", { className: descriptions_style_1.classes.colon, children: colon })] }), (0, jsx_runtime_1.jsx)("div", { className: descriptions_style_1.classes.content, children: content ?? props.children })] })
         : labelPlacement === 'top'
-            ? (0, jsx_runtime_1.jsx)("td", { className: descriptions_style_1.classes.vertical, colSpan: spanNum, children: (0, jsx_runtime_1.jsxs)("div", { className: descriptions_style_1.classes.verticalColWrap, children: [(0, jsx_runtime_1.jsx)("div", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.labelCol}`, "data-size": size, children: label }), (0, jsx_runtime_1.jsx)("div", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.contentCol}`, "data-size": size, "data-disable-padding": disablePadding, children: content ?? props.children })] }) })
+            ? (0, jsx_runtime_1.jsx)("td", { className: descriptions_style_1.classes.vertical, colSpan: spanNum.current, children: (0, jsx_runtime_1.jsxs)("div", { className: descriptions_style_1.classes.verticalColWrap, children: [(0, jsx_runtime_1.jsx)("div", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.labelCol}`, "data-size": size, children: label }), (0, jsx_runtime_1.jsx)("div", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.contentCol}`, "data-size": size, "data-disable-padding": disablePadding, children: content ?? props.children })] }) })
             : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!label &&
-                        (0, jsx_runtime_1.jsx)("td", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.labelCol}`, "data-size": size, children: label }), (0, jsx_runtime_1.jsx)("td", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.contentCol}`, colSpan: spanNum * 2 - 1, "data-size": size, "data-disable-padding": disablePadding, children: content ?? props.children })] });
+                        (0, jsx_runtime_1.jsx)("td", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.labelCol}`, "data-size": size, children: label }), (0, jsx_runtime_1.jsx)("td", { className: `${descriptions_style_1.classes.col} ${descriptions_style_1.classes.contentCol}`, colSpan: spanNum.current * 2 - 1, "data-size": size, "data-disable-padding": disablePadding, children: content ?? props.children })] });
 });

package/dist/cjs/components/descriptions/descriptions.js

@@ -27,17 +27,17 @@ exports.Descriptions = (0, react_2.memo)(({ size, labelWidth, colon = ':', label
             // 最后一项沾满剩余行空间
             flex: i === items.length - 1 ? 1 : void 0, ...itemProps, key: itemProps.key ?? i })) || props.children;
     };
-    const columnCountNum = (0, utils_1.useResponsiveValue)(columnCount);
+    const columnCountNum = (0, utils_1.useResponsiveValue)(columnCount, variant === 'grid');
     const renderTableItems = () => {
         const actualItems = items || react_2.Children.map(props.children, c => (0, react_2.isValidElement)(c) ? c.props : c);
         if (actualItems?.length) {
             const rows = [];
             for (let i = 0, { length } = actualItems; i < length; i++) {
-                const cols = rows[Math.floor(i / columnCountNum)] ||= [];
+                const cols = rows[Math.floor(i / columnCountNum.current)] ||= [];
                 const itemProps = actualItems[i];
-                cols.push((0, react_1.createElement)(ItemComponent
-                // 最后一项沾满剩余行空间
-                , { ...itemProps, key: itemProps.key ?? i, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: (0, utils_1.clsx)(descriptions_style_1.classes.col, itemProps) }));
+                cols.push((0, react_1.createElement)(ItemComponent, { ...itemProps, key: itemProps.key ?? i, 
+                    // 最后一项沾满剩余行空间
+                    span: i === actualItems.length - 1 ? columnCountNum.current - i % columnCountNum.current : itemProps.span, className: (0, utils_1.clsx)(descriptions_style_1.classes.col, itemProps) }));
             }
             return rows.map((r, i) => (0, jsx_runtime_1.jsx)("tr", { children: r }, i));
         }

package/dist/cjs/components/slidableActions/slidableActionsAction.js

@@ -35,5 +35,5 @@ exports.SlidableActionsAction = (0, react_1.memo)(({ color = 'default', label, i
     return ((0, jsx_runtime_1.jsx)("div", { ...props, className: slidableActions_style_1.classes.actionItem, style: {
             translate: `${currentTranslate}px 0`,
             backgroundColor
-        }, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...buttonProps, ref: (0, utils_1.cloneRef)(buttonProps?.ref, innerButtonRef), className: (0, utils_1.clsx)(slidableActions_style_1.classes.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "inverse", children: label }) }));
+        }, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...buttonProps, ref: (0, utils_1.cloneRef)(buttonProps?.ref, innerButtonRef), className: (0, utils_1.clsx)(slidableActions_style_1.classes.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "text.primary", children: label }) }));
 });

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

@@ -1,10 +1,9 @@
-import { ResponsiveProp } from '../../types';
-import { TransportStyleProps } from '../transportStyle';
-export interface WaterfallProps extends Omit<TransportStyleProps, 'padding' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'paddingBottom'> {
+import { DivProps, ResponsiveProp } from '../../types';
+export interface WaterfallProps extends DivProps {
     /** 布局列数，默认为`{xs: 4}` */
     columnCount?: ResponsiveProp;
     gap?: ResponsiveProp;
     columnGap?: ResponsiveProp;
     rowGap?: ResponsiveProp;
 }
-export declare function Waterfall({ columnCount, gap, columnGap, rowGap, ...props }: WaterfallProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Waterfall: ({ columnCount, gap, columnGap, rowGap, ...props }: WaterfallProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/waterfall/waterfall.js

@@ -1,39 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Waterfall = Waterfall;
+exports.Waterfall = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const waterfall_style_1 = require("./waterfall.style");
+const waterfallItem_1 = require("./waterfallItem");
 const utils_1 = require("../../utils");
-const transportStyle_1 = require("../transportStyle");
-function Waterfall({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }) {
+const Waterfall = ({ columnCount = { xs: 4 }, gap = 0, columnGap, rowGap, ...props }) => {
     columnCount = (0, utils_1.toResponsiveValue)(columnCount);
     gap = (0, utils_1.toResponsiveValue)(gap);
     columnGap = (0, utils_1.toResponsiveValue)(columnGap) ?? gap;
     rowGap = (0, utils_1.toResponsiveValue)(rowGap) ?? gap;
-    const syncColumnCount = (0, utils_1.useSync)((0, utils_1.useResponsiveValue)(columnCount));
-    const container = (0, react_1.useRef)(null);
+    const columnCountNum = (0, utils_1.useResponsiveValue)(columnCount);
+    const containerRef = (0, react_1.useRef)(null);
     const elements = (0, react_1.useRef)([]);
     elements.current = [];
     const computeItemOrder = () => {
-        const heights = Array(syncColumnCount.current).fill(0);
+        const heights = Array(columnCountNum.current).fill(0);
         elements.current.forEach(el => {
-            if (el) {
-                const order = heights.indexOf(Math.min(...heights));
-                heights[order] += el.offsetHeight;
-                el.style.order = order + '';
-            }
+            const order = heights.indexOf(Math.min(...heights));
+            heights[order] += el.offsetHeight;
+            el.style.order = order + '';
         });
-        container.current.style.height = Math.max(...heights) + 1 + 'px';
+        containerRef.current.style.height = Math.max(...heights) + 1 + 'px';
     };
     const resizeObserver = (0, react_1.useRef)(void 0);
     resizeObserver.current ||= new ResizeObserver(computeItemOrder);
-    const setItemRefAndObserve = (r) => {
-        if (r) {
-            elements.current.push(r);
-            resizeObserver.current.observe(r);
-        }
-    };
+    const pendingItems = [];
+    (0, react_1.useLayoutEffect)(() => {
+        Promise.all(pendingItems).then(() => {
+            elements.current.forEach(el => resizeObserver.current.observe(el));
+        });
+    });
     const isInitialized = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
         if (!isInitialized.current) {
@@ -41,9 +39,19 @@ function Waterfall({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap
             return;
         }
         computeItemOrder();
-    }, [syncColumnCount.current]);
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: (0, utils_1.cloneRef)(props.ref, container), css: (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.clsx)(waterfall_style_1.classes.root, props.className), children: react_1.Children.map(props.children, (child, i) => {
-            const key = (0, react_1.isValidElement)(child) ? child.key ?? i : i;
-            return ((0, jsx_runtime_1.jsx)("div", { ref: setItemRefAndObserve, className: waterfall_style_1.classes.item, children: child }, key));
+    }, [columnCountNum.current]);
+    (0, react_1.useEffect)(() => () => {
+        resizeObserver.current.disconnect();
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(containerRef, props.ref), css: (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.clsx)(waterfall_style_1.classes.root, props.className), children: react_1.Children.map(props.children, child => {
+            if (!(0, react_1.isValidElement)(child)) {
+                throw Error('Children of <Waterfall> must be element');
+            }
+            let onLoad;
+            pendingItems.push(new Promise(r => onLoad = r));
+            return ((0, jsx_runtime_1.jsx)(waterfallItem_1.WaterfallItem, { ref: r => {
+                    r && elements.current.push(r);
+                }, child: child, onLoad: onLoad }));
         }) }));
-}
+};
+exports.Waterfall = Waterfall;

package/dist/cjs/components/waterfall/waterfall.style.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.classes = void 0;
 exports.useStyle = useStyle;
-const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineInnerClasses)('waterfall', [
+const react_1 = require("@emotion/react");
+exports.classes = (0, utils_1.defineClasses)('waterfall', [
     'item'
 ]);
 function useStyle({ columnCount, columnGap, rowGap }) {
@@ -19,17 +19,5 @@ function useStyle({ columnCount, columnGap, rowGap }) {
         flex-direction: column;
         flex-wrap: wrap;
         column-gap: var(--waterfall-column-gap);
-        //row-gap: var(--waterfall-row-gap);
-        //overflow: hidden;
-
-        .${exports.classes.item} {
-            width: calc((100% - var(--waterfall-column-gap) * (var(--waterfall-columnCount) - 1)) / var(--waterfall-columnCount));
-            padding-bottom: var(--waterfall-row-gap);
-
-            > img {
-                width: 100%;
-                display: flex;
-            }
-        }
     `);
 }

package/dist/cjs/components/waterfall/waterfallItem.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement, Ref } from 'react';
+export type WaterfallItemProps = {
+    ref: Ref<HTMLElement>;
+    onLoad(): void;
+    child: ReactElement<any>;
+};
+export declare const WaterfallItem: ({ ref, onLoad, child }: WaterfallItemProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/cjs/components/waterfall/waterfallItem.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WaterfallItem = void 0;
+const react_1 = require("react");
+const waterfall_style_1 = require("./waterfall.style");
+const utils_1 = require("../../utils");
+const WaterfallItem = ({ ref, onLoad, child }) => {
+    const innerRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const el = innerRef.current;
+        if (!el) {
+            throw Error(`Children of <Waterfall> must expose 'ref' prop`);
+        }
+        const imgTags = el.querySelectorAll('img');
+        if (!imgTags.length) {
+            onLoad();
+            return;
+        }
+        Promise.all([...imgTags].map(img => {
+            if (!img.complete) {
+                return new Promise(resolve => {
+                    img.addEventListener('load', resolve, { once: true });
+                });
+            }
+        })).then(() => onLoad());
+    });
+    const clonedRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(child.props.ref, innerRef, ref), [child.props.ref]);
+    return (0, react_1.cloneElement)(child, {
+        ref: clonedRef,
+        className: (0, utils_1.clsx)(waterfall_style_1.classes.item, child.props.className),
+        style: {
+            width: 'calc((100% - var(--waterfall-column-gap) * (var(--waterfall-columnCount) - 1)) / var(--waterfall-columnCount))',
+            paddingBottom: 'var(--waterfall-row-gap)',
+            ...child.props.style
+        }
+    });
+};
+exports.WaterfallItem = WaterfallItem;

package/dist/cjs/utils/style.d.ts

@@ -84,8 +84,9 @@ export declare function toResponsiveValue<T = number>(prop: ResponsiveProp<T>):
 /**
  * 使用hooks监听响应式值的变化，通常用于css不能满足需求的情况
  * @param prop
+ * @param disabled
  */
-export declare function useResponsiveValue<T = number>(prop: ResponsiveProp<T>): NonNullable<T>;
+export declare function useResponsiveValue<T = number>(prop: ResponsiveProp<T>, disabled?: boolean): import("react").RefObject<NonNullable<T>>;
 /**
  * 使用状态对应的颜色
  * @param status

package/dist/cjs/utils/style.js

@@ -18,6 +18,7 @@ const react_1 = require("react");
 const theme_1 = require("../components/theme");
 const utils_1 = require("./utils");
 const color_1 = tslib_1.__importDefault(require("color"));
+const hooks_1 = require("./hooks");
 /**
  * 为类名添加统一前缀，通常为内部使用
  * @param prefixName
@@ -186,14 +187,16 @@ function toResponsiveValue(prop) {
 /**
  * 使用hooks监听响应式值的变化，通常用于css不能满足需求的情况
  * @param prop
+ * @param disabled
  */
-function useResponsiveValue(prop) {
+function useResponsiveValue(prop, disabled = false) {
     const responsiveObj = toResponsiveValue(prop);
     const { breakpoints } = (0, theme_1.useTheme)();
+    const syncBreakpoints = (0, hooks_1.useSync)(breakpoints);
     const fn = () => {
         let maxBreakpoint = 'xs';
-        for (const k in breakpoints) {
-            if (window.innerWidth < breakpoints[k]) {
+        for (const k in syncBreakpoints.current) {
+            if (window.innerWidth < syncBreakpoints.current[k]) {
                 break;
             }
             if (k in responsiveObj) {
@@ -202,8 +205,11 @@ function useResponsiveValue(prop) {
         }
         return responsiveObj[maxBreakpoint];
     };
-    const [value, setValue] = (0, react_1.useState)(fn);
+    const [value, setValue] = (0, hooks_1.useDerivedState)(fn, [breakpoints]);
     (0, react_1.useEffect)(() => {
+        if (disabled) {
+            return;
+        }
         const resize = () => {
             setValue(fn());
         };
@@ -211,7 +217,7 @@ function useResponsiveValue(prop) {
         return () => {
             removeEventListener('resize', resize);
         };
-    }, []);
+    }, [disabled]);
     return value;
 }
 /**

package/dist/esm/components/descriptions/descriptionItem.js

@@ -16,13 +16,13 @@ size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, span = {
     labelPlacement ??= context.labelPlacement ?? 'left';
     disableMargin ??= context.disableMargin;
     disablePadding ??= context.disablePadding;
-    const spanNum = useResponsiveValue(span);
+    const spanNum = useResponsiveValue(span, variant === 'grid');
     return variant === 'grid'
         ? _jsxs(GridItem, { ...props, css: gridItemStyle, className: clsx(classes.item, props.className), span: span, "data-size": size, "data-label-placement": labelPlacement, "data-disable-margin": disableMargin, children: [!!label &&
                     _jsxs("div", { className: classes.label, style: { width: labelWidth }, children: [label, !!colon && (labelPlacement === 'left' || labelPlacement === 'right') &&
                                 _jsx("div", { className: classes.colon, children: colon })] }), _jsx("div", { className: classes.content, children: content ?? props.children })] })
         : labelPlacement === 'top'
-            ? _jsx("td", { className: classes.vertical, colSpan: spanNum, children: _jsxs("div", { className: classes.verticalColWrap, children: [_jsx("div", { className: `${classes.col} ${classes.labelCol}`, "data-size": size, children: label }), _jsx("div", { className: `${classes.col} ${classes.contentCol}`, "data-size": size, "data-disable-padding": disablePadding, children: content ?? props.children })] }) })
+            ? _jsx("td", { className: classes.vertical, colSpan: spanNum.current, children: _jsxs("div", { className: classes.verticalColWrap, children: [_jsx("div", { className: `${classes.col} ${classes.labelCol}`, "data-size": size, children: label }), _jsx("div", { className: `${classes.col} ${classes.contentCol}`, "data-size": size, "data-disable-padding": disablePadding, children: content ?? props.children })] }) })
             : _jsxs(_Fragment, { children: [!!label &&
-                        _jsx("td", { className: `${classes.col} ${classes.labelCol}`, "data-size": size, children: label }), _jsx("td", { className: `${classes.col} ${classes.contentCol}`, colSpan: spanNum * 2 - 1, "data-size": size, "data-disable-padding": disablePadding, children: content ?? props.children })] });
+                        _jsx("td", { className: `${classes.col} ${classes.labelCol}`, "data-size": size, children: label }), _jsx("td", { className: `${classes.col} ${classes.contentCol}`, colSpan: spanNum.current * 2 - 1, "data-size": size, "data-disable-padding": disablePadding, children: content ?? props.children })] });
 });

package/dist/esm/components/descriptions/descriptions.js

@@ -23,17 +23,17 @@ export const Descriptions = memo(({ size, labelWidth, colon = ':', labelPlacemen
             // 最后一项沾满剩余行空间
             flex: i === items.length - 1 ? 1 : void 0, ...itemProps, key: itemProps.key ?? i })) || props.children;
     };
-    const columnCountNum = useResponsiveValue(columnCount);
+    const columnCountNum = useResponsiveValue(columnCount, variant === 'grid');
     const renderTableItems = () => {
         const actualItems = items || Children.map(props.children, c => isValidElement(c) ? c.props : c);
         if (actualItems?.length) {
             const rows = [];
             for (let i = 0, { length } = actualItems; i < length; i++) {
-                const cols = rows[Math.floor(i / columnCountNum)] ||= [];
+                const cols = rows[Math.floor(i / columnCountNum.current)] ||= [];
                 const itemProps = actualItems[i];
-                cols.push(_createElement(ItemComponent
-                // 最后一项沾满剩余行空间
-                , { ...itemProps, key: itemProps.key ?? i, span: i === actualItems.length - 1 ? columnCountNum - i % columnCountNum : itemProps.span, className: clsx(classes.col, itemProps) }));
+                cols.push(_createElement(ItemComponent, { ...itemProps, key: itemProps.key ?? i, 
+                    // 最后一项沾满剩余行空间
+                    span: i === actualItems.length - 1 ? columnCountNum.current - i % columnCountNum.current : itemProps.span, className: clsx(classes.col, itemProps) }));
             }
             return rows.map((r, i) => _jsx("tr", { children: r }, i));
         }

package/dist/esm/components/slidableActions/slidableActionsAction.js

@@ -32,5 +32,5 @@ export const SlidableActionsAction = memo(({ color = 'default', label, icon, but
     return (_jsx("div", { ...props, className: classes.actionItem, style: {
             translate: `${currentTranslate}px 0`,
             backgroundColor
-        }, children: _jsx(Button, { ...buttonProps, ref: cloneRef(buttonProps?.ref, innerButtonRef), className: clsx(classes.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "inverse", children: label }) }));
+        }, children: _jsx(Button, { ...buttonProps, ref: cloneRef(buttonProps?.ref, innerButtonRef), className: clsx(classes.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "text.primary", children: label }) }));
 });

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

@@ -1,10 +1,9 @@
-import { ResponsiveProp } from '../../types';
-import { TransportStyleProps } from '../transportStyle';
-export interface WaterfallProps extends Omit<TransportStyleProps, 'padding' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'paddingBottom'> {
+import { DivProps, ResponsiveProp } from '../../types';
+export interface WaterfallProps extends DivProps {
     /** 布局列数，默认为`{xs: 4}` */
     columnCount?: ResponsiveProp;
     gap?: ResponsiveProp;
     columnGap?: ResponsiveProp;
     rowGap?: ResponsiveProp;
 }
-export declare function Waterfall({ columnCount, gap, columnGap, rowGap, ...props }: WaterfallProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Waterfall: ({ columnCount, gap, columnGap, rowGap, ...props }: WaterfallProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/waterfall/waterfall.js

@@ -1,36 +1,34 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, isValidElement, useEffect, useRef } from 'react';
+import { Children, isValidElement, useEffect, useLayoutEffect, useRef } from 'react';
 import { classes, useStyle } from './waterfall.style';
-import { clsx, cloneRef, toResponsiveValue, useResponsiveValue, useSync } from '../../utils';
-import { TransportStyle } from '../transportStyle';
-export function Waterfall({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }) {
+import { WaterfallItem } from './waterfallItem';
+import { cloneRef, clsx, toResponsiveValue, useResponsiveValue } from '../../utils';
+export const Waterfall = ({ columnCount = { xs: 4 }, gap = 0, columnGap, rowGap, ...props }) => {
     columnCount = toResponsiveValue(columnCount);
     gap = toResponsiveValue(gap);
     columnGap = toResponsiveValue(columnGap) ?? gap;
     rowGap = toResponsiveValue(rowGap) ?? gap;
-    const syncColumnCount = useSync(useResponsiveValue(columnCount));
-    const container = useRef(null);
+    const columnCountNum = useResponsiveValue(columnCount);
+    const containerRef = useRef(null);
     const elements = useRef([]);
     elements.current = [];
     const computeItemOrder = () => {
-        const heights = Array(syncColumnCount.current).fill(0);
+        const heights = Array(columnCountNum.current).fill(0);
         elements.current.forEach(el => {
-            if (el) {
-                const order = heights.indexOf(Math.min(...heights));
-                heights[order] += el.offsetHeight;
-                el.style.order = order + '';
-            }
+            const order = heights.indexOf(Math.min(...heights));
+            heights[order] += el.offsetHeight;
+            el.style.order = order + '';
         });
-        container.current.style.height = Math.max(...heights) + 1 + 'px';
+        containerRef.current.style.height = Math.max(...heights) + 1 + 'px';
     };
     const resizeObserver = useRef(void 0);
     resizeObserver.current ||= new ResizeObserver(computeItemOrder);
-    const setItemRefAndObserve = (r) => {
-        if (r) {
-            elements.current.push(r);
-            resizeObserver.current.observe(r);
-        }
-    };
+    const pendingItems = [];
+    useLayoutEffect(() => {
+        Promise.all(pendingItems).then(() => {
+            elements.current.forEach(el => resizeObserver.current.observe(el));
+        });
+    });
     const isInitialized = useRef(false);
     useEffect(() => {
         if (!isInitialized.current) {
@@ -38,9 +36,18 @@ export function Waterfall({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap,
             return;
         }
         computeItemOrder();
-    }, [syncColumnCount.current]);
-    return (_jsx(TransportStyle, { ...props, ref: cloneRef(props.ref, container), css: useStyle({ columnCount, columnGap, rowGap }), className: clsx(classes.root, props.className), children: Children.map(props.children, (child, i) => {
-            const key = isValidElement(child) ? child.key ?? i : i;
-            return (_jsx("div", { ref: setItemRefAndObserve, className: classes.item, children: child }, key));
+    }, [columnCountNum.current]);
+    useEffect(() => () => {
+        resizeObserver.current.disconnect();
+    }, []);
+    return (_jsx("div", { ...props, ref: cloneRef(containerRef, props.ref), css: useStyle({ columnCount, columnGap, rowGap }), className: clsx(classes.root, props.className), children: Children.map(props.children, child => {
+            if (!isValidElement(child)) {
+                throw Error('Children of <Waterfall> must be element');
+            }
+            let onLoad;
+            pendingItems.push(new Promise(r => onLoad = r));
+            return (_jsx(WaterfallItem, { ref: r => {
+                    r && elements.current.push(r);
+                }, child: child, onLoad: onLoad }));
         }) }));
-}
+};

package/dist/esm/components/waterfall/waterfall.style.js

@@ -1,6 +1,6 @@
+import { defineClasses, responsiveVariables, useCss } from '../../utils';
 import { css } from '@emotion/react';
-import { defineInnerClasses, responsiveVariables, useCss } from '../../utils';
-export const classes = defineInnerClasses('waterfall', [
+export const classes = defineClasses('waterfall', [
     'item'
 ]);
 export function useStyle({ columnCount, columnGap, rowGap }) {
@@ -15,17 +15,5 @@ export function useStyle({ columnCount, columnGap, rowGap }) {
         flex-direction: column;
         flex-wrap: wrap;
         column-gap: var(--waterfall-column-gap);
-        //row-gap: var(--waterfall-row-gap);
-        //overflow: hidden;
-
-        .${classes.item} {
-            width: calc((100% - var(--waterfall-column-gap) * (var(--waterfall-columnCount) - 1)) / var(--waterfall-columnCount));
-            padding-bottom: var(--waterfall-row-gap);
-
-            > img {
-                width: 100%;
-                display: flex;
-            }
-        }
     `);
 }

package/dist/esm/components/waterfall/waterfallItem.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement, Ref } from 'react';
+export type WaterfallItemProps = {
+    ref: Ref<HTMLElement>;
+    onLoad(): void;
+    child: ReactElement<any>;
+};
+export declare const WaterfallItem: ({ ref, onLoad, child }: WaterfallItemProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/esm/components/waterfall/waterfallItem.js

@@ -0,0 +1,34 @@
+import { cloneElement, useCallback, useLayoutEffect, useRef } from 'react';
+import { classes } from './waterfall.style';
+import { cloneRef, clsx } from '../../utils';
+export const WaterfallItem = ({ ref, onLoad, child }) => {
+    const innerRef = useRef(null);
+    useLayoutEffect(() => {
+        const el = innerRef.current;
+        if (!el) {
+            throw Error(`Children of <Waterfall> must expose 'ref' prop`);
+        }
+        const imgTags = el.querySelectorAll('img');
+        if (!imgTags.length) {
+            onLoad();
+            return;
+        }
+        Promise.all([...imgTags].map(img => {
+            if (!img.complete) {
+                return new Promise(resolve => {
+                    img.addEventListener('load', resolve, { once: true });
+                });
+            }
+        })).then(() => onLoad());
+    });
+    const clonedRef = useCallback(cloneRef(child.props.ref, innerRef, ref), [child.props.ref]);
+    return cloneElement(child, {
+        ref: clonedRef,
+        className: clsx(classes.item, child.props.className),
+        style: {
+            width: 'calc((100% - var(--waterfall-column-gap) * (var(--waterfall-columnCount) - 1)) / var(--waterfall-columnCount))',
+            paddingBottom: 'var(--waterfall-row-gap)',
+            ...child.props.style
+        }
+    });
+};

package/dist/esm/utils/style.d.ts

@@ -84,8 +84,9 @@ export declare function toResponsiveValue<T = number>(prop: ResponsiveProp<T>):
 /**
  * 使用hooks监听响应式值的变化，通常用于css不能满足需求的情况
  * @param prop
+ * @param disabled
  */
-export declare function useResponsiveValue<T = number>(prop: ResponsiveProp<T>): NonNullable<T>;
+export declare function useResponsiveValue<T = number>(prop: ResponsiveProp<T>, disabled?: boolean): import("react").RefObject<NonNullable<T>>;
 /**
  * 使用状态对应的颜色
  * @param status

package/dist/esm/utils/style.js

@@ -1,7 +1,8 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { defaultBreakpoints, useTheme } from '../components/theme';
 import { humpToSegmented, isUnset } from './utils';
 import Color from 'color';
+import { useDerivedState, useSync } from './hooks';
 /**
  * 为类名添加统一前缀，通常为内部使用
  * @param prefixName
@@ -170,14 +171,16 @@ export function toResponsiveValue(prop) {
 /**
  * 使用hooks监听响应式值的变化，通常用于css不能满足需求的情况
  * @param prop
+ * @param disabled
  */
-export function useResponsiveValue(prop) {
+export function useResponsiveValue(prop, disabled = false) {
     const responsiveObj = toResponsiveValue(prop);
     const { breakpoints } = useTheme();
+    const syncBreakpoints = useSync(breakpoints);
     const fn = () => {
         let maxBreakpoint = 'xs';
-        for (const k in breakpoints) {
-            if (window.innerWidth < breakpoints[k]) {
+        for (const k in syncBreakpoints.current) {
+            if (window.innerWidth < syncBreakpoints.current[k]) {
                 break;
             }
             if (k in responsiveObj) {
@@ -186,8 +189,11 @@ export function useResponsiveValue(prop) {
         }
         return responsiveObj[maxBreakpoint];
     };
-    const [value, setValue] = useState(fn);
+    const [value, setValue] = useDerivedState(fn, [breakpoints]);
     useEffect(() => {
+        if (disabled) {
+            return;
+        }
         const resize = () => {
             setValue(fn());
         };
@@ -195,7 +201,7 @@ export function useResponsiveValue(prop) {
         return () => {
             removeEventListener('resize', resize);
         };
-    }, []);
+    }, [disabled]);
     return value;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",