@canlooks/can-ui 0.0.14 → 0.0.15

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 +7 -19
  2. package/dist/cjs/components/waterfall/waterfall.style.js +3 -3
  3. package/dist/esm/components/waterfall/waterfall.js +9 -21
  4. package/dist/esm/components/waterfall/waterfall.style.js +3 -3
  5. package/package.json +1 -1
package/dist/cjs/components/waterfall/waterfall.js CHANGED
@@ -6,34 +6,27 @@ 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");
10
9
  exports.Waterfall = (0, react_1.forwardRef)(({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
11
10
  columnCount = (0, utils_1.responsiveValue)(columnCount);
12
11
  gap = (0, utils_1.responsiveValue)(gap);
13
12
  columnGap = (0, utils_1.responsiveValue)(columnGap) ?? gap;
14
13
  rowGap = (0, utils_1.responsiveValue)(rowGap) ?? gap;
15
14
  const columnCountNum = (0, utils_1.useResponsiveValue)(columnCount);
15
+ const container = (0, react_1.useRef)(null);
16
16
  const items = (0, react_1.useRef)([]);
17
17
  items.current = [];
18
- const [orders, setOrders] = (0, react_1.useState)();
19
- const [containerHeight, setContainerHeight] = (0, react_1.useState)();
20
- const [maxItemCount, setMaxItemCount] = (0, react_1.useState)();
21
18
  (0, react_1.useEffect)(() => {
22
19
  const elements = items.current;
23
20
  const resizeObserver = new ResizeObserver(() => {
24
21
  const heights = Array(columnCountNum).fill(0);
25
- const counts = Array(columnCountNum).fill(0);
26
- const newOrders = [];
27
22
  for (let i = 0, { length } = elements; i < length; i++) {
23
+ const el = elements[i];
28
24
  const order = heights.indexOf(Math.min(...heights));
29
- newOrders.push(order);
30
- heights[order] += elements[i].offsetHeight;
31
- counts[order]++;
25
+ heights[order] += el.offsetHeight;
26
+ el.style.order = order + '';
27
+ el.dataset.ordered = 'true';
32
28
  }
33
- setOrders(newOrders);
34
- const maxHeight = Math.max(...heights);
35
- setContainerHeight(maxHeight);
36
- setMaxItemCount(counts[heights.indexOf(maxHeight)]);
29
+ container.current.style.height = Math.max(...heights) + 2 + 'px';
37
30
  });
38
31
  for (let i = 0, { length } = elements; i < length; i++) {
39
32
  resizeObserver.observe(elements[i]);
@@ -42,10 +35,5 @@ exports.Waterfall = (0, react_1.forwardRef)(({ columnCount = { xs: 4 }, gap = {
42
35
  resizeObserver.disconnect();
43
36
  };
44
37
  }, [props.children, columnCountNum]);
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)) }));
38
+ 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.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, children: child }, (0, react_1.isValidElement)(child) ? child.key ?? i : i)) }));
51
39
  });
package/dist/cjs/components/waterfall/waterfall.style.js CHANGED
@@ -19,12 +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
+ //row-gap: var(--waterfall-row-gap);
23
+ //overflow: hidden;
24
24
 
25
25
  .${exports.classes.item} {
26
26
  width: calc((100% - var(--waterfall-column-gap) * (var(--waterfall-columnCount) - 1)) / var(--waterfall-columnCount));
27
- //padding-bottom: var(--waterfall-row-gap);
27
+ padding-bottom: var(--waterfall-row-gap);
28
28
 
29
29
  > img {
30
30
  width: 100%;
package/dist/esm/components/waterfall/waterfall.js CHANGED
@@ -1,36 +1,29 @@
1
1
  import { jsx as _jsx } from "@emotion/react/jsx-runtime";
2
- import { Children, forwardRef, isValidElement, useEffect, useRef, useState } from 'react';
2
+ import { Children, forwardRef, isValidElement, useEffect, useRef } from 'react';
3
3
  import { classes, useStyle } from './waterfall.style';
4
- import { classnames, responsiveValue, useResponsiveValue } from '../../utils';
4
+ import { classnames, cloneRef, responsiveValue, useResponsiveValue } from '../../utils';
5
5
  import { TransportStyle } from '../transportStyle';
6
- import { css } from '@emotion/react';
7
6
  export const Waterfall = forwardRef(({ columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
8
7
  columnCount = responsiveValue(columnCount);
9
8
  gap = responsiveValue(gap);
10
9
  columnGap = responsiveValue(columnGap) ?? gap;
11
10
  rowGap = responsiveValue(rowGap) ?? gap;
12
11
  const columnCountNum = useResponsiveValue(columnCount);
12
+ const container = useRef(null);
13
13
  const items = useRef([]);
14
14
  items.current = [];
15
- const [orders, setOrders] = useState();
16
- const [containerHeight, setContainerHeight] = useState();
17
- const [maxItemCount, setMaxItemCount] = useState();
18
15
  useEffect(() => {
19
16
  const elements = items.current;
20
17
  const resizeObserver = new ResizeObserver(() => {
21
18
  const heights = Array(columnCountNum).fill(0);
22
- const counts = Array(columnCountNum).fill(0);
23
- const newOrders = [];
24
19
  for (let i = 0, { length } = elements; i < length; i++) {
20
+ const el = elements[i];
25
21
  const order = heights.indexOf(Math.min(...heights));
26
- newOrders.push(order);
27
- heights[order] += elements[i].offsetHeight;
28
- counts[order]++;
22
+ heights[order] += el.offsetHeight;
23
+ el.style.order = order + '';
24
+ el.dataset.ordered = 'true';
29
25
  }
30
- setOrders(newOrders);
31
- const maxHeight = Math.max(...heights);
32
- setContainerHeight(maxHeight);
33
- setMaxItemCount(counts[heights.indexOf(maxHeight)]);
26
+ container.current.style.height = Math.max(...heights) + 2 + 'px';
34
27
  });
35
28
  for (let i = 0, { length } = elements; i < length; i++) {
36
29
  resizeObserver.observe(elements[i]);
@@ -39,10 +32,5 @@ export const Waterfall = forwardRef(({ columnCount = { xs: 4 }, gap = { xs: 0 },
39
32
  resizeObserver.disconnect();
40
33
  };
41
34
  }, [props.children, columnCountNum]);
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)) }));
35
+ return (_jsx(TransportStyle, { ...props, ref: cloneRef(ref, container), css: useStyle({ columnCount, columnGap, rowGap }), 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, children: child }, isValidElement(child) ? child.key ?? i : i)) }));
48
36
  });
package/dist/esm/components/waterfall/waterfall.style.js CHANGED
@@ -15,12 +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
+ //row-gap: var(--waterfall-row-gap);
19
+ //overflow: hidden;
20
20
 
21
21
  .${classes.item} {
22
22
  width: calc((100% - var(--waterfall-column-gap) * (var(--waterfall-columnCount) - 1)) / var(--waterfall-columnCount));
23
- //padding-bottom: var(--waterfall-row-gap);
23
+ padding-bottom: var(--waterfall-row-gap);
24
24
 
25
25
  > img {
26
26
  width: 100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.14",
3
+ "version": "0.0.15",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",