@canlooks/can-ui 0.0.12 → 0.0.14

package/dist/cjs/components/flex/flex.js

@@ -23,10 +23,10 @@ exports.Flex = (0, react_1.forwardRef)(({ inline, direction = 'row', wrap, gap =
             });
         });
     };
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, className: (0, utils_1.classnames)(flex_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, className: (0, utils_1.classnames)(flex_style_1.classes.root, props.className), style: (0, utils_1.filterProperties)({
             display: inline ? 'inline-flex' : 'flex',
             flexDirection: direction,
             flexWrap: wrap, columnGap, rowGap, gap,
             ...props.style
-        }, children: renderChildren() }));
+        }), children: renderChildren() }));
 });

package/dist/cjs/components/transportStyle/transportStyle.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TransportStyle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
+const utils_1 = require("../../utils");
 exports.TransportStyle = (0, react_1.forwardRef)(({ alignItems, justifyContent, alignSelf, justifySelf, flex, width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight, paddingTop, paddingRight, paddingBottom, paddingLeft, padding, marginTop, marginRight, marginBottom, marginLeft, margin, overflowX, overflowY, overflow, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, style: {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, style: (0, utils_1.filterProperties)({
             alignItems, justifyContent, alignSelf, justifySelf, flex,
             width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
-            paddingTop, paddingRight, paddingBottom, paddingLeft, padding,
-            marginTop, marginRight, marginBottom, marginLeft, margin,
-            overflowX, overflowY, overflow,
+            padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
+            margin, marginTop, marginRight, marginBottom, marginLeft,
+            overflow, overflowX, overflowY,
             ...props.style
-        } }));
+        }) }));
 });

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

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const waterfall_style_1 = require("./waterfall.style");
 const utils_1 = require("../../utils");
 const transportStyle_1 = require("../transportStyle");
+const react_2 = require("@emotion/react");
 exports.Waterfall = (0, react_1.forwardRef)(({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
     columnCount = (0, utils_1.responsiveValue)(columnCount);
     gap = (0, utils_1.responsiveValue)(gap);
@@ -16,24 +17,35 @@ exports.Waterfall = (0, react_1.forwardRef)(({ columnCount = { xs: 4 }, gap = {
     items.current = [];
     const [orders, setOrders] = (0, react_1.useState)();
     const [containerHeight, setContainerHeight] = (0, react_1.useState)();
+    const [maxItemCount, setMaxItemCount] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
+        const elements = items.current;
         const resizeObserver = new ResizeObserver(() => {
             const heights = Array(columnCountNum).fill(0);
+            const counts = Array(columnCountNum).fill(0);
             const newOrders = [];
-            items.current.forEach(item => {
+            for (let i = 0, { length } = elements; i < length; i++) {
                 const order = heights.indexOf(Math.min(...heights));
                 newOrders.push(order);
-                heights[order] += item.offsetHeight;
-            });
+                heights[order] += elements[i].offsetHeight;
+                counts[order]++;
+            }
             setOrders(newOrders);
-            setContainerHeight(Math.max(...heights));
-        });
-        items.current.forEach(item => {
-            resizeObserver.observe(item);
+            const maxHeight = Math.max(...heights);
+            setContainerHeight(maxHeight);
+            setMaxItemCount(counts[heights.indexOf(maxHeight)]);
         });
+        for (let i = 0, { length } = elements; i < length; i++) {
+            resizeObserver.observe(elements[i]);
+        }
         return () => {
             resizeObserver.disconnect();
         };
     }, [props.children, columnCountNum]);
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, css: (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(waterfall_style_1.classes.root, props.className), style: containerHeight ? { height: containerHeight } : void 0, children: react_1.Children.map(props.children, (child, i) => (0, jsx_runtime_1.jsx)("div", { ref: r => r && items.current.push(r), className: waterfall_style_1.classes.item, style: { order: orders?.[i] }, children: child }, (0, react_1.isValidElement)(child) ? child.key ?? i : i)) }));
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, css: [
+            (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }),
+            (0, react_2.css) `
+                    height: calc(${containerHeight}px + var(--waterfall-row-gap) * ${maxItemCount});
+                `
+        ], className: (0, utils_1.classnames)(waterfall_style_1.classes.root, props.className), children: react_1.Children.map(props.children, (child, i) => (0, jsx_runtime_1.jsx)("div", { ref: r => r && items.current.push(r), className: waterfall_style_1.classes.item, style: { order: orders?.[i] }, children: child }, (0, react_1.isValidElement)(child) ? child.key ?? i : i)) }));
 });

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

