react-grid-layout 2.2.4 → 2.3.0
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/README.md +5 -0
- package/dist/{ResponsiveGridLayout-BjVraYMQ.d.mts → ResponsiveGridLayout-BSYEMZ9d.d.ts} +4 -4
- package/dist/{ResponsiveGridLayout-BrhkSyZk.d.ts → ResponsiveGridLayout-RNuyRTPe.d.mts} +4 -4
- package/dist/{calculate-DH4EVtn1.d.mts → calculate-BXoe3Mfz.d.mts} +1 -1
- package/dist/{calculate-rP3DHexe.d.ts → calculate-Tc1WkIxl.d.ts} +1 -1
- package/dist/{chunk-QAWP6PEK.js → chunk-CUP5Y2ZG.js} +495 -154
- package/dist/{chunk-55DQUWLA.js → chunk-QAIA5KAO.js} +33 -22
- package/dist/{chunk-BMN6M2VL.js → chunk-SL4EZ2NU.js} +49 -34
- package/dist/{chunk-LY5GT7Q2.mjs → chunk-TW4BCTKD.mjs} +19 -4
- package/dist/{chunk-KDANGDDL.mjs → chunk-VBU6B7II.mjs} +13 -2
- package/dist/{chunk-A5WIFECI.js → chunk-VJJIA3HC.js} +7 -3
- package/dist/{chunk-7ZM5LVH2.mjs → chunk-Z6CWRR74.mjs} +426 -85
- package/dist/{chunk-76RTO6EO.mjs → chunk-ZYNFVPDS.mjs} +7 -3
- package/dist/core.d.mts +5 -5
- package/dist/core.d.ts +5 -5
- package/dist/core.js +67 -67
- package/dist/core.mjs +2 -2
- package/dist/extras.d.mts +2 -2
- package/dist/extras.d.ts +2 -2
- package/dist/extras.js +8 -8
- package/dist/extras.mjs +1 -1
- package/dist/index.d.mts +5 -5
- package/dist/index.d.ts +5 -5
- package/dist/index.js +39 -39
- package/dist/index.mjs +4 -4
- package/dist/legacy.d.mts +18 -9
- package/dist/legacy.d.ts +18 -9
- package/dist/legacy.js +33 -23
- package/dist/legacy.mjs +16 -7
- package/dist/{position-CSgQSjwQ.d.ts → position-VdYnMJql.d.ts} +1 -1
- package/dist/{position-BV-g3Ezg.d.mts → position-iPly-ecb.d.mts} +1 -1
- package/dist/react.d.mts +24 -6
- package/dist/react.d.ts +24 -6
- package/dist/react.js +25 -25
- package/dist/react.mjs +4 -4
- package/dist/{responsive-BrTV_0tK.d.mts → responsive-BVtXrrTF.d.mts} +1 -1
- package/dist/{responsive-C_YtBQYq.d.ts → responsive-C6s9JAJU.d.ts} +1 -1
- package/dist/{types-jd8MiKM1.d.mts → types-DlzNckle.d.mts} +22 -0
- package/dist/{types-jd8MiKM1.d.ts → types-DlzNckle.d.ts} +22 -0
- package/package.json +3 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkVJJIA3HC_js = require('./chunk-VJJIA3HC.js');
|
|
4
4
|
|
|
5
5
|
// src/core/constraints.ts
|
|
6
6
|
function clamp(value, min, max) {
|
|
@@ -40,6 +40,15 @@ var containerBounds = {
|
|
|
40
40
|
x: clamp(x, 0, Math.max(0, cols - item.w)),
|
|
41
41
|
y: clamp(y, 0, Math.max(0, visibleRows - item.h))
|
|
42
42
|
};
|
|
43
|
+
},
|
|
44
|
+
constrainSize(item, w, h, handle, { cols, maxRows, containerHeight, rowHeight, margin }) {
|
|
45
|
+
const visibleRows = containerHeight > 0 ? Math.floor((containerHeight + margin[1]) / (rowHeight + margin[1])) : maxRows;
|
|
46
|
+
const maxW = handle === "w" || handle === "nw" || handle === "sw" ? item.x + item.w : cols - item.x;
|
|
47
|
+
const maxH = handle === "n" || handle === "nw" || handle === "ne" ? item.y + item.h : visibleRows - item.y;
|
|
48
|
+
return {
|
|
49
|
+
w: clamp(w, 1, Math.max(1, maxW)),
|
|
50
|
+
h: clamp(h, 1, Math.max(1, maxH))
|
|
51
|
+
};
|
|
43
52
|
}
|
|
44
53
|
};
|
|
45
54
|
var boundedX = {
|
|
@@ -343,7 +352,9 @@ var defaultResizeConfig = {
|
|
|
343
352
|
};
|
|
344
353
|
var defaultDropConfig = {
|
|
345
354
|
enabled: false,
|
|
346
|
-
defaultItem: { w: 1, h: 1 }
|
|
355
|
+
defaultItem: { w: 1, h: 1 },
|
|
356
|
+
touchEnabled: true,
|
|
357
|
+
touchDragSource: "[data-rgl-draggable]"
|
|
347
358
|
};
|
|
348
359
|
|
|
349
360
|
// src/core/compactors.ts
|
|
@@ -351,13 +362,13 @@ function resolveCompactionCollision(layout, item, moveToCoord, axis, hasStatics)
|
|
|
351
362
|
const sizeProp = axis === "x" ? "w" : "h";
|
|
352
363
|
item[axis] += 1;
|
|
353
364
|
const itemIndex = layout.findIndex((l) => l.i === item.i);
|
|
354
|
-
const layoutHasStatics = hasStatics ??
|
|
365
|
+
const layoutHasStatics = hasStatics ?? chunkVJJIA3HC_js.getStatics(layout).length > 0;
|
|
355
366
|
for (let i = itemIndex + 1; i < layout.length; i++) {
|
|
356
367
|
const otherItem = layout[i];
|
|
357
368
|
if (otherItem === void 0) continue;
|
|
358
369
|
if (otherItem.static) continue;
|
|
359
370
|
if (!layoutHasStatics && otherItem.y > item.y + item.h) break;
|
|
360
|
-
if (
|
|
371
|
+
if (chunkVJJIA3HC_js.collides(item, otherItem)) {
|
|
361
372
|
resolveCompactionCollision(
|
|
362
373
|
layout,
|
|
363
374
|
otherItem,
|
|
@@ -373,11 +384,11 @@ function compactItemVertical(compareWith, l, fullLayout, maxY) {
|
|
|
373
384
|
l.x = Math.max(l.x, 0);
|
|
374
385
|
l.y = Math.max(l.y, 0);
|
|
375
386
|
l.y = Math.min(maxY, l.y);
|
|
376
|
-
while (l.y > 0 && !
|
|
387
|
+
while (l.y > 0 && !chunkVJJIA3HC_js.getFirstCollision(compareWith, l)) {
|
|
377
388
|
l.y--;
|
|
378
389
|
}
|
|
379
390
|
let collision;
|
|
380
|
-
while ((collision =
|
|
391
|
+
while ((collision = chunkVJJIA3HC_js.getFirstCollision(compareWith, l)) !== void 0) {
|
|
381
392
|
resolveCompactionCollision(fullLayout, l, collision.y + collision.h, "y");
|
|
382
393
|
}
|
|
383
394
|
l.y = Math.max(l.y, 0);
|
|
@@ -386,16 +397,16 @@ function compactItemVertical(compareWith, l, fullLayout, maxY) {
|
|
|
386
397
|
function compactItemHorizontal(compareWith, l, cols, fullLayout) {
|
|
387
398
|
l.x = Math.max(l.x, 0);
|
|
388
399
|
l.y = Math.max(l.y, 0);
|
|
389
|
-
while (l.x > 0 && !
|
|
400
|
+
while (l.x > 0 && !chunkVJJIA3HC_js.getFirstCollision(compareWith, l)) {
|
|
390
401
|
l.x--;
|
|
391
402
|
}
|
|
392
403
|
let collision;
|
|
393
|
-
while ((collision =
|
|
404
|
+
while ((collision = chunkVJJIA3HC_js.getFirstCollision(compareWith, l)) !== void 0) {
|
|
394
405
|
resolveCompactionCollision(fullLayout, l, collision.x + collision.w, "x");
|
|
395
406
|
if (l.x + l.w > cols) {
|
|
396
407
|
l.x = cols - l.w;
|
|
397
408
|
l.y++;
|
|
398
|
-
while (l.x > 0 && !
|
|
409
|
+
while (l.x > 0 && !chunkVJJIA3HC_js.getFirstCollision(compareWith, l)) {
|
|
399
410
|
l.x--;
|
|
400
411
|
}
|
|
401
412
|
}
|
|
@@ -407,14 +418,14 @@ var verticalCompactor = {
|
|
|
407
418
|
type: "vertical",
|
|
408
419
|
allowOverlap: false,
|
|
409
420
|
compact(layout, _cols) {
|
|
410
|
-
const compareWith =
|
|
411
|
-
let maxY =
|
|
412
|
-
const sorted =
|
|
421
|
+
const compareWith = chunkVJJIA3HC_js.getStatics(layout);
|
|
422
|
+
let maxY = chunkVJJIA3HC_js.bottom(compareWith);
|
|
423
|
+
const sorted = chunkVJJIA3HC_js.sortLayoutItemsByRowCol(layout);
|
|
413
424
|
const out = new Array(layout.length);
|
|
414
425
|
for (let i = 0; i < sorted.length; i++) {
|
|
415
426
|
const sortedItem = sorted[i];
|
|
416
427
|
if (sortedItem === void 0) continue;
|
|
417
|
-
let l =
|
|
428
|
+
let l = chunkVJJIA3HC_js.cloneLayoutItem(sortedItem);
|
|
418
429
|
if (!l.static) {
|
|
419
430
|
l = compactItemVertical(compareWith, l, sorted, maxY);
|
|
420
431
|
maxY = Math.max(maxY, l.y + l.h);
|
|
@@ -431,13 +442,13 @@ var horizontalCompactor = {
|
|
|
431
442
|
type: "horizontal",
|
|
432
443
|
allowOverlap: false,
|
|
433
444
|
compact(layout, cols) {
|
|
434
|
-
const compareWith =
|
|
435
|
-
const sorted =
|
|
445
|
+
const compareWith = chunkVJJIA3HC_js.getStatics(layout);
|
|
446
|
+
const sorted = chunkVJJIA3HC_js.sortLayoutItemsByColRow(layout);
|
|
436
447
|
const out = new Array(layout.length);
|
|
437
448
|
for (let i = 0; i < sorted.length; i++) {
|
|
438
449
|
const sortedItem = sorted[i];
|
|
439
450
|
if (sortedItem === void 0) continue;
|
|
440
|
-
let l =
|
|
451
|
+
let l = chunkVJJIA3HC_js.cloneLayoutItem(sortedItem);
|
|
441
452
|
if (!l.static) {
|
|
442
453
|
l = compactItemHorizontal(compareWith, l, cols, sorted);
|
|
443
454
|
compareWith.push(l);
|
|
@@ -453,21 +464,21 @@ var noCompactor = {
|
|
|
453
464
|
type: null,
|
|
454
465
|
allowOverlap: false,
|
|
455
466
|
compact(layout, _cols) {
|
|
456
|
-
return
|
|
467
|
+
return chunkVJJIA3HC_js.cloneLayout(layout);
|
|
457
468
|
}
|
|
458
469
|
};
|
|
459
470
|
var verticalOverlapCompactor = {
|
|
460
471
|
...verticalCompactor,
|
|
461
472
|
allowOverlap: true,
|
|
462
473
|
compact(layout, _cols) {
|
|
463
|
-
return
|
|
474
|
+
return chunkVJJIA3HC_js.cloneLayout(layout);
|
|
464
475
|
}
|
|
465
476
|
};
|
|
466
477
|
var horizontalOverlapCompactor = {
|
|
467
478
|
...horizontalCompactor,
|
|
468
479
|
allowOverlap: true,
|
|
469
480
|
compact(layout, _cols) {
|
|
470
|
-
return
|
|
481
|
+
return chunkVJJIA3HC_js.cloneLayout(layout);
|
|
471
482
|
}
|
|
472
483
|
};
|
|
473
484
|
var noOverlapCompactor = {
|
|
@@ -525,7 +536,7 @@ function getColsFromBreakpoint(breakpoint, cols) {
|
|
|
525
536
|
function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactTypeOrCompactor) {
|
|
526
537
|
const existingLayout = layouts[breakpoint];
|
|
527
538
|
if (existingLayout) {
|
|
528
|
-
return
|
|
539
|
+
return chunkVJJIA3HC_js.cloneLayout(existingLayout);
|
|
529
540
|
}
|
|
530
541
|
let layout = layouts[lastBreakpoint];
|
|
531
542
|
const breakpointsSorted = sortBreakpoints(breakpoints);
|
|
@@ -541,8 +552,8 @@ function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBr
|
|
|
541
552
|
break;
|
|
542
553
|
}
|
|
543
554
|
}
|
|
544
|
-
const clonedLayout =
|
|
545
|
-
const corrected =
|
|
555
|
+
const clonedLayout = chunkVJJIA3HC_js.cloneLayout(layout || []);
|
|
556
|
+
const corrected = chunkVJJIA3HC_js.correctBounds(clonedLayout, { cols });
|
|
546
557
|
const compactor = typeof compactTypeOrCompactor === "object" && compactTypeOrCompactor !== null ? compactTypeOrCompactor : getCompactor(compactTypeOrCompactor);
|
|
547
558
|
return compactor.compact(corrected, cols);
|
|
548
559
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
3
|
+
var chunkQAIA5KAO_js = require('./chunk-QAIA5KAO.js');
|
|
4
|
+
var chunkVJJIA3HC_js = require('./chunk-VJJIA3HC.js');
|
|
5
5
|
var react = require('react');
|
|
6
6
|
var fastEquals = require('fast-equals');
|
|
7
7
|
|
|
@@ -20,7 +20,11 @@ function getContentWidth(node) {
|
|
|
20
20
|
);
|
|
21
21
|
}
|
|
22
22
|
function useContainerWidth(options = {}) {
|
|
23
|
-
const {
|
|
23
|
+
const {
|
|
24
|
+
measureBeforeMount = false,
|
|
25
|
+
initialWidth = 1280,
|
|
26
|
+
debounceTimeout
|
|
27
|
+
} = options;
|
|
24
28
|
const [width, setWidth] = react.useState(initialWidth);
|
|
25
29
|
const [mounted, setMounted] = react.useState(!measureBeforeMount);
|
|
26
30
|
const containerRef = react.useRef(null);
|
|
@@ -41,10 +45,19 @@ function useContainerWidth(options = {}) {
|
|
|
41
45
|
measureWidth();
|
|
42
46
|
if (typeof ResizeObserver !== "undefined") {
|
|
43
47
|
let rafId = null;
|
|
48
|
+
let debounceTimer;
|
|
44
49
|
observerRef.current = new ResizeObserver((entries) => {
|
|
45
50
|
const entry = entries[0];
|
|
46
51
|
if (entry) {
|
|
47
52
|
const newWidth = Math.round(entry.contentRect.width);
|
|
53
|
+
if (debounceTimeout && debounceTimeout > 0) {
|
|
54
|
+
window.clearTimeout(debounceTimer);
|
|
55
|
+
debounceTimer = window.setTimeout(() => {
|
|
56
|
+
setWidth((prev) => prev === newWidth ? prev : newWidth);
|
|
57
|
+
debounceTimer = void 0;
|
|
58
|
+
}, debounceTimeout);
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
48
61
|
if (rafId !== null) {
|
|
49
62
|
cancelAnimationFrame(rafId);
|
|
50
63
|
}
|
|
@@ -59,6 +72,8 @@ function useContainerWidth(options = {}) {
|
|
|
59
72
|
if (rafId !== null) {
|
|
60
73
|
cancelAnimationFrame(rafId);
|
|
61
74
|
}
|
|
75
|
+
window.clearTimeout(debounceTimer);
|
|
76
|
+
debounceTimer = void 0;
|
|
62
77
|
if (observerRef.current) {
|
|
63
78
|
observerRef.current.disconnect();
|
|
64
79
|
observerRef.current = null;
|
|
@@ -71,7 +86,7 @@ function useContainerWidth(options = {}) {
|
|
|
71
86
|
observerRef.current = null;
|
|
72
87
|
}
|
|
73
88
|
};
|
|
74
|
-
}, [measureWidth]);
|
|
89
|
+
}, [measureWidth, debounceTimeout]);
|
|
75
90
|
return {
|
|
76
91
|
width,
|
|
77
92
|
mounted,
|
|
@@ -85,11 +100,11 @@ function useGridLayout(options) {
|
|
|
85
100
|
cols,
|
|
86
101
|
preventCollision = false,
|
|
87
102
|
onLayoutChange,
|
|
88
|
-
compactor =
|
|
103
|
+
compactor = chunkQAIA5KAO_js.verticalCompactor
|
|
89
104
|
} = options;
|
|
90
105
|
const isDraggingRef = react.useRef(false);
|
|
91
106
|
const [layout, setLayoutState] = react.useState(() => {
|
|
92
|
-
const corrected =
|
|
107
|
+
const corrected = chunkVJJIA3HC_js.correctBounds(chunkVJJIA3HC_js.cloneLayout(propsLayout), { cols });
|
|
93
108
|
return compactor.compact(corrected, cols);
|
|
94
109
|
});
|
|
95
110
|
const [dragState, setDragState] = react.useState({
|
|
@@ -109,7 +124,7 @@ function useGridLayout(options) {
|
|
|
109
124
|
const prevLayoutRef = react.useRef(layout);
|
|
110
125
|
const setLayout = react.useCallback(
|
|
111
126
|
(newLayout) => {
|
|
112
|
-
const corrected =
|
|
127
|
+
const corrected = chunkVJJIA3HC_js.correctBounds(chunkVJJIA3HC_js.cloneLayout(newLayout), { cols });
|
|
113
128
|
const compacted = compactor.compact(corrected, cols);
|
|
114
129
|
setLayoutState(compacted);
|
|
115
130
|
},
|
|
@@ -129,11 +144,11 @@ function useGridLayout(options) {
|
|
|
129
144
|
}, [layout, onLayoutChange]);
|
|
130
145
|
const onDragStart = react.useCallback(
|
|
131
146
|
(itemId, x, y) => {
|
|
132
|
-
const item =
|
|
147
|
+
const item = chunkVJJIA3HC_js.getLayoutItem(layout, itemId);
|
|
133
148
|
if (!item) return null;
|
|
134
149
|
isDraggingRef.current = true;
|
|
135
150
|
const placeholder = {
|
|
136
|
-
...
|
|
151
|
+
...chunkVJJIA3HC_js.cloneLayoutItem(item),
|
|
137
152
|
x,
|
|
138
153
|
y,
|
|
139
154
|
static: false,
|
|
@@ -141,8 +156,8 @@ function useGridLayout(options) {
|
|
|
141
156
|
};
|
|
142
157
|
setDragState({
|
|
143
158
|
activeDrag: placeholder,
|
|
144
|
-
oldDragItem:
|
|
145
|
-
oldLayout:
|
|
159
|
+
oldDragItem: chunkVJJIA3HC_js.cloneLayoutItem(item),
|
|
160
|
+
oldLayout: chunkVJJIA3HC_js.cloneLayout(layout)
|
|
146
161
|
});
|
|
147
162
|
return placeholder;
|
|
148
163
|
},
|
|
@@ -150,13 +165,13 @@ function useGridLayout(options) {
|
|
|
150
165
|
);
|
|
151
166
|
const onDrag = react.useCallback(
|
|
152
167
|
(itemId, x, y) => {
|
|
153
|
-
const item =
|
|
168
|
+
const item = chunkVJJIA3HC_js.getLayoutItem(layout, itemId);
|
|
154
169
|
if (!item) return;
|
|
155
170
|
setDragState((prev) => ({
|
|
156
171
|
...prev,
|
|
157
172
|
activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null
|
|
158
173
|
}));
|
|
159
|
-
const newLayout =
|
|
174
|
+
const newLayout = chunkVJJIA3HC_js.moveElement(
|
|
160
175
|
layout,
|
|
161
176
|
item,
|
|
162
177
|
x,
|
|
@@ -175,9 +190,9 @@ function useGridLayout(options) {
|
|
|
175
190
|
);
|
|
176
191
|
const onDragStop = react.useCallback(
|
|
177
192
|
(itemId, x, y) => {
|
|
178
|
-
const item =
|
|
193
|
+
const item = chunkVJJIA3HC_js.getLayoutItem(layout, itemId);
|
|
179
194
|
if (!item) return;
|
|
180
|
-
const newLayout =
|
|
195
|
+
const newLayout = chunkVJJIA3HC_js.moveElement(
|
|
181
196
|
layout,
|
|
182
197
|
item,
|
|
183
198
|
x,
|
|
@@ -201,12 +216,12 @@ function useGridLayout(options) {
|
|
|
201
216
|
);
|
|
202
217
|
const onResizeStart = react.useCallback(
|
|
203
218
|
(itemId) => {
|
|
204
|
-
const item =
|
|
219
|
+
const item = chunkVJJIA3HC_js.getLayoutItem(layout, itemId);
|
|
205
220
|
if (!item) return null;
|
|
206
221
|
setResizeState({
|
|
207
222
|
resizing: true,
|
|
208
|
-
oldResizeItem:
|
|
209
|
-
oldLayout:
|
|
223
|
+
oldResizeItem: chunkVJJIA3HC_js.cloneLayoutItem(item),
|
|
224
|
+
oldLayout: chunkVJJIA3HC_js.cloneLayout(layout)
|
|
210
225
|
});
|
|
211
226
|
return item;
|
|
212
227
|
},
|
|
@@ -227,7 +242,7 @@ function useGridLayout(options) {
|
|
|
227
242
|
}
|
|
228
243
|
return item;
|
|
229
244
|
});
|
|
230
|
-
const corrected =
|
|
245
|
+
const corrected = chunkVJJIA3HC_js.correctBounds(newLayout, { cols });
|
|
231
246
|
const compacted = compactor.compact(corrected, cols);
|
|
232
247
|
setLayoutState(compacted);
|
|
233
248
|
},
|
|
@@ -246,10 +261,10 @@ function useGridLayout(options) {
|
|
|
246
261
|
);
|
|
247
262
|
const onDropDragOver = react.useCallback(
|
|
248
263
|
(droppingItem, position) => {
|
|
249
|
-
const existingItem =
|
|
264
|
+
const existingItem = chunkVJJIA3HC_js.getLayoutItem(layout, droppingItem.i);
|
|
250
265
|
if (!existingItem) {
|
|
251
266
|
const newLayout = [...layout, droppingItem];
|
|
252
|
-
const corrected =
|
|
267
|
+
const corrected = chunkVJJIA3HC_js.correctBounds(newLayout, { cols });
|
|
253
268
|
const compacted = compactor.compact(corrected, cols);
|
|
254
269
|
setLayoutState(compacted);
|
|
255
270
|
}
|
|
@@ -281,7 +296,7 @@ function useGridLayout(options) {
|
|
|
281
296
|
}
|
|
282
297
|
return item;
|
|
283
298
|
});
|
|
284
|
-
const corrected =
|
|
299
|
+
const corrected = chunkVJJIA3HC_js.correctBounds(newLayout, { cols });
|
|
285
300
|
const compacted = compactor.compact(corrected, cols);
|
|
286
301
|
setLayoutState(compacted);
|
|
287
302
|
setDropState({
|
|
@@ -291,7 +306,7 @@ function useGridLayout(options) {
|
|
|
291
306
|
},
|
|
292
307
|
[layout, cols, compactor]
|
|
293
308
|
);
|
|
294
|
-
const containerHeight = react.useMemo(() =>
|
|
309
|
+
const containerHeight = react.useMemo(() => chunkVJJIA3HC_js.bottom(layout), [layout]);
|
|
295
310
|
const isInteracting = dragState.activeDrag !== null || resizeState.resizing || dropState.droppingPosition !== null;
|
|
296
311
|
return {
|
|
297
312
|
layout,
|
|
@@ -333,23 +348,23 @@ function useResponsiveLayout(options) {
|
|
|
333
348
|
breakpoints = DEFAULT_BREAKPOINTS,
|
|
334
349
|
cols: colsConfig = DEFAULT_COLS,
|
|
335
350
|
layouts: propsLayouts = {},
|
|
336
|
-
compactor =
|
|
351
|
+
compactor = chunkQAIA5KAO_js.verticalCompactor,
|
|
337
352
|
onBreakpointChange,
|
|
338
353
|
onLayoutChange,
|
|
339
354
|
onWidthChange
|
|
340
355
|
} = options;
|
|
341
356
|
const sortedBreakpoints = react.useMemo(
|
|
342
|
-
() =>
|
|
357
|
+
() => chunkQAIA5KAO_js.sortBreakpoints(breakpoints),
|
|
343
358
|
[breakpoints]
|
|
344
359
|
);
|
|
345
360
|
const initialBreakpoint = react.useMemo(
|
|
346
|
-
() =>
|
|
361
|
+
() => chunkQAIA5KAO_js.getBreakpointFromWidth(breakpoints, width),
|
|
347
362
|
// Only calculate on mount, not on width changes
|
|
348
363
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
349
364
|
[]
|
|
350
365
|
);
|
|
351
366
|
const initialCols = react.useMemo(
|
|
352
|
-
() =>
|
|
367
|
+
() => chunkQAIA5KAO_js.getColsFromBreakpoint(initialBreakpoint, colsConfig),
|
|
353
368
|
[initialBreakpoint, colsConfig]
|
|
354
369
|
);
|
|
355
370
|
const [breakpoint, setBreakpoint] = react.useState(initialBreakpoint);
|
|
@@ -359,7 +374,7 @@ function useResponsiveLayout(options) {
|
|
|
359
374
|
for (const bp of sortedBreakpoints) {
|
|
360
375
|
const layout2 = propsLayouts[bp];
|
|
361
376
|
if (layout2) {
|
|
362
|
-
cloned[bp] =
|
|
377
|
+
cloned[bp] = chunkVJJIA3HC_js.cloneLayout(layout2);
|
|
363
378
|
}
|
|
364
379
|
}
|
|
365
380
|
return cloned;
|
|
@@ -369,7 +384,7 @@ function useResponsiveLayout(options) {
|
|
|
369
384
|
const prevPropsLayoutsRef = react.useRef(propsLayouts);
|
|
370
385
|
const prevLayoutsRef = react.useRef(layouts);
|
|
371
386
|
const layout = react.useMemo(() => {
|
|
372
|
-
return
|
|
387
|
+
return chunkQAIA5KAO_js.findOrGenerateResponsiveLayout(
|
|
373
388
|
layouts,
|
|
374
389
|
breakpoints,
|
|
375
390
|
breakpoint,
|
|
@@ -381,7 +396,7 @@ function useResponsiveLayout(options) {
|
|
|
381
396
|
const setLayoutForBreakpoint = react.useCallback((bp, newLayout) => {
|
|
382
397
|
setLayoutsState((prev) => ({
|
|
383
398
|
...prev,
|
|
384
|
-
[bp]:
|
|
399
|
+
[bp]: chunkVJJIA3HC_js.cloneLayout(newLayout)
|
|
385
400
|
}));
|
|
386
401
|
}, []);
|
|
387
402
|
const setLayouts = react.useCallback((newLayouts) => {
|
|
@@ -389,7 +404,7 @@ function useResponsiveLayout(options) {
|
|
|
389
404
|
for (const bp of Object.keys(newLayouts)) {
|
|
390
405
|
const layoutForBp = newLayouts[bp];
|
|
391
406
|
if (layoutForBp) {
|
|
392
|
-
cloned[bp] =
|
|
407
|
+
cloned[bp] = chunkVJJIA3HC_js.cloneLayout(layoutForBp);
|
|
393
408
|
}
|
|
394
409
|
}
|
|
395
410
|
setLayoutsState(cloned);
|
|
@@ -397,11 +412,11 @@ function useResponsiveLayout(options) {
|
|
|
397
412
|
react.useEffect(() => {
|
|
398
413
|
if (prevWidthRef.current === width) return;
|
|
399
414
|
prevWidthRef.current = width;
|
|
400
|
-
const newBreakpoint =
|
|
401
|
-
const newCols =
|
|
415
|
+
const newBreakpoint = chunkQAIA5KAO_js.getBreakpointFromWidth(breakpoints, width);
|
|
416
|
+
const newCols = chunkQAIA5KAO_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
|
|
402
417
|
onWidthChange?.(width, [10, 10], newCols, null);
|
|
403
418
|
if (newBreakpoint !== breakpoint) {
|
|
404
|
-
const newLayout =
|
|
419
|
+
const newLayout = chunkQAIA5KAO_js.findOrGenerateResponsiveLayout(
|
|
405
420
|
layouts,
|
|
406
421
|
breakpoints,
|
|
407
422
|
newBreakpoint,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { verticalCompactor, sortBreakpoints, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout } from './chunk-
|
|
2
|
-
import { correctBounds, cloneLayout, getLayoutItem, cloneLayoutItem, moveElement, bottom } from './chunk-
|
|
1
|
+
import { verticalCompactor, sortBreakpoints, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout } from './chunk-VBU6B7II.mjs';
|
|
2
|
+
import { correctBounds, cloneLayout, getLayoutItem, cloneLayoutItem, moveElement, bottom } from './chunk-ZYNFVPDS.mjs';
|
|
3
3
|
import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
|
|
4
4
|
import { deepEqual } from 'fast-equals';
|
|
5
5
|
|
|
@@ -18,7 +18,11 @@ function getContentWidth(node) {
|
|
|
18
18
|
);
|
|
19
19
|
}
|
|
20
20
|
function useContainerWidth(options = {}) {
|
|
21
|
-
const {
|
|
21
|
+
const {
|
|
22
|
+
measureBeforeMount = false,
|
|
23
|
+
initialWidth = 1280,
|
|
24
|
+
debounceTimeout
|
|
25
|
+
} = options;
|
|
22
26
|
const [width, setWidth] = useState(initialWidth);
|
|
23
27
|
const [mounted, setMounted] = useState(!measureBeforeMount);
|
|
24
28
|
const containerRef = useRef(null);
|
|
@@ -39,10 +43,19 @@ function useContainerWidth(options = {}) {
|
|
|
39
43
|
measureWidth();
|
|
40
44
|
if (typeof ResizeObserver !== "undefined") {
|
|
41
45
|
let rafId = null;
|
|
46
|
+
let debounceTimer;
|
|
42
47
|
observerRef.current = new ResizeObserver((entries) => {
|
|
43
48
|
const entry = entries[0];
|
|
44
49
|
if (entry) {
|
|
45
50
|
const newWidth = Math.round(entry.contentRect.width);
|
|
51
|
+
if (debounceTimeout && debounceTimeout > 0) {
|
|
52
|
+
window.clearTimeout(debounceTimer);
|
|
53
|
+
debounceTimer = window.setTimeout(() => {
|
|
54
|
+
setWidth((prev) => prev === newWidth ? prev : newWidth);
|
|
55
|
+
debounceTimer = void 0;
|
|
56
|
+
}, debounceTimeout);
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
46
59
|
if (rafId !== null) {
|
|
47
60
|
cancelAnimationFrame(rafId);
|
|
48
61
|
}
|
|
@@ -57,6 +70,8 @@ function useContainerWidth(options = {}) {
|
|
|
57
70
|
if (rafId !== null) {
|
|
58
71
|
cancelAnimationFrame(rafId);
|
|
59
72
|
}
|
|
73
|
+
window.clearTimeout(debounceTimer);
|
|
74
|
+
debounceTimer = void 0;
|
|
60
75
|
if (observerRef.current) {
|
|
61
76
|
observerRef.current.disconnect();
|
|
62
77
|
observerRef.current = null;
|
|
@@ -69,7 +84,7 @@ function useContainerWidth(options = {}) {
|
|
|
69
84
|
observerRef.current = null;
|
|
70
85
|
}
|
|
71
86
|
};
|
|
72
|
-
}, [measureWidth]);
|
|
87
|
+
}, [measureWidth, debounceTimeout]);
|
|
73
88
|
return {
|
|
74
89
|
width,
|
|
75
90
|
mounted,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getStatics, collides, getFirstCollision, bottom, sortLayoutItemsByRowCol, cloneLayoutItem, sortLayoutItemsByColRow, cloneLayout, correctBounds } from './chunk-
|
|
1
|
+
import { getStatics, collides, getFirstCollision, bottom, sortLayoutItemsByRowCol, cloneLayoutItem, sortLayoutItemsByColRow, cloneLayout, correctBounds } from './chunk-ZYNFVPDS.mjs';
|
|
2
2
|
|
|
3
3
|
// src/core/constraints.ts
|
|
4
4
|
function clamp(value, min, max) {
|
|
@@ -38,6 +38,15 @@ var containerBounds = {
|
|
|
38
38
|
x: clamp(x, 0, Math.max(0, cols - item.w)),
|
|
39
39
|
y: clamp(y, 0, Math.max(0, visibleRows - item.h))
|
|
40
40
|
};
|
|
41
|
+
},
|
|
42
|
+
constrainSize(item, w, h, handle, { cols, maxRows, containerHeight, rowHeight, margin }) {
|
|
43
|
+
const visibleRows = containerHeight > 0 ? Math.floor((containerHeight + margin[1]) / (rowHeight + margin[1])) : maxRows;
|
|
44
|
+
const maxW = handle === "w" || handle === "nw" || handle === "sw" ? item.x + item.w : cols - item.x;
|
|
45
|
+
const maxH = handle === "n" || handle === "nw" || handle === "ne" ? item.y + item.h : visibleRows - item.y;
|
|
46
|
+
return {
|
|
47
|
+
w: clamp(w, 1, Math.max(1, maxW)),
|
|
48
|
+
h: clamp(h, 1, Math.max(1, maxH))
|
|
49
|
+
};
|
|
41
50
|
}
|
|
42
51
|
};
|
|
43
52
|
var boundedX = {
|
|
@@ -341,7 +350,9 @@ var defaultResizeConfig = {
|
|
|
341
350
|
};
|
|
342
351
|
var defaultDropConfig = {
|
|
343
352
|
enabled: false,
|
|
344
|
-
defaultItem: { w: 1, h: 1 }
|
|
353
|
+
defaultItem: { w: 1, h: 1 },
|
|
354
|
+
touchEnabled: true,
|
|
355
|
+
touchDragSource: "[data-rgl-draggable]"
|
|
345
356
|
};
|
|
346
357
|
|
|
347
358
|
// src/core/compactors.ts
|
|
@@ -268,6 +268,9 @@ function correctBounds(layout, bounds) {
|
|
|
268
268
|
l.x = 0;
|
|
269
269
|
l.w = bounds.cols;
|
|
270
270
|
}
|
|
271
|
+
if (l.y === Infinity) {
|
|
272
|
+
l.y = bottom(collidesWith);
|
|
273
|
+
}
|
|
271
274
|
if (!l.static) {
|
|
272
275
|
collidesWith.push(l);
|
|
273
276
|
} else {
|
|
@@ -330,7 +333,7 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
|
|
|
330
333
|
return resultLayout;
|
|
331
334
|
}
|
|
332
335
|
function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction, compactType, cols) {
|
|
333
|
-
const compactH = compactType === "horizontal";
|
|
336
|
+
const compactH = compactType === "horizontal" || compactType === "wrap";
|
|
334
337
|
const compactV = compactType === "vertical";
|
|
335
338
|
const preventCollision = collidesWith.static;
|
|
336
339
|
if (isUserAction) {
|
|
@@ -366,8 +369,9 @@ function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAc
|
|
|
366
369
|
compactType);
|
|
367
370
|
}
|
|
368
371
|
if (collisionNorth && compactType === null) {
|
|
369
|
-
|
|
370
|
-
|
|
372
|
+
const newCollidesY = itemToMove.y;
|
|
373
|
+
collidesWith.y = newCollidesY;
|
|
374
|
+
itemToMove.y = newCollidesY + collidesWith.h;
|
|
371
375
|
return [...layout];
|
|
372
376
|
}
|
|
373
377
|
if (collisionWest && compactH) {
|