@a-type/ui 1.1.2 → 1.1.3
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.js +7 -3
- package/dist/cjs/components/card/Card.stories.js.map +1 -1
- package/dist/cjs/components/masonry/masonry.js +26 -4
- package/dist/cjs/components/masonry/masonry.js.map +1 -1
- package/dist/esm/components/card/Card.stories.js +7 -3
- package/dist/esm/components/card/Card.stories.js.map +1 -1
- package/dist/esm/components/masonry/masonry.js +26 -4
- package/dist/esm/components/masonry/masonry.js.map +1 -1
- package/package.json +1 -1
- package/src/components/card/Card.stories.tsx +32 -7
- package/src/components/masonry/masonry.tsx +27 -5
|
@@ -35,7 +35,11 @@ exports.Grid = {
|
|
|
35
35
|
render: () => {
|
|
36
36
|
const [sizes, setSizes] = (0, react_1.useState)(() => Array.from({ length: 40 }, (_, i) => 50 + Math.floor(Math.random() * 300)));
|
|
37
37
|
const remove = (index) => setSizes((v) => v.filter((_, i) => i !== index));
|
|
38
|
-
|
|
38
|
+
const resize = (index) => setSizes((v) => {
|
|
39
|
+
const size = 50 + Math.floor(Math.random() * 300);
|
|
40
|
+
return v.map((s, i) => (i === index ? size : s));
|
|
41
|
+
});
|
|
42
|
+
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), resize: () => resize(i) }, i))) }));
|
|
39
43
|
},
|
|
40
44
|
};
|
|
41
45
|
exports.GridCompact = {
|
|
@@ -45,7 +49,7 @@ exports.GridCompact = {
|
|
|
45
49
|
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
50
|
},
|
|
47
51
|
};
|
|
48
|
-
function GridCard({ size, remove }) {
|
|
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" })) })] })));
|
|
52
|
+
function GridCard({ size, remove, resize, }) {
|
|
53
|
+
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.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small", onClick: remove }, { children: "Delete" })), resize && ((0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small", onClick: resize }, { children: "Resize" })))] }) })] })));
|
|
50
54
|
}
|
|
51
55
|
//# sourceMappingURL=Card.stories.js.map
|
|
@@ -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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"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.Masonry = void 0;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const utils_1 = require("@a-type/utils");
|
|
6
7
|
const react_1 = require("react");
|
|
7
8
|
class MasonryLayout {
|
|
8
9
|
constructor(config) {
|
|
@@ -28,6 +29,7 @@ class MasonryLayout {
|
|
|
28
29
|
node.style.setProperty('position', 'absolute');
|
|
29
30
|
// hide until laid out
|
|
30
31
|
node.style.setProperty('visibility', 'hidden');
|
|
32
|
+
this.childSizeObserver.observe(node);
|
|
31
33
|
}
|
|
32
34
|
});
|
|
33
35
|
this.updateFromContainerSize(container.offsetWidth);
|
|
@@ -69,21 +71,39 @@ class MasonryLayout {
|
|
|
69
71
|
this.handleContainerMutation = (entries) => {
|
|
70
72
|
for (const entry of entries) {
|
|
71
73
|
entry.addedNodes.forEach((node) => {
|
|
74
|
+
var _a;
|
|
72
75
|
if (node instanceof HTMLElement) {
|
|
73
76
|
node.style.setProperty('position', 'absolute');
|
|
74
77
|
// hide until laid out
|
|
75
78
|
node.style.setProperty('visibility', 'hidden');
|
|
79
|
+
(_a = this.childSizeObserver) === null || _a === void 0 ? void 0 : _a.observe(node);
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
entry.removedNodes.forEach((node) => {
|
|
83
|
+
var _a;
|
|
84
|
+
if (node instanceof HTMLElement) {
|
|
85
|
+
(_a = this.childSizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(node);
|
|
76
86
|
}
|
|
77
87
|
});
|
|
78
88
|
}
|
|
79
89
|
// TODO: why is this timeout necessary?
|
|
80
90
|
setTimeout(this.relayout, 100);
|
|
81
91
|
};
|
|
82
|
-
this.
|
|
92
|
+
this.handleChildResize = (entries) => {
|
|
93
|
+
// only worry about height changes
|
|
94
|
+
for (const entry of entries) {
|
|
95
|
+
const lastSeenHeight = entry.target.getAttribute('data-last-height');
|
|
96
|
+
const currentHeight = entry.contentRect.height;
|
|
97
|
+
entry.target.setAttribute('data-last-height', currentHeight.toString());
|
|
98
|
+
if (lastSeenHeight && lastSeenHeight !== currentHeight.toString()) {
|
|
99
|
+
this.relayout();
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
this.relayout = (0, utils_1.debounce)(() => {
|
|
83
104
|
if (!this.container) {
|
|
84
105
|
return;
|
|
85
106
|
}
|
|
86
|
-
console.log('relayout');
|
|
87
107
|
const tracks = new Array(this.columns).fill(0);
|
|
88
108
|
const gap = this.config.gap;
|
|
89
109
|
// percentage-based width and x position so that items automatically
|
|
@@ -93,7 +113,7 @@ class MasonryLayout {
|
|
|
93
113
|
const columnPercentageWidth = (pixelColumnWidthMinusGap / this.container.offsetWidth) * 100;
|
|
94
114
|
const gapPercentageWidth = (gap / this.container.offsetWidth) * 100;
|
|
95
115
|
const children = Array.from(this.container.children);
|
|
96
|
-
children.forEach((child) => {
|
|
116
|
+
children.forEach((child, index) => {
|
|
97
117
|
const trackIndex = tracks.indexOf(Math.min(...tracks));
|
|
98
118
|
const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
|
|
99
119
|
const y = tracks[trackIndex];
|
|
@@ -103,15 +123,17 @@ class MasonryLayout {
|
|
|
103
123
|
child.style.setProperty('width', `${width}%`);
|
|
104
124
|
child.style.setProperty('left', `${x}%`);
|
|
105
125
|
child.style.setProperty('top', `${y}px`);
|
|
126
|
+
child.style.setProperty('z-index', index.toString());
|
|
106
127
|
requestAnimationFrame(() => {
|
|
107
128
|
child.classList.add('transition-all');
|
|
108
129
|
});
|
|
109
130
|
tracks[trackIndex] += child.offsetHeight + gap;
|
|
110
131
|
});
|
|
111
132
|
this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
|
|
112
|
-
};
|
|
133
|
+
}, 100);
|
|
113
134
|
this.columns =
|
|
114
135
|
typeof config.columns === 'function' ? config.columns(0) : config.columns;
|
|
136
|
+
this.childSizeObserver = new ResizeObserver(this.handleChildResize);
|
|
115
137
|
}
|
|
116
138
|
}
|
|
117
139
|
const initialStyle = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":";;;;AAAA,iCAA8E;AAO9E,MAAM,aAAa;
|
|
1
|
+
{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,7 +32,11 @@ export const Grid = {
|
|
|
32
32
|
render: () => {
|
|
33
33
|
const [sizes, setSizes] = useState(() => Array.from({ length: 40 }, (_, i) => 50 + Math.floor(Math.random() * 300)));
|
|
34
34
|
const remove = (index) => setSizes((v) => v.filter((_, i) => i !== index));
|
|
35
|
-
|
|
35
|
+
const resize = (index) => setSizes((v) => {
|
|
36
|
+
const size = 50 + Math.floor(Math.random() * 300);
|
|
37
|
+
return v.map((s, i) => (i === index ? size : s));
|
|
38
|
+
});
|
|
39
|
+
return (_jsx(Card.Grid, { children: sizes.map((size, i) => (_jsx(GridCard, { size: size, remove: () => remove(i), resize: () => resize(i) }, i))) }));
|
|
36
40
|
},
|
|
37
41
|
};
|
|
38
42
|
export const GridCompact = {
|
|
@@ -42,7 +46,7 @@ export const GridCompact = {
|
|
|
42
46
|
return (_jsx(Card.Grid, Object.assign({ columns: cardGridColumns.small }, { children: sizes.map((size, i) => (_jsx(GridCard, { size: size, remove: () => remove(i) }, i))) })));
|
|
43
47
|
},
|
|
44
48
|
};
|
|
45
|
-
function GridCard({ size, remove }) {
|
|
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" })) })] })));
|
|
49
|
+
function GridCard({ size, remove, resize, }) {
|
|
50
|
+
return (_jsxs(CardRoot, Object.assign({ style: { height: size } }, { children: [_jsx(CardMain, { children: _jsx(CardTitle, { children: size }) }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small", onClick: remove }, { children: "Delete" })), resize && (_jsx(Button, Object.assign({ size: "small", onClick: resize }, { children: "Resize" })))] }) })] })));
|
|
47
51
|
}
|
|
48
52
|
//# sourceMappingURL=Card.stories.js.map
|
|
@@ -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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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { debounce } from '@a-type/utils';
|
|
3
4
|
import { useEffect, useRef, useState } from 'react';
|
|
4
5
|
class MasonryLayout {
|
|
5
6
|
constructor(config) {
|
|
@@ -25,6 +26,7 @@ class MasonryLayout {
|
|
|
25
26
|
node.style.setProperty('position', 'absolute');
|
|
26
27
|
// hide until laid out
|
|
27
28
|
node.style.setProperty('visibility', 'hidden');
|
|
29
|
+
this.childSizeObserver.observe(node);
|
|
28
30
|
}
|
|
29
31
|
});
|
|
30
32
|
this.updateFromContainerSize(container.offsetWidth);
|
|
@@ -66,21 +68,39 @@ class MasonryLayout {
|
|
|
66
68
|
this.handleContainerMutation = (entries) => {
|
|
67
69
|
for (const entry of entries) {
|
|
68
70
|
entry.addedNodes.forEach((node) => {
|
|
71
|
+
var _a;
|
|
69
72
|
if (node instanceof HTMLElement) {
|
|
70
73
|
node.style.setProperty('position', 'absolute');
|
|
71
74
|
// hide until laid out
|
|
72
75
|
node.style.setProperty('visibility', 'hidden');
|
|
76
|
+
(_a = this.childSizeObserver) === null || _a === void 0 ? void 0 : _a.observe(node);
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
entry.removedNodes.forEach((node) => {
|
|
80
|
+
var _a;
|
|
81
|
+
if (node instanceof HTMLElement) {
|
|
82
|
+
(_a = this.childSizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(node);
|
|
73
83
|
}
|
|
74
84
|
});
|
|
75
85
|
}
|
|
76
86
|
// TODO: why is this timeout necessary?
|
|
77
87
|
setTimeout(this.relayout, 100);
|
|
78
88
|
};
|
|
79
|
-
this.
|
|
89
|
+
this.handleChildResize = (entries) => {
|
|
90
|
+
// only worry about height changes
|
|
91
|
+
for (const entry of entries) {
|
|
92
|
+
const lastSeenHeight = entry.target.getAttribute('data-last-height');
|
|
93
|
+
const currentHeight = entry.contentRect.height;
|
|
94
|
+
entry.target.setAttribute('data-last-height', currentHeight.toString());
|
|
95
|
+
if (lastSeenHeight && lastSeenHeight !== currentHeight.toString()) {
|
|
96
|
+
this.relayout();
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
this.relayout = debounce(() => {
|
|
80
101
|
if (!this.container) {
|
|
81
102
|
return;
|
|
82
103
|
}
|
|
83
|
-
console.log('relayout');
|
|
84
104
|
const tracks = new Array(this.columns).fill(0);
|
|
85
105
|
const gap = this.config.gap;
|
|
86
106
|
// percentage-based width and x position so that items automatically
|
|
@@ -90,7 +110,7 @@ class MasonryLayout {
|
|
|
90
110
|
const columnPercentageWidth = (pixelColumnWidthMinusGap / this.container.offsetWidth) * 100;
|
|
91
111
|
const gapPercentageWidth = (gap / this.container.offsetWidth) * 100;
|
|
92
112
|
const children = Array.from(this.container.children);
|
|
93
|
-
children.forEach((child) => {
|
|
113
|
+
children.forEach((child, index) => {
|
|
94
114
|
const trackIndex = tracks.indexOf(Math.min(...tracks));
|
|
95
115
|
const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
|
|
96
116
|
const y = tracks[trackIndex];
|
|
@@ -100,15 +120,17 @@ class MasonryLayout {
|
|
|
100
120
|
child.style.setProperty('width', `${width}%`);
|
|
101
121
|
child.style.setProperty('left', `${x}%`);
|
|
102
122
|
child.style.setProperty('top', `${y}px`);
|
|
123
|
+
child.style.setProperty('z-index', index.toString());
|
|
103
124
|
requestAnimationFrame(() => {
|
|
104
125
|
child.classList.add('transition-all');
|
|
105
126
|
});
|
|
106
127
|
tracks[trackIndex] += child.offsetHeight + gap;
|
|
107
128
|
});
|
|
108
129
|
this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
|
|
109
|
-
};
|
|
130
|
+
}, 100);
|
|
110
131
|
this.columns =
|
|
111
132
|
typeof config.columns === 'function' ? config.columns(0) : config.columns;
|
|
133
|
+
this.childSizeObserver = new ResizeObserver(this.handleChildResize);
|
|
112
134
|
}
|
|
113
135
|
}
|
|
114
136
|
const initialStyle = {
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
1
|
+
{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -167,10 +167,20 @@ export const Grid: Story = {
|
|
|
167
167
|
);
|
|
168
168
|
const remove = (index: number) =>
|
|
169
169
|
setSizes((v) => v.filter((_, i) => i !== index));
|
|
170
|
+
const resize = (index: number) =>
|
|
171
|
+
setSizes((v) => {
|
|
172
|
+
const size = 50 + Math.floor(Math.random() * 300);
|
|
173
|
+
return v.map((s, i) => (i === index ? size : s));
|
|
174
|
+
});
|
|
170
175
|
return (
|
|
171
176
|
<Card.Grid>
|
|
172
177
|
{sizes.map((size, i) => (
|
|
173
|
-
<GridCard
|
|
178
|
+
<GridCard
|
|
179
|
+
key={i}
|
|
180
|
+
size={size}
|
|
181
|
+
remove={() => remove(i)}
|
|
182
|
+
resize={() => resize(i)}
|
|
183
|
+
/>
|
|
174
184
|
))}
|
|
175
185
|
</Card.Grid>
|
|
176
186
|
);
|
|
@@ -197,17 +207,32 @@ export const GridCompact: Story = {
|
|
|
197
207
|
},
|
|
198
208
|
};
|
|
199
209
|
|
|
200
|
-
function GridCard({
|
|
210
|
+
function GridCard({
|
|
211
|
+
size,
|
|
212
|
+
remove,
|
|
213
|
+
resize,
|
|
214
|
+
}: {
|
|
215
|
+
size: number;
|
|
216
|
+
remove: () => void;
|
|
217
|
+
resize?: () => void;
|
|
218
|
+
}) {
|
|
201
219
|
return (
|
|
202
220
|
<CardRoot style={{ height: size }}>
|
|
203
221
|
<CardMain>
|
|
204
222
|
<CardTitle>{size}</CardTitle>
|
|
205
223
|
</CardMain>
|
|
206
|
-
<
|
|
207
|
-
<
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
224
|
+
<CardFooter>
|
|
225
|
+
<CardActions>
|
|
226
|
+
<Button size="small" onClick={remove}>
|
|
227
|
+
Delete
|
|
228
|
+
</Button>
|
|
229
|
+
{resize && (
|
|
230
|
+
<Button size="small" onClick={resize}>
|
|
231
|
+
Resize
|
|
232
|
+
</Button>
|
|
233
|
+
)}
|
|
234
|
+
</CardActions>
|
|
235
|
+
</CardFooter>
|
|
211
236
|
</CardRoot>
|
|
212
237
|
);
|
|
213
238
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { debounce } from '@a-type/utils';
|
|
1
2
|
import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
|
|
2
3
|
|
|
3
4
|
interface MasonryLayoutConfig {
|
|
@@ -8,6 +9,7 @@ interface MasonryLayoutConfig {
|
|
|
8
9
|
class MasonryLayout {
|
|
9
10
|
private containerResizeObserver: ResizeObserver | null = null;
|
|
10
11
|
private containerMutationObserver: MutationObserver | null = null;
|
|
12
|
+
private childSizeObserver: ResizeObserver;
|
|
11
13
|
|
|
12
14
|
private container: HTMLElement | null = null;
|
|
13
15
|
|
|
@@ -16,6 +18,7 @@ class MasonryLayout {
|
|
|
16
18
|
constructor(private config: MasonryLayoutConfig) {
|
|
17
19
|
this.columns =
|
|
18
20
|
typeof config.columns === 'function' ? config.columns(0) : config.columns;
|
|
21
|
+
this.childSizeObserver = new ResizeObserver(this.handleChildResize);
|
|
19
22
|
}
|
|
20
23
|
|
|
21
24
|
attach = (container: HTMLElement) => {
|
|
@@ -41,6 +44,7 @@ class MasonryLayout {
|
|
|
41
44
|
node.style.setProperty('position', 'absolute');
|
|
42
45
|
// hide until laid out
|
|
43
46
|
node.style.setProperty('visibility', 'hidden');
|
|
47
|
+
this.childSizeObserver.observe(node);
|
|
44
48
|
}
|
|
45
49
|
});
|
|
46
50
|
|
|
@@ -93,6 +97,13 @@ class MasonryLayout {
|
|
|
93
97
|
node.style.setProperty('position', 'absolute');
|
|
94
98
|
// hide until laid out
|
|
95
99
|
node.style.setProperty('visibility', 'hidden');
|
|
100
|
+
|
|
101
|
+
this.childSizeObserver?.observe(node);
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
entry.removedNodes.forEach((node) => {
|
|
105
|
+
if (node instanceof HTMLElement) {
|
|
106
|
+
this.childSizeObserver?.unobserve(node);
|
|
96
107
|
}
|
|
97
108
|
});
|
|
98
109
|
}
|
|
@@ -100,13 +111,23 @@ class MasonryLayout {
|
|
|
100
111
|
setTimeout(this.relayout, 100);
|
|
101
112
|
};
|
|
102
113
|
|
|
103
|
-
private
|
|
114
|
+
private handleChildResize = (entries: ResizeObserverEntry[]) => {
|
|
115
|
+
// only worry about height changes
|
|
116
|
+
for (const entry of entries) {
|
|
117
|
+
const lastSeenHeight = entry.target.getAttribute('data-last-height');
|
|
118
|
+
const currentHeight = entry.contentRect.height;
|
|
119
|
+
entry.target.setAttribute('data-last-height', currentHeight.toString());
|
|
120
|
+
if (lastSeenHeight && lastSeenHeight !== currentHeight.toString()) {
|
|
121
|
+
this.relayout();
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
private relayout = debounce(() => {
|
|
104
127
|
if (!this.container) {
|
|
105
128
|
return;
|
|
106
129
|
}
|
|
107
130
|
|
|
108
|
-
console.log('relayout');
|
|
109
|
-
|
|
110
131
|
const tracks = new Array(this.columns).fill(0);
|
|
111
132
|
const gap = this.config.gap;
|
|
112
133
|
// percentage-based width and x position so that items automatically
|
|
@@ -119,7 +140,7 @@ class MasonryLayout {
|
|
|
119
140
|
const gapPercentageWidth = (gap / this.container.offsetWidth) * 100;
|
|
120
141
|
|
|
121
142
|
const children = Array.from(this.container.children) as HTMLElement[];
|
|
122
|
-
children.forEach((child) => {
|
|
143
|
+
children.forEach((child, index) => {
|
|
123
144
|
const trackIndex = tracks.indexOf(Math.min(...tracks));
|
|
124
145
|
const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
|
|
125
146
|
const y = tracks[trackIndex];
|
|
@@ -129,13 +150,14 @@ class MasonryLayout {
|
|
|
129
150
|
child.style.setProperty('width', `${width}%`);
|
|
130
151
|
child.style.setProperty('left', `${x}%`);
|
|
131
152
|
child.style.setProperty('top', `${y}px`);
|
|
153
|
+
child.style.setProperty('z-index', index.toString());
|
|
132
154
|
requestAnimationFrame(() => {
|
|
133
155
|
child.classList.add('transition-all');
|
|
134
156
|
});
|
|
135
157
|
tracks[trackIndex] += child.offsetHeight + gap;
|
|
136
158
|
});
|
|
137
159
|
this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
|
|
138
|
-
};
|
|
160
|
+
}, 100);
|
|
139
161
|
}
|
|
140
162
|
|
|
141
163
|
export interface MasonryProps {
|