@a-type/ui 1.1.0 → 1.1.2
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.
- package/dist/cjs/components/card/Card.stories.d.ts +1 -0
- package/dist/cjs/components/card/Card.stories.js +8 -1
- package/dist/cjs/components/card/Card.stories.js.map +1 -1
- package/dist/cjs/components/masonry/masonry.js +44 -3
- package/dist/cjs/components/masonry/masonry.js.map +1 -1
- package/dist/esm/components/card/Card.stories.d.ts +1 -0
- package/dist/esm/components/card/Card.stories.js +8 -1
- package/dist/esm/components/card/Card.stories.js.map +1 -1
- package/dist/esm/components/masonry/masonry.js +44 -3
- package/dist/esm/components/masonry/masonry.js.map +1 -1
- package/package.json +1 -1
- package/src/components/card/Card.stories.tsx +21 -0
- package/src/components/masonry/masonry.tsx +48 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.Grid = exports.AsChildNonInteractive = exports.AsChild = exports.NonInteractive = exports.Compact = exports.Default = void 0;
|
|
4
|
+
exports.GridCompact = exports.Grid = exports.AsChildNonInteractive = exports.AsChild = exports.NonInteractive = exports.Compact = exports.Default = void 0;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const Card_js_1 = require("./Card.js");
|
|
7
7
|
const button_js_1 = require("../button.js");
|
|
@@ -38,6 +38,13 @@ exports.Grid = {
|
|
|
38
38
|
return ((0, jsx_runtime_1.jsx)(Card_js_1.Card.Grid, { children: sizes.map((size, i) => ((0, jsx_runtime_1.jsx)(GridCard, { size: size, remove: () => remove(i) }, i))) }));
|
|
39
39
|
},
|
|
40
40
|
};
|
|
41
|
+
exports.GridCompact = {
|
|
42
|
+
render: () => {
|
|
43
|
+
const [sizes, setSizes] = (0, react_1.useState)(() => Array.from({ length: 40 }, (_, i) => 50 + Math.floor(Math.random() * 300)));
|
|
44
|
+
const remove = (index) => setSizes((v) => v.filter((_, i) => i !== index));
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)(Card_js_1.Card.Grid, Object.assign({ columns: Card_js_1.cardGridColumns.small }, { children: sizes.map((size, i) => ((0, jsx_runtime_1.jsx)(GridCard, { size: size, remove: () => remove(i) }, i))) })));
|
|
46
|
+
},
|
|
47
|
+
};
|
|
41
48
|
function GridCard({ size, remove }) {
|
|
42
49
|
return ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, Object.assign({ style: { height: size } }, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, { children: (0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: size }) }), (0, jsx_runtime_1.jsx)(Card_js_1.CardActions, { children: (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small", onClick: remove }, { children: "Delete" })) })] })));
|
|
43
50
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":";;;;AACA,
|
|
1
|
+
{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -22,6 +22,14 @@ class MasonryLayout {
|
|
|
22
22
|
this.containerMutationObserver.observe(container, { childList: true });
|
|
23
23
|
container.style.setProperty('position', 'relative');
|
|
24
24
|
container.style.setProperty('overflow', 'hidden');
|
|
25
|
+
container.style.setProperty('visibility', 'visible');
|
|
26
|
+
container.childNodes.forEach((node) => {
|
|
27
|
+
if (node instanceof HTMLElement) {
|
|
28
|
+
node.style.setProperty('position', 'absolute');
|
|
29
|
+
// hide until laid out
|
|
30
|
+
node.style.setProperty('visibility', 'hidden');
|
|
31
|
+
}
|
|
32
|
+
});
|
|
25
33
|
this.updateFromContainerSize(container.offsetWidth);
|
|
26
34
|
this.relayout();
|
|
27
35
|
return () => {
|
|
@@ -33,6 +41,16 @@ class MasonryLayout {
|
|
|
33
41
|
this.container = null;
|
|
34
42
|
};
|
|
35
43
|
};
|
|
44
|
+
this.updateConfig = (config) => {
|
|
45
|
+
var _a, _b;
|
|
46
|
+
const gapChanged = config.gap !== this.config.gap;
|
|
47
|
+
this.config = config;
|
|
48
|
+
// hacky way to avoid updating twice...
|
|
49
|
+
if (!this.updateFromContainerSize((_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0) &&
|
|
50
|
+
gapChanged) {
|
|
51
|
+
this.relayout();
|
|
52
|
+
}
|
|
53
|
+
};
|
|
36
54
|
this.handleContainerResize = (entries) => {
|
|
37
55
|
const containerWidth = entries[0].contentRect.width;
|
|
38
56
|
this.updateFromContainerSize(containerWidth);
|
|
@@ -43,10 +61,21 @@ class MasonryLayout {
|
|
|
43
61
|
if (newValue !== this.columns) {
|
|
44
62
|
this.columns = newValue;
|
|
45
63
|
this.relayout();
|
|
64
|
+
return true;
|
|
46
65
|
}
|
|
47
66
|
}
|
|
67
|
+
return false;
|
|
48
68
|
};
|
|
49
69
|
this.handleContainerMutation = (entries) => {
|
|
70
|
+
for (const entry of entries) {
|
|
71
|
+
entry.addedNodes.forEach((node) => {
|
|
72
|
+
if (node instanceof HTMLElement) {
|
|
73
|
+
node.style.setProperty('position', 'absolute');
|
|
74
|
+
// hide until laid out
|
|
75
|
+
node.style.setProperty('visibility', 'hidden');
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
}
|
|
50
79
|
// TODO: why is this timeout necessary?
|
|
51
80
|
setTimeout(this.relayout, 100);
|
|
52
81
|
};
|
|
@@ -70,27 +99,39 @@ class MasonryLayout {
|
|
|
70
99
|
const y = tracks[trackIndex];
|
|
71
100
|
const width = columnPercentageWidth;
|
|
72
101
|
child.style.setProperty('position', 'absolute');
|
|
102
|
+
child.style.setProperty('visibility', 'visible');
|
|
73
103
|
child.style.setProperty('width', `${width}%`);
|
|
74
104
|
child.style.setProperty('left', `${x}%`);
|
|
75
105
|
child.style.setProperty('top', `${y}px`);
|
|
76
|
-
|
|
106
|
+
requestAnimationFrame(() => {
|
|
107
|
+
child.classList.add('transition-all');
|
|
108
|
+
});
|
|
77
109
|
tracks[trackIndex] += child.offsetHeight + gap;
|
|
78
110
|
});
|
|
79
|
-
this.container.style.setProperty('height', `${Math.max(...tracks)
|
|
111
|
+
this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
|
|
80
112
|
};
|
|
81
113
|
this.columns =
|
|
82
114
|
typeof config.columns === 'function' ? config.columns(0) : config.columns;
|
|
83
115
|
}
|
|
84
116
|
}
|
|
117
|
+
const initialStyle = {
|
|
118
|
+
height: 0,
|
|
119
|
+
position: 'relative',
|
|
120
|
+
overflow: 'hidden',
|
|
121
|
+
visibility: 'hidden',
|
|
122
|
+
};
|
|
85
123
|
function Masonry({ className, children, columns = 3, gap = 16, }) {
|
|
86
124
|
const [layout] = (0, react_1.useState)(() => new MasonryLayout({ columns, gap }));
|
|
125
|
+
(0, react_1.useEffect)(() => {
|
|
126
|
+
layout.updateConfig({ columns, gap });
|
|
127
|
+
}, [layout, columns, gap]);
|
|
87
128
|
const ref = (0, react_1.useRef)(null);
|
|
88
129
|
(0, react_1.useEffect)(() => {
|
|
89
130
|
if (ref.current) {
|
|
90
131
|
return layout.attach(ref.current);
|
|
91
132
|
}
|
|
92
133
|
}, [layout, ref]);
|
|
93
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, className: className }, { children: children })));
|
|
134
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: initialStyle, className: className }, { children: children })));
|
|
94
135
|
}
|
|
95
136
|
exports.Masonry = Masonry;
|
|
96
137
|
//# sourceMappingURL=masonry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":";;;;AAAA,
|
|
1
|
+
{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Card, CardActions, CardContent, CardFooter, CardImage, CardMain, CardMenu, CardRoot, CardTitle, } from './Card.js';
|
|
3
|
+
import { Card, CardActions, CardContent, CardFooter, cardGridColumns, CardImage, CardMain, CardMenu, CardRoot, CardTitle, } from './Card.js';
|
|
4
4
|
import { Button } from '../button.js';
|
|
5
5
|
import { Icon } from '../icon.js';
|
|
6
6
|
import { useState } from 'react';
|
|
@@ -35,6 +35,13 @@ export const Grid = {
|
|
|
35
35
|
return (_jsx(Card.Grid, { children: sizes.map((size, i) => (_jsx(GridCard, { size: size, remove: () => remove(i) }, i))) }));
|
|
36
36
|
},
|
|
37
37
|
};
|
|
38
|
+
export const GridCompact = {
|
|
39
|
+
render: () => {
|
|
40
|
+
const [sizes, setSizes] = useState(() => Array.from({ length: 40 }, (_, i) => 50 + Math.floor(Math.random() * 300)));
|
|
41
|
+
const remove = (index) => setSizes((v) => v.filter((_, i) => i !== index));
|
|
42
|
+
return (_jsx(Card.Grid, Object.assign({ columns: cardGridColumns.small }, { children: sizes.map((size, i) => (_jsx(GridCard, { size: size, remove: () => remove(i) }, i))) })));
|
|
43
|
+
},
|
|
44
|
+
};
|
|
38
45
|
function GridCard({ size, remove }) {
|
|
39
46
|
return (_jsxs(CardRoot, Object.assign({ style: { height: size } }, { children: [_jsx(CardMain, { children: _jsx(CardTitle, { children: size }) }), _jsx(CardActions, { children: _jsx(Button, Object.assign({ size: "small", onClick: remove }, { children: "Delete" })) })] })));
|
|
40
47
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -19,6 +19,14 @@ class MasonryLayout {
|
|
|
19
19
|
this.containerMutationObserver.observe(container, { childList: true });
|
|
20
20
|
container.style.setProperty('position', 'relative');
|
|
21
21
|
container.style.setProperty('overflow', 'hidden');
|
|
22
|
+
container.style.setProperty('visibility', 'visible');
|
|
23
|
+
container.childNodes.forEach((node) => {
|
|
24
|
+
if (node instanceof HTMLElement) {
|
|
25
|
+
node.style.setProperty('position', 'absolute');
|
|
26
|
+
// hide until laid out
|
|
27
|
+
node.style.setProperty('visibility', 'hidden');
|
|
28
|
+
}
|
|
29
|
+
});
|
|
22
30
|
this.updateFromContainerSize(container.offsetWidth);
|
|
23
31
|
this.relayout();
|
|
24
32
|
return () => {
|
|
@@ -30,6 +38,16 @@ class MasonryLayout {
|
|
|
30
38
|
this.container = null;
|
|
31
39
|
};
|
|
32
40
|
};
|
|
41
|
+
this.updateConfig = (config) => {
|
|
42
|
+
var _a, _b;
|
|
43
|
+
const gapChanged = config.gap !== this.config.gap;
|
|
44
|
+
this.config = config;
|
|
45
|
+
// hacky way to avoid updating twice...
|
|
46
|
+
if (!this.updateFromContainerSize((_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0) &&
|
|
47
|
+
gapChanged) {
|
|
48
|
+
this.relayout();
|
|
49
|
+
}
|
|
50
|
+
};
|
|
33
51
|
this.handleContainerResize = (entries) => {
|
|
34
52
|
const containerWidth = entries[0].contentRect.width;
|
|
35
53
|
this.updateFromContainerSize(containerWidth);
|
|
@@ -40,10 +58,21 @@ class MasonryLayout {
|
|
|
40
58
|
if (newValue !== this.columns) {
|
|
41
59
|
this.columns = newValue;
|
|
42
60
|
this.relayout();
|
|
61
|
+
return true;
|
|
43
62
|
}
|
|
44
63
|
}
|
|
64
|
+
return false;
|
|
45
65
|
};
|
|
46
66
|
this.handleContainerMutation = (entries) => {
|
|
67
|
+
for (const entry of entries) {
|
|
68
|
+
entry.addedNodes.forEach((node) => {
|
|
69
|
+
if (node instanceof HTMLElement) {
|
|
70
|
+
node.style.setProperty('position', 'absolute');
|
|
71
|
+
// hide until laid out
|
|
72
|
+
node.style.setProperty('visibility', 'hidden');
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
}
|
|
47
76
|
// TODO: why is this timeout necessary?
|
|
48
77
|
setTimeout(this.relayout, 100);
|
|
49
78
|
};
|
|
@@ -67,26 +96,38 @@ class MasonryLayout {
|
|
|
67
96
|
const y = tracks[trackIndex];
|
|
68
97
|
const width = columnPercentageWidth;
|
|
69
98
|
child.style.setProperty('position', 'absolute');
|
|
99
|
+
child.style.setProperty('visibility', 'visible');
|
|
70
100
|
child.style.setProperty('width', `${width}%`);
|
|
71
101
|
child.style.setProperty('left', `${x}%`);
|
|
72
102
|
child.style.setProperty('top', `${y}px`);
|
|
73
|
-
|
|
103
|
+
requestAnimationFrame(() => {
|
|
104
|
+
child.classList.add('transition-all');
|
|
105
|
+
});
|
|
74
106
|
tracks[trackIndex] += child.offsetHeight + gap;
|
|
75
107
|
});
|
|
76
|
-
this.container.style.setProperty('height', `${Math.max(...tracks)
|
|
108
|
+
this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
|
|
77
109
|
};
|
|
78
110
|
this.columns =
|
|
79
111
|
typeof config.columns === 'function' ? config.columns(0) : config.columns;
|
|
80
112
|
}
|
|
81
113
|
}
|
|
114
|
+
const initialStyle = {
|
|
115
|
+
height: 0,
|
|
116
|
+
position: 'relative',
|
|
117
|
+
overflow: 'hidden',
|
|
118
|
+
visibility: 'hidden',
|
|
119
|
+
};
|
|
82
120
|
export function Masonry({ className, children, columns = 3, gap = 16, }) {
|
|
83
121
|
const [layout] = useState(() => new MasonryLayout({ columns, gap }));
|
|
122
|
+
useEffect(() => {
|
|
123
|
+
layout.updateConfig({ columns, gap });
|
|
124
|
+
}, [layout, columns, gap]);
|
|
84
125
|
const ref = useRef(null);
|
|
85
126
|
useEffect(() => {
|
|
86
127
|
if (ref.current) {
|
|
87
128
|
return layout.attach(ref.current);
|
|
88
129
|
}
|
|
89
130
|
}, [layout, ref]);
|
|
90
|
-
return (_jsx("div", Object.assign({ ref: ref, className: className }, { children: children })));
|
|
131
|
+
return (_jsx("div", Object.assign({ ref: ref, style: initialStyle, className: className }, { children: children })));
|
|
91
132
|
}
|
|
92
133
|
//# sourceMappingURL=masonry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAO9E,MAAM,aAAa;IAQlB,YAAoB,MAA2B;QAA3B,WAAM,GAAN,MAAM,CAAqB;QAPvC,4BAAuB,GAA0B,IAAI,CAAC;QACtD,8BAAyB,GAA4B,IAAI,CAAC;QAE1D,cAAS,GAAuB,IAAI,CAAC;QAErC,YAAO,GAAW,CAAC,CAAC;QAO5B,WAAM,GAAG,CAAC,SAAsB,EAAE,EAAE;;YACnC,MAAA,IAAI,CAAC,uBAAuB,0CAAE,UAAU,EAAE,CAAC;YAC3C,MAAA,IAAI,CAAC,yBAAyB,0CAAE,UAAU,EAAE,CAAC;YAE7C,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAE3B,IAAI,CAAC,uBAAuB,GAAG,IAAI,cAAc,CAChD,IAAI,CAAC,qBAAqB,CAC1B,CAAC;YACF,IAAI,CAAC,yBAAyB,GAAG,IAAI,gBAAgB,CACpD,IAAI,CAAC,uBAAuB,CAC5B,CAAC;YACF,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YAChD,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;YAEvE,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;YACpD,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;YAClD,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;YACrD,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACrC,IAAI,IAAI,YAAY,WAAW,EAAE;oBAChC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;oBAC/C,sBAAsB;oBACtB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;iBAC/C;YACF,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,uBAAuB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;YAEpD,IAAI,CAAC,QAAQ,EAAE,CAAC;YAEhB,OAAO,GAAG,EAAE;;gBACX,MAAA,IAAI,CAAC,uBAAuB,0CAAE,UAAU,EAAE,CAAC;gBAC3C,MAAA,IAAI,CAAC,yBAAyB,0CAAE,UAAU,EAAE,CAAC;gBAC7C,SAAS,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;gBAC3C,SAAS,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;gBAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACvB,CAAC,CAAC;QACH,CAAC,CAAC;QAEF,iBAAY,GAAG,CAAC,MAA2B,EAAE,EAAE;;YAC9C,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,KAAK,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;YAClD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,uCAAuC;YACvC,IACC,CAAC,IAAI,CAAC,uBAAuB,CAAC,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,WAAW,mCAAI,CAAC,CAAC;gBAC/D,UAAU,EACT;gBACD,IAAI,CAAC,QAAQ,EAAE,CAAC;aAChB;QACF,CAAC,CAAC;QAEM,0BAAqB,GAAG,CAAC,OAA8B,EAAE,EAAE;YAClE,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;YACpD,IAAI,CAAC,uBAAuB,CAAC,cAAc,CAAC,CAAC;QAC9C,CAAC,CAAC;QAEM,4BAAuB,GAAG,CAAC,cAAsB,EAAE,EAAE;YAC5D,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,KAAK,UAAU,EAAE;gBAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;gBACrD,IAAI,QAAQ,KAAK,IAAI,CAAC,OAAO,EAAE;oBAC9B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;oBACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAChB,OAAO,IAAI,CAAC;iBACZ;aACD;YACD,OAAO,KAAK,CAAC;QACd,CAAC,CAAC;QAEM,4BAAuB,GAAG,CAAC,OAAyB,EAAE,EAAE;YAC/D,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC5B,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;oBACjC,IAAI,IAAI,YAAY,WAAW,EAAE;wBAChC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;wBAC/C,sBAAsB;wBACtB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;qBAC/C;gBACF,CAAC,CAAC,CAAC;aACH;YACD,uCAAuC;YACvC,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QAChC,CAAC,CAAC;QAEM,aAAQ,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACpB,OAAO;aACP;YAED,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YAExB,MAAM,MAAM,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC/C,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;YAC5B,oEAAoE;YACpE,qEAAqE;YACrE,gBAAgB;YAChB,MAAM,wBAAwB,GAC7B,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC;YACxE,MAAM,qBAAqB,GAC1B,CAAC,wBAAwB,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,GAAG,CAAC;YAC/D,MAAM,kBAAkB,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,GAAG,CAAC;YAEpE,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAkB,CAAC;YACtE,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC1B,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;gBACvD,MAAM,CAAC,GAAG,CAAC,qBAAqB,GAAG,kBAAkB,CAAC,GAAG,UAAU,CAAC;gBACpE,MAAM,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;gBAC7B,MAAM,KAAK,GAAG,qBAAqB,CAAC;gBACpC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;gBAChD,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;gBACjD,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;gBAC9C,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;gBACzC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;gBACzC,qBAAqB,CAAC,GAAG,EAAE;oBAC1B,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;gBACvC,CAAC,CAAC,CAAC;gBACH,MAAM,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC;YAChD,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;QACxE,CAAC,CAAC;QAzHD,IAAI,CAAC,OAAO;YACX,OAAO,MAAM,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;IAC5E,CAAC;CAwHD;AASD,MAAM,YAAY,GAAkB;IACnC,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;CACpB,CAAC;AAEF,MAAM,UAAU,OAAO,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,EAAE,GACM;IACd,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,aAAa,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IACrE,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IAC3B,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,GAAG,CAAC,OAAO,EAAE;YAChB,OAAO,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SAClC;IACF,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IAElB,OAAO,CACN,4BAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,gBACtD,QAAQ,IACJ,CACN,CAAC;AACH,CAAC"}
|
package/package.json
CHANGED
|
@@ -4,6 +4,7 @@ import {
|
|
|
4
4
|
CardActions,
|
|
5
5
|
CardContent,
|
|
6
6
|
CardFooter,
|
|
7
|
+
cardGridColumns,
|
|
7
8
|
CardImage,
|
|
8
9
|
CardMain,
|
|
9
10
|
CardMenu,
|
|
@@ -176,6 +177,26 @@ export const Grid: Story = {
|
|
|
176
177
|
},
|
|
177
178
|
};
|
|
178
179
|
|
|
180
|
+
export const GridCompact: Story = {
|
|
181
|
+
render: () => {
|
|
182
|
+
const [sizes, setSizes] = useState(() =>
|
|
183
|
+
Array.from(
|
|
184
|
+
{ length: 40 },
|
|
185
|
+
(_, i) => 50 + Math.floor(Math.random() * 300),
|
|
186
|
+
),
|
|
187
|
+
);
|
|
188
|
+
const remove = (index: number) =>
|
|
189
|
+
setSizes((v) => v.filter((_, i) => i !== index));
|
|
190
|
+
return (
|
|
191
|
+
<Card.Grid columns={cardGridColumns.small}>
|
|
192
|
+
{sizes.map((size, i) => (
|
|
193
|
+
<GridCard key={i} size={size} remove={() => remove(i)} />
|
|
194
|
+
))}
|
|
195
|
+
</Card.Grid>
|
|
196
|
+
);
|
|
197
|
+
},
|
|
198
|
+
};
|
|
199
|
+
|
|
179
200
|
function GridCard({ size, remove }: { size: number; remove: () => void }) {
|
|
180
201
|
return (
|
|
181
202
|
<CardRoot style={{ height: size }}>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode, useEffect, useRef, useState } from 'react';
|
|
1
|
+
import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
|
|
2
2
|
|
|
3
3
|
interface MasonryLayoutConfig {
|
|
4
4
|
columns: number | ((containerWidth: number) => number);
|
|
@@ -35,6 +35,14 @@ class MasonryLayout {
|
|
|
35
35
|
|
|
36
36
|
container.style.setProperty('position', 'relative');
|
|
37
37
|
container.style.setProperty('overflow', 'hidden');
|
|
38
|
+
container.style.setProperty('visibility', 'visible');
|
|
39
|
+
container.childNodes.forEach((node) => {
|
|
40
|
+
if (node instanceof HTMLElement) {
|
|
41
|
+
node.style.setProperty('position', 'absolute');
|
|
42
|
+
// hide until laid out
|
|
43
|
+
node.style.setProperty('visibility', 'hidden');
|
|
44
|
+
}
|
|
45
|
+
});
|
|
38
46
|
|
|
39
47
|
this.updateFromContainerSize(container.offsetWidth);
|
|
40
48
|
|
|
@@ -49,6 +57,18 @@ class MasonryLayout {
|
|
|
49
57
|
};
|
|
50
58
|
};
|
|
51
59
|
|
|
60
|
+
updateConfig = (config: MasonryLayoutConfig) => {
|
|
61
|
+
const gapChanged = config.gap !== this.config.gap;
|
|
62
|
+
this.config = config;
|
|
63
|
+
// hacky way to avoid updating twice...
|
|
64
|
+
if (
|
|
65
|
+
!this.updateFromContainerSize(this.container?.offsetWidth ?? 0) &&
|
|
66
|
+
gapChanged
|
|
67
|
+
) {
|
|
68
|
+
this.relayout();
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
|
|
52
72
|
private handleContainerResize = (entries: ResizeObserverEntry[]) => {
|
|
53
73
|
const containerWidth = entries[0].contentRect.width;
|
|
54
74
|
this.updateFromContainerSize(containerWidth);
|
|
@@ -60,11 +80,22 @@ class MasonryLayout {
|
|
|
60
80
|
if (newValue !== this.columns) {
|
|
61
81
|
this.columns = newValue;
|
|
62
82
|
this.relayout();
|
|
83
|
+
return true;
|
|
63
84
|
}
|
|
64
85
|
}
|
|
86
|
+
return false;
|
|
65
87
|
};
|
|
66
88
|
|
|
67
89
|
private handleContainerMutation = (entries: MutationRecord[]) => {
|
|
90
|
+
for (const entry of entries) {
|
|
91
|
+
entry.addedNodes.forEach((node) => {
|
|
92
|
+
if (node instanceof HTMLElement) {
|
|
93
|
+
node.style.setProperty('position', 'absolute');
|
|
94
|
+
// hide until laid out
|
|
95
|
+
node.style.setProperty('visibility', 'hidden');
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
}
|
|
68
99
|
// TODO: why is this timeout necessary?
|
|
69
100
|
setTimeout(this.relayout, 100);
|
|
70
101
|
};
|
|
@@ -94,16 +125,16 @@ class MasonryLayout {
|
|
|
94
125
|
const y = tracks[trackIndex];
|
|
95
126
|
const width = columnPercentageWidth;
|
|
96
127
|
child.style.setProperty('position', 'absolute');
|
|
128
|
+
child.style.setProperty('visibility', 'visible');
|
|
97
129
|
child.style.setProperty('width', `${width}%`);
|
|
98
130
|
child.style.setProperty('left', `${x}%`);
|
|
99
131
|
child.style.setProperty('top', `${y}px`);
|
|
100
|
-
|
|
132
|
+
requestAnimationFrame(() => {
|
|
133
|
+
child.classList.add('transition-all');
|
|
134
|
+
});
|
|
101
135
|
tracks[trackIndex] += child.offsetHeight + gap;
|
|
102
136
|
});
|
|
103
|
-
this.container.style.setProperty(
|
|
104
|
-
'height',
|
|
105
|
-
`${Math.max(...tracks) - gap}px`,
|
|
106
|
-
);
|
|
137
|
+
this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
|
|
107
138
|
};
|
|
108
139
|
}
|
|
109
140
|
|
|
@@ -114,6 +145,13 @@ export interface MasonryProps {
|
|
|
114
145
|
gap?: number;
|
|
115
146
|
}
|
|
116
147
|
|
|
148
|
+
const initialStyle: CSSProperties = {
|
|
149
|
+
height: 0,
|
|
150
|
+
position: 'relative',
|
|
151
|
+
overflow: 'hidden',
|
|
152
|
+
visibility: 'hidden',
|
|
153
|
+
};
|
|
154
|
+
|
|
117
155
|
export function Masonry({
|
|
118
156
|
className,
|
|
119
157
|
children,
|
|
@@ -121,6 +159,9 @@ export function Masonry({
|
|
|
121
159
|
gap = 16,
|
|
122
160
|
}: MasonryProps) {
|
|
123
161
|
const [layout] = useState(() => new MasonryLayout({ columns, gap }));
|
|
162
|
+
useEffect(() => {
|
|
163
|
+
layout.updateConfig({ columns, gap });
|
|
164
|
+
}, [layout, columns, gap]);
|
|
124
165
|
const ref = useRef<HTMLDivElement>(null);
|
|
125
166
|
useEffect(() => {
|
|
126
167
|
if (ref.current) {
|
|
@@ -129,7 +170,7 @@ export function Masonry({
|
|
|
129
170
|
}, [layout, ref]);
|
|
130
171
|
|
|
131
172
|
return (
|
|
132
|
-
<div ref={ref} className={className}>
|
|
173
|
+
<div ref={ref} style={initialStyle} className={className}>
|
|
133
174
|
{children}
|
|
134
175
|
</div>
|
|
135
176
|
);
|