@canlooks/can-ui 0.0.13 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/waterfall/waterfall.js +20 -8
  2. package/dist/cjs/components/waterfall/waterfall.style.js +3 -1
  3. package/dist/esm/components/waterfall/waterfall.js +20 -8
  4. package/dist/esm/components/waterfall/waterfall.style.js +3 -1
  5. package/package.json +1 -1
package/dist/cjs/components/waterfall/waterfall.js CHANGED
@@ -6,6 +6,7 @@ const react_1 = require("react");
6
6
  const waterfall_style_1 = require("./waterfall.style");
7
7
  const utils_1 = require("../../utils");
8
8
  const transportStyle_1 = require("../transportStyle");
9
+ const react_2 = require("@emotion/react");
9
10
  exports.Waterfall = (0, react_1.forwardRef)(({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
10
11
  columnCount = (0, utils_1.responsiveValue)(columnCount);
11
12
  gap = (0, utils_1.responsiveValue)(gap);
@@ -16,24 +17,35 @@ exports.Waterfall = (0, react_1.forwardRef)(({ columnCount = { xs: 4 }, gap = {
16
17
  items.current = [];
17
18
  const [orders, setOrders] = (0, react_1.useState)();
18
19
  const [containerHeight, setContainerHeight] = (0, react_1.useState)();
20
+ const [maxItemCount, setMaxItemCount] = (0, react_1.useState)();
19
21
  (0, react_1.useEffect)(() => {
22
+ const elements = items.current;
20
23
  const resizeObserver = new ResizeObserver(() => {
21
24
  const heights = Array(columnCountNum).fill(0);
25
+ const counts = Array(columnCountNum).fill(0);
22
26
  const newOrders = [];
23
- items.current.forEach(item => {
27
+ for (let i = 0, { length } = elements; i < length; i++) {
24
28
  const order = heights.indexOf(Math.min(...heights));
25
29
  newOrders.push(order);
26
- heights[order] += item.offsetHeight;
27
- });
30
+ heights[order] += elements[i].offsetHeight;
31
+ counts[order]++;
32
+ }
28
33
  setOrders(newOrders);
29
- setContainerHeight(Math.max(...heights));
30
- });
31
- items.current.forEach(item => {
32
- resizeObserver.observe(item);
34
+ const maxHeight = Math.max(...heights);
35
+ setContainerHeight(maxHeight);
36
+ setMaxItemCount(counts[heights.indexOf(maxHeight)]);
33
37
  });
38
+ for (let i = 0, { length } = elements; i < length; i++) {
39
+ resizeObserver.observe(elements[i]);
40
+ }
34
41
  return () => {
35
42
  resizeObserver.disconnect();
36
43
  };
37
44
  }, [props.children, columnCountNum]);
38
- 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)) }));
45
+ return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, css: [
46
+ (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }),
47
+ (0, react_2.css) `
48
+ height: calc(${containerHeight}px + var(--waterfall-row-gap) * ${maxItemCount});
49
+ `
50
+ ], 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)) }));
39
51
  });
package/dist/cjs/components/waterfall/waterfall.style.js CHANGED
@@ -19,10 +19,12 @@ function useStyle({ columnCount, columnGap, rowGap }) {
19
19
  flex-direction: column;
20
20
  flex-wrap: wrap;
21
21
  column-gap: var(--waterfall-column-gap);
22
+ row-gap: var(--waterfall-row-gap);
23
+ overflow: hidden;
22
24
 
23
25
  .${exports.classes.item} {
24
26
  width: calc((100% - var(--waterfall-column-gap) * (var(--waterfall-columnCount) - 1)) / var(--waterfall-columnCount));
25
- padding-bottom: var(--waterfall-row-gap);
27
+ //padding-bottom: var(--waterfall-row-gap);
26
28
 
27
29
  > img {
28
30
  width: 100%;
package/dist/esm/components/waterfall/waterfall.js CHANGED
@@ -3,6 +3,7 @@ import { Children, forwardRef, isValidElement, useEffect, useRef, useState } fro
3
3
  import { classes, useStyle } from './waterfall.style';
4
4
  import { classnames, responsiveValue, useResponsiveValue } from '../../utils';
5
5
  import { TransportStyle } from '../transportStyle';
6
+ import { css } from '@emotion/react';
6
7
  export const Waterfall = forwardRef(({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
7
8
  columnCount = responsiveValue(columnCount);
8
9
  gap = responsiveValue(gap);
@@ -13,24 +14,35 @@ export const Waterfall = forwardRef(({ columnCount = { xs: 4 }, gap = { xs: 0 },
13
14
  items.current = [];
14
15
  const [orders, setOrders] = useState();
15
16
  const [containerHeight, setContainerHeight] = useState();
17
+ const [maxItemCount, setMaxItemCount] = useState();
16
18
  useEffect(() => {
19
+ const elements = items.current;
17
20
  const resizeObserver = new ResizeObserver(() => {
18
21
  const heights = Array(columnCountNum).fill(0);
22
+ const counts = Array(columnCountNum).fill(0);
19
23
  const newOrders = [];
20
- items.current.forEach(item => {
24
+ for (let i = 0, { length } = elements; i < length; i++) {
21
25
  const order = heights.indexOf(Math.min(...heights));
22
26
  newOrders.push(order);
23
- heights[order] += item.offsetHeight;
24
- });
27
+ heights[order] += elements[i].offsetHeight;
28
+ counts[order]++;
29
+ }
25
30
  setOrders(newOrders);
26
- setContainerHeight(Math.max(...heights));
27
- });
28
- items.current.forEach(item => {
29
- resizeObserver.observe(item);
31
+ const maxHeight = Math.max(...heights);
32
+ setContainerHeight(maxHeight);
33
+ setMaxItemCount(counts[heights.indexOf(maxHeight)]);
30
34
  });
35
+ for (let i = 0, { length } = elements; i < length; i++) {
36
+ resizeObserver.observe(elements[i]);
37
+ }
31
38
  return () => {
32
39
  resizeObserver.disconnect();
33
40
  };
34
41
  }, [props.children, columnCountNum]);
35
- 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)) }));
42
+ return (_jsx(TransportStyle, { ...props, ref: ref, css: [
43
+ useStyle({ columnCount, columnGap, rowGap }),
44
+ css `
45
+ height: calc(${containerHeight}px + var(--waterfall-row-gap) * ${maxItemCount});
46
+ `
47
+ ], 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)) }));
36
48
  });
package/dist/esm/components/waterfall/waterfall.style.js CHANGED
@@ -15,10 +15,12 @@ export function useStyle({ columnCount, columnGap, rowGap }) {
15
15
  flex-direction: column;
16
16
  flex-wrap: wrap;
17
17
  column-gap: var(--waterfall-column-gap);
18
+ row-gap: var(--waterfall-row-gap);
19
+ overflow: hidden;
18
20
 
19
21
  .${classes.item} {
20
22
  width: calc((100% - var(--waterfall-column-gap) * (var(--waterfall-columnCount) - 1)) / var(--waterfall-columnCount));
21
- padding-bottom: var(--waterfall-row-gap);
23
+ //padding-bottom: var(--waterfall-row-gap);
22
24
 
23
25
  > img {
24
26
  width: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.13",
3
+ "version": "0.0.14",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",