@@ -19,10 +19,12 @@ 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);
+            //padding-bottom: var(--waterfall-row-gap);
 
             > img {
                 width: 100%;

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

@@ -121,3 +121,9 @@ export declare function range(value: number, min?: number, max?: number): number
  * @param separator
  */
 export declare function queryDeep<T extends object = any, U = any>(obj: T, keyPath: Id | Id[], setValue?: (oldValue: any) => U, separator?: string): U;
+/**
+ * 过滤对象中值为undefined属性
+ * @param obj
+ * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
+ */
+export declare function filterProperties<T extends Record<string, any>>(obj: T, undefinedValue?: any): T;

package/dist/cjs/utils/utils.js

@@ -20,6 +20,7 @@ exports.isChildOf = isChildOf;
 exports.fineParent = fineParent;
 exports.range = range;
 exports.queryDeep = queryDeep;
+exports.filterProperties = filterProperties;
 /**
  * 生成最简易的随机ID
  * @param namespace
@@ -302,3 +303,16 @@ function queryDeep(obj, keyPath, setValue, separator = '.') {
     }
     return obj[keyPath];
 }
+/**
+ * 过滤对象中值为undefined属性
+ * @param obj
+ * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
+ */
+function filterProperties(obj, undefinedValue) {
+    for (const k in obj) {
+        if (obj[k] === undefinedValue) {
+            delete obj[k];
+        }
+    }
+    return obj;
+}

package/dist/esm/components/flex/flex.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, forwardRef, isValidElement } from 'react';
 import { classes } from './flex.style';
-import { classnames } from '../../utils';
+import { classnames, filterProperties } from '../../utils';
 import { TransportStyle } from '../transportStyle';
 export const Flex = forwardRef(({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }, ref) => {
     const renderChildren = () => {
@@ -20,10 +20,10 @@ export const Flex = forwardRef(({ inline, direction = 'row', wrap, gap = 0, colu
             });
         });
     };
-    return (_jsx(TransportStyle, { ...props, ref: ref, className: classnames(classes.root, props.className), style: {
+    return (_jsx(TransportStyle, { ...props, ref: ref, className: classnames(classes.root, props.className), style: filterProperties({
             display: inline ? 'inline-flex' : 'flex',
             flexDirection: direction,
             flexWrap: wrap, columnGap, rowGap, gap,
             ...props.style
-        }, children: renderChildren() }));
+        }), children: renderChildren() }));
 });

package/dist/esm/components/transportStyle/transportStyle.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef } from 'react';
+import { filterProperties } from '../../utils';
 export const TransportStyle = forwardRef(({ alignItems, justifyContent, alignSelf, justifySelf, flex, width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight, paddingTop, paddingRight, paddingBottom, paddingLeft, padding, marginTop, marginRight, marginBottom, marginLeft, margin, overflowX, overflowY, overflow, ...props }, ref) => {
-    return (_jsx("div", { ...props, ref: ref, style: {
+    return (_jsx("div", { ...props, ref: ref, style: filterProperties({
             alignItems, justifyContent, alignSelf, justifySelf, flex,
             width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
-            paddingTop, paddingRight, paddingBottom, paddingLeft, padding,
-            marginTop, marginRight, marginBottom, marginLeft, margin,
-            overflowX, overflowY, overflow,
+            padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
+            margin, marginTop, marginRight, marginBottom, marginLeft,
+            overflow, overflowX, overflowY,
             ...props.style
-        } }));
+        }) }));
 });

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

