@canlooks/can-ui 0.0.38 → 0.0.39

package/dist/cjs/components/image/image.js

@@ -18,9 +18,6 @@ exports.Image = (0, react_1.memo)(({ src, fallback, onLoad, onError, renderLoadi
         onLoad?.(e);
         setLoading(false);
     };
-    (0, react_1.useEffect)(() => {
-        console.log(52, imgRef.current.complete);
-    }, []);
     const [failed, setFailed] = (0, utils_1.useDerivedState)(() => !src, [src]);
     const errorHandler = (e) => {
         imgProps?.onError?.(e);

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

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

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

@@ -6,39 +6,44 @@ const react_1 = require("react");
 const waterfall_style_1 = require("./waterfall.style");
 const utils_1 = require("../../utils");
 const transportStyle_1 = require("../transportStyle");
-function Waterfall({ ref, columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }) {
+function Waterfall({ columnCount = { xs: 4 }, gap = { xs: 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 columnCountNum = (0, utils_1.useResponsiveValue)(columnCount);
+    const syncColumnCount = (0, utils_1.useSync)((0, utils_1.useResponsiveValue)(columnCount));
     const container = (0, react_1.useRef)(null);
-    const items = (0, react_1.useRef)(new Map());
-    (0, react_1.useLayoutEffect)(() => {
-        const resizeObserver = new ResizeObserver(() => {
-            const heights = Array(columnCountNum).fill(0);
-            for (const [, el] of items.current) {
-                if (el) {
-                    const order = heights.indexOf(Math.min(...heights));
-                    heights[order] += el.offsetHeight;
-                    el.style.order = order + '';
-                }
+    const elements = (0, react_1.useRef)([]);
+    elements.current = [];
+    const computeItemOrder = () => {
+        const heights = Array(syncColumnCount.current).fill(0);
+        elements.current.forEach(el => {
+            if (el) {
+                const order = heights.indexOf(Math.min(...heights));
+                heights[order] += el.offsetHeight;
+                el.style.order = order + '';
             }
-            container.current.style.height = Math.max(...heights) + 1 + 'px';
         });
-        for (const [, el] of items.current) {
-            el && resizeObserver.observe(el);
+        container.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);
         }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [props.children, columnCountNum]);
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: (0, utils_1.cloneRef)(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 isInitialized = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!isInitialized.current) {
+            isInitialized.current = true;
+            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: r => {
-                    r
-                        ? items.current.set(key, r)
-                        : items.current.delete(key);
-                }, className: waterfall_style_1.classes.item, children: child }, key));
+            return ((0, jsx_runtime_1.jsx)("div", { ref: setItemRefAndObserve, className: waterfall_style_1.classes.item, children: child }, key));
         }) }));
 }

package/dist/esm/components/image/image.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { memo, useRef, useEffect } from 'react';
+import { memo, useRef } from 'react';
 import { classes, style } from './image.style';
 import { clsx, cloneRef, useControlled, useDerivedState } from '../../utils';
 import { ImagePreview } from './imagePreview';
@@ -15,9 +15,6 @@ export const Image = memo(({ src, fallback, onLoad, onError, renderLoading, alt
         onLoad?.(e);
         setLoading(false);
     };
-    useEffect(() => {
-        console.log(52, imgRef.current.complete);
-    }, []);
     const [failed, setFailed] = useDerivedState(() => !src, [src]);
     const errorHandler = (e) => {
         imgProps?.onError?.(e);

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

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

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

@@ -1,41 +1,46 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, isValidElement, useLayoutEffect, useRef } from 'react';
+import { Children, isValidElement, useEffect, useRef } from 'react';
 import { classes, useStyle } from './waterfall.style';
-import { clsx, cloneRef, toResponsiveValue, useResponsiveValue } from '../../utils';
+import { clsx, cloneRef, toResponsiveValue, useResponsiveValue, useSync } from '../../utils';
 import { TransportStyle } from '../transportStyle';
-export function Waterfall({ ref, columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }) {
+export function Waterfall({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }) {
     columnCount = toResponsiveValue(columnCount);
     gap = toResponsiveValue(gap);
     columnGap = toResponsiveValue(columnGap) ?? gap;
     rowGap = toResponsiveValue(rowGap) ?? gap;
-    const columnCountNum = useResponsiveValue(columnCount);
+    const syncColumnCount = useSync(useResponsiveValue(columnCount));
     const container = useRef(null);
-    const items = useRef(new Map());
-    useLayoutEffect(() => {
-        const resizeObserver = new ResizeObserver(() => {
-            const heights = Array(columnCountNum).fill(0);
-            for (const [, el] of items.current) {
-                if (el) {
-                    const order = heights.indexOf(Math.min(...heights));
-                    heights[order] += el.offsetHeight;
-                    el.style.order = order + '';
-                }
+    const elements = useRef([]);
+    elements.current = [];
+    const computeItemOrder = () => {
+        const heights = Array(syncColumnCount.current).fill(0);
+        elements.current.forEach(el => {
+            if (el) {
+                const order = heights.indexOf(Math.min(...heights));
+                heights[order] += el.offsetHeight;
+                el.style.order = order + '';
             }
-            container.current.style.height = Math.max(...heights) + 1 + 'px';
         });
-        for (const [, el] of items.current) {
-            el && resizeObserver.observe(el);
+        container.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);
         }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [props.children, columnCountNum]);
-    return (_jsx(TransportStyle, { ...props, ref: cloneRef(ref, container), css: useStyle({ columnCount, columnGap, rowGap }), className: clsx(classes.root, props.className), children: Children.map(props.children, (child, i) => {
+    };
+    const isInitialized = useRef(false);
+    useEffect(() => {
+        if (!isInitialized.current) {
+            isInitialized.current = true;
+            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: r => {
-                    r
-                        ? items.current.set(key, r)
-                        : items.current.delete(key);
-                }, className: classes.item, children: child }, key));
+            return (_jsx("div", { ref: setItemRefAndObserve, className: classes.item, children: child }, key));
         }) }));
 }

package/package.json

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