@@ -3,6 +3,7 @@ import { Children, forwardRef, isValidElement, useEffect, useRef, useState } fro
 import { classes, useStyle } from './waterfall.style';
 import { classnames, responsiveValue, useResponsiveValue } from '../../utils';
 import { TransportStyle } from '../transportStyle';
+import { css } from '@emotion/react';
 export const Waterfall = forwardRef(({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
     columnCount = responsiveValue(columnCount);
     gap = responsiveValue(gap);
@@ -13,24 +14,35 @@ export const Waterfall = forwardRef(({ columnCount = { xs: 4 }, gap = { xs: 0 },
     items.current = [];
     const [orders, setOrders] = useState();
     const [containerHeight, setContainerHeight] = useState();
+    const [maxItemCount, setMaxItemCount] = useState();
     useEffect(() => {
+        const elements = items.current;
         const resizeObserver = new ResizeObserver(() => {
             const heights = Array(columnCountNum).fill(0);
+            const counts = Array(columnCountNum).fill(0);
             const newOrders = [];
-            items.current.forEach(item => {
+            for (let i = 0, { length } = elements; i < length; i++) {
                 const order = heights.indexOf(Math.min(...heights));
                 newOrders.push(order);
-                heights[order] += item.offsetHeight;
-            });
+                heights[order] += elements[i].offsetHeight;
+                counts[order]++;
+            }
             setOrders(newOrders);
-            setContainerHeight(Math.max(...heights));
-        });
-        items.current.forEach(item => {
-            resizeObserver.observe(item);
+            const maxHeight = Math.max(...heights);
+            setContainerHeight(maxHeight);
+            setMaxItemCount(counts[heights.indexOf(maxHeight)]);
         });
+        for (let i = 0, { length } = elements; i < length; i++) {
+            resizeObserver.observe(elements[i]);
+        }
         return () => {
             resizeObserver.disconnect();
         };
     }, [props.children, columnCountNum]);
-    return (_jsx(TransportStyle, { ...props, ref: ref, css: useStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), style: containerHeight ? { height: containerHeight } : void 0, children: Children.map(props.children, (child, i) => _jsx("div", { ref: r => r && items.current.push(r), className: classes.item, style: { order: orders?.[i] }, children: child }, isValidElement(child) ? child.key ?? i : i)) }));
+    return (_jsx(TransportStyle, { ...props, ref: ref, css: [
+            useStyle({ columnCount, columnGap, rowGap }),
+            css `
+                    height: calc(${containerHeight}px + var(--waterfall-row-gap) * ${maxItemCount});
+                `
+        ], className: classnames(classes.root, props.className), children: Children.map(props.children, (child, i) => _jsx("div", { ref: r => r && items.current.push(r), className: classes.item, style: { order: orders?.[i] }, children: child }, isValidElement(child) ? child.key ?? i : i)) }));
 });

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

@@ -15,10 +15,12 @@ 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);
+            //padding-bottom: var(--waterfall-row-gap);
 
             > img {
                 width: 100%;

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

@@ -121,3 +121,9 @@ export declare function range(value: number, min?: number, max?: number): number
  * @param separator
  */
 export declare function queryDeep<T extends object = any, U = any>(obj: T, keyPath: Id | Id[], setValue?: (oldValue: any) => U, separator?: string): U;
+/**
+ * 过滤对象中值为undefined属性
+ * @param obj
+ * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
+ */
+export declare function filterProperties<T extends Record<string, any>>(obj: T, undefinedValue?: any): T;

package/dist/esm/utils/utils.js

@@ -280,3 +280,16 @@ export function queryDeep(obj, keyPath, setValue, separator = '.') {
     }
     return obj[keyPath];
 }
+/**
+ * 过滤对象中值为undefined属性
+ * @param obj
+ * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
+ */
+export function filterProperties(obj, undefinedValue) {
+    for (const k in obj) {
+        if (obj[k] === undefinedValue) {
+            delete obj[k];
+        }
+    }
+    return obj;
+}

package/package.json

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