react-grid-layout 2.2.2 → 2.2.4
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/{ResponsiveGridLayout-MbDNfJ8M.d.ts → ResponsiveGridLayout-BjVraYMQ.d.mts} +2 -3
- package/dist/{ResponsiveGridLayout-DqK__izz.d.mts → ResponsiveGridLayout-BrhkSyZk.d.ts} +2 -3
- package/dist/{calculate-FbCWy8x1.d.mts → calculate-DH4EVtn1.d.mts} +2 -2
- package/dist/{calculate-9RxGrt-U.d.ts → calculate-rP3DHexe.d.ts} +2 -2
- package/dist/{chunk-2DDROKB2.js → chunk-55DQUWLA.js} +21 -23
- package/dist/{chunk-AWM66AWF.mjs → chunk-76RTO6EO.mjs} +0 -2
- package/dist/{chunk-XM2M6TC6.mjs → chunk-7ZM5LVH2.mjs} +20 -12
- package/dist/{chunk-BJFPTW5Q.js → chunk-A5WIFECI.js} +0 -2
- package/dist/{chunk-QGXQSZII.js → chunk-BMN6M2VL.js} +66 -38
- package/dist/{chunk-XYPIYYYQ.mjs → chunk-KDANGDDL.mjs} +1 -3
- package/dist/{chunk-YFVX5RDK.mjs → chunk-LY5GT7Q2.mjs} +36 -8
- package/dist/chunk-O3KX3VYW.mjs +1 -0
- package/dist/{chunk-KEM2G3LX.js → chunk-QAWP6PEK.js} +87 -79
- package/dist/chunk-ZJHF4QM5.js +2 -0
- package/dist/core.d.mts +5 -5
- package/dist/core.d.ts +5 -5
- package/dist/core.js +68 -70
- package/dist/core.mjs +3 -5
- package/dist/extras.d.mts +2 -2
- package/dist/extras.d.ts +2 -2
- package/dist/extras.js +8 -10
- package/dist/extras.mjs +1 -3
- package/dist/index.d.mts +5 -5
- package/dist/index.d.ts +5 -5
- package/dist/index.js +40 -42
- package/dist/index.mjs +5 -7
- package/dist/legacy.d.mts +2 -2
- package/dist/legacy.d.ts +2 -2
- package/dist/legacy.js +26 -18
- package/dist/legacy.mjs +15 -7
- package/dist/{position-CetgOHhD.d.mts → position-BV-g3Ezg.d.mts} +2 -2
- package/dist/{position-DhZqWO1-.d.ts → position-CSgQSjwQ.d.ts} +2 -2
- package/dist/react.d.mts +5 -5
- package/dist/react.d.ts +5 -5
- package/dist/react.js +26 -28
- package/dist/react.mjs +5 -7
- package/dist/{responsive-T0N0GmBB.d.mts → responsive-BrTV_0tK.d.mts} +2 -2
- package/dist/{responsive-DLRtE8v8.d.ts → responsive-C_YtBQYq.d.ts} +2 -2
- package/dist/{types-BiXsdXr7.d.mts → types-jd8MiKM1.d.mts} +1 -1
- package/dist/{types-BiXsdXr7.d.ts → types-jd8MiKM1.d.ts} +1 -1
- package/package.json +22 -22
- package/dist/chunk-2DDROKB2.js.map +0 -1
- package/dist/chunk-AWM66AWF.mjs.map +0 -1
- package/dist/chunk-BJFPTW5Q.js.map +0 -1
- package/dist/chunk-KEM2G3LX.js.map +0 -1
- package/dist/chunk-PBQSHIID.js +0 -4
- package/dist/chunk-PBQSHIID.js.map +0 -1
- package/dist/chunk-QGXQSZII.js.map +0 -1
- package/dist/chunk-XM2M6TC6.mjs.map +0 -1
- package/dist/chunk-XYPIYYYQ.mjs.map +0 -1
- package/dist/chunk-YFVX5RDK.mjs.map +0 -1
- package/dist/chunk-ZWN22PS2.mjs +0 -3
- package/dist/chunk-ZWN22PS2.mjs.map +0 -1
- package/dist/core.js.map +0 -1
- package/dist/core.mjs.map +0 -1
- package/dist/extras.js.map +0 -1
- package/dist/extras.mjs.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/dist/legacy.js.map +0 -1
- package/dist/legacy.mjs.map +0 -1
- package/dist/react.js.map +0 -1
- package/dist/react.mjs.map +0 -1
|
@@ -1,8 +1,22 @@
|
|
|
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-KDANGDDL.mjs';
|
|
2
|
+
import { correctBounds, cloneLayout, getLayoutItem, cloneLayoutItem, moveElement, bottom } from './chunk-76RTO6EO.mjs';
|
|
3
3
|
import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
|
|
4
4
|
import { deepEqual } from 'fast-equals';
|
|
5
5
|
|
|
6
|
+
function getContentWidth(node) {
|
|
7
|
+
const style = typeof globalThis.getComputedStyle === "function" ? globalThis.getComputedStyle(node) : null;
|
|
8
|
+
if (!style) return node.clientWidth;
|
|
9
|
+
const px = (value) => {
|
|
10
|
+
const parsed = Number.parseFloat(value);
|
|
11
|
+
return Number.isFinite(parsed) ? parsed : 0;
|
|
12
|
+
};
|
|
13
|
+
const computed = Number.parseFloat(style.width);
|
|
14
|
+
if (Number.isFinite(computed)) return Math.max(0, computed);
|
|
15
|
+
return Math.max(
|
|
16
|
+
0,
|
|
17
|
+
node.clientWidth - px(style.paddingLeft) - px(style.paddingRight)
|
|
18
|
+
);
|
|
19
|
+
}
|
|
6
20
|
function useContainerWidth(options = {}) {
|
|
7
21
|
const { measureBeforeMount = false, initialWidth = 1280 } = options;
|
|
8
22
|
const [width, setWidth] = useState(initialWidth);
|
|
@@ -12,8 +26,8 @@ function useContainerWidth(options = {}) {
|
|
|
12
26
|
const measureWidth = useCallback(() => {
|
|
13
27
|
const node = containerRef.current;
|
|
14
28
|
if (node) {
|
|
15
|
-
const newWidth = node
|
|
16
|
-
setWidth(newWidth);
|
|
29
|
+
const newWidth = Math.round(getContentWidth(node));
|
|
30
|
+
setWidth((prev) => prev === newWidth ? prev : newWidth);
|
|
17
31
|
if (!mounted) {
|
|
18
32
|
setMounted(true);
|
|
19
33
|
}
|
|
@@ -24,14 +38,30 @@ function useContainerWidth(options = {}) {
|
|
|
24
38
|
if (!node) return;
|
|
25
39
|
measureWidth();
|
|
26
40
|
if (typeof ResizeObserver !== "undefined") {
|
|
41
|
+
let rafId = null;
|
|
27
42
|
observerRef.current = new ResizeObserver((entries) => {
|
|
28
43
|
const entry = entries[0];
|
|
29
44
|
if (entry) {
|
|
30
|
-
const newWidth = entry.contentRect.width;
|
|
31
|
-
|
|
45
|
+
const newWidth = Math.round(entry.contentRect.width);
|
|
46
|
+
if (rafId !== null) {
|
|
47
|
+
cancelAnimationFrame(rafId);
|
|
48
|
+
}
|
|
49
|
+
rafId = requestAnimationFrame(() => {
|
|
50
|
+
setWidth((prev) => prev === newWidth ? prev : newWidth);
|
|
51
|
+
rafId = null;
|
|
52
|
+
});
|
|
32
53
|
}
|
|
33
54
|
});
|
|
34
55
|
observerRef.current.observe(node);
|
|
56
|
+
return () => {
|
|
57
|
+
if (rafId !== null) {
|
|
58
|
+
cancelAnimationFrame(rafId);
|
|
59
|
+
}
|
|
60
|
+
if (observerRef.current) {
|
|
61
|
+
observerRef.current.disconnect();
|
|
62
|
+
observerRef.current = null;
|
|
63
|
+
}
|
|
64
|
+
};
|
|
35
65
|
}
|
|
36
66
|
return () => {
|
|
37
67
|
if (observerRef.current) {
|
|
@@ -421,5 +451,3 @@ function useResponsiveLayout(options) {
|
|
|
421
451
|
}
|
|
422
452
|
|
|
423
453
|
export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, useContainerWidth, useGridLayout, useResponsiveLayout };
|
|
424
|
-
//# sourceMappingURL=chunk-YFVX5RDK.mjs.map
|
|
425
|
-
//# sourceMappingURL=chunk-YFVX5RDK.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
3
|
+
var chunk55DQUWLA_js = require('./chunk-55DQUWLA.js');
|
|
4
|
+
var chunkA5WIFECI_js = require('./chunk-A5WIFECI.js');
|
|
5
5
|
var React2 = require('react');
|
|
6
6
|
var reactDraggable = require('react-draggable');
|
|
7
7
|
var reactResizable = require('react-resizable');
|
|
@@ -48,7 +48,7 @@ function GridItem(props) {
|
|
|
48
48
|
i,
|
|
49
49
|
resizeHandles,
|
|
50
50
|
resizeHandle,
|
|
51
|
-
constraints =
|
|
51
|
+
constraints = chunk55DQUWLA_js.defaultConstraints,
|
|
52
52
|
layoutItem,
|
|
53
53
|
layout = [],
|
|
54
54
|
onDragStart: onDragStartProp,
|
|
@@ -131,14 +131,14 @@ function GridItem(props) {
|
|
|
131
131
|
return positionStrategy.calcStyle(pos2);
|
|
132
132
|
}
|
|
133
133
|
if (useCSSTransforms) {
|
|
134
|
-
return
|
|
134
|
+
return chunk55DQUWLA_js.setTransform(pos2);
|
|
135
135
|
}
|
|
136
|
-
const styleObj =
|
|
136
|
+
const styleObj = chunk55DQUWLA_js.setTopLeft(pos2);
|
|
137
137
|
if (usePercentages) {
|
|
138
138
|
return {
|
|
139
139
|
...styleObj,
|
|
140
|
-
left:
|
|
141
|
-
width:
|
|
140
|
+
left: chunk55DQUWLA_js.perc(pos2.left / containerWidth),
|
|
141
|
+
width: chunk55DQUWLA_js.perc(pos2.width / containerWidth)
|
|
142
142
|
};
|
|
143
143
|
}
|
|
144
144
|
return styleObj;
|
|
@@ -184,12 +184,12 @@ function GridItem(props) {
|
|
|
184
184
|
return;
|
|
185
185
|
}
|
|
186
186
|
setDragging(true);
|
|
187
|
-
const rawPos =
|
|
187
|
+
const rawPos = chunkA5WIFECI_js.calcXYRaw(
|
|
188
188
|
positionParams,
|
|
189
189
|
newPosition.top,
|
|
190
190
|
newPosition.left
|
|
191
191
|
);
|
|
192
|
-
const { x: newX, y: newY } =
|
|
192
|
+
const { x: newX, y: newY } = chunk55DQUWLA_js.applyPositionConstraints(
|
|
193
193
|
constraints,
|
|
194
194
|
effectiveLayoutItem,
|
|
195
195
|
rawPos.x,
|
|
@@ -228,12 +228,12 @@ function GridItem(props) {
|
|
|
228
228
|
thresholdExceededRef.current = true;
|
|
229
229
|
dragPendingRef.current = false;
|
|
230
230
|
if (onDragStartProp) {
|
|
231
|
-
const rawPos2 =
|
|
231
|
+
const rawPos2 = chunkA5WIFECI_js.calcXYRaw(
|
|
232
232
|
positionParams,
|
|
233
233
|
dragPositionRef.current.top,
|
|
234
234
|
dragPositionRef.current.left
|
|
235
235
|
);
|
|
236
|
-
const { x: startX, y: startY } =
|
|
236
|
+
const { x: startX, y: startY } = chunk55DQUWLA_js.applyPositionConstraints(
|
|
237
237
|
constraints,
|
|
238
238
|
effectiveLayoutItem,
|
|
239
239
|
rawPos2.x,
|
|
@@ -252,17 +252,17 @@ function GridItem(props) {
|
|
|
252
252
|
if (isBounded) {
|
|
253
253
|
const { offsetParent } = node;
|
|
254
254
|
if (offsetParent) {
|
|
255
|
-
const bottomBoundary = offsetParent.clientHeight -
|
|
256
|
-
top =
|
|
257
|
-
const
|
|
258
|
-
const rightBoundary = containerWidth -
|
|
259
|
-
left =
|
|
255
|
+
const bottomBoundary = offsetParent.clientHeight - chunkA5WIFECI_js.calcGridItemWHPx(h, rowHeight, margin[1]);
|
|
256
|
+
top = chunkA5WIFECI_js.clamp(top, 0, bottomBoundary);
|
|
257
|
+
const colWidth2 = chunkA5WIFECI_js.calcGridColWidth(positionParams);
|
|
258
|
+
const rightBoundary = containerWidth - chunkA5WIFECI_js.calcGridItemWHPx(w, colWidth2, margin[0]);
|
|
259
|
+
left = chunkA5WIFECI_js.clamp(left, 0, rightBoundary);
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
262
|
const newPosition = { top, left };
|
|
263
263
|
dragPositionRef.current = newPosition;
|
|
264
|
-
const rawPos =
|
|
265
|
-
const { x: newX, y: newY } =
|
|
264
|
+
const rawPos = chunkA5WIFECI_js.calcXYRaw(positionParams, top, left);
|
|
265
|
+
const { x: newX, y: newY } = chunk55DQUWLA_js.applyPositionConstraints(
|
|
266
266
|
constraints,
|
|
267
267
|
effectiveLayoutItem,
|
|
268
268
|
rawPos.x,
|
|
@@ -309,8 +309,8 @@ function GridItem(props) {
|
|
|
309
309
|
const newPosition = { top, left };
|
|
310
310
|
setDragging(false);
|
|
311
311
|
dragPositionRef.current = { left: 0, top: 0 };
|
|
312
|
-
const rawPos =
|
|
313
|
-
const { x: newX, y: newY } =
|
|
312
|
+
const rawPos = chunkA5WIFECI_js.calcXYRaw(positionParams, top, left);
|
|
313
|
+
const { x: newX, y: newY } = chunk55DQUWLA_js.applyPositionConstraints(
|
|
314
314
|
constraints,
|
|
315
315
|
effectiveLayoutItem,
|
|
316
316
|
rawPos.x,
|
|
@@ -341,7 +341,7 @@ function GridItem(props) {
|
|
|
341
341
|
if (!handler) return;
|
|
342
342
|
let updatedSize;
|
|
343
343
|
if (node) {
|
|
344
|
-
updatedSize =
|
|
344
|
+
updatedSize = chunk55DQUWLA_js.resizeItemInDirection(
|
|
345
345
|
resizeHandle2,
|
|
346
346
|
position,
|
|
347
347
|
size,
|
|
@@ -355,12 +355,12 @@ function GridItem(props) {
|
|
|
355
355
|
};
|
|
356
356
|
}
|
|
357
357
|
resizePositionRef.current = updatedSize;
|
|
358
|
-
const rawSize =
|
|
358
|
+
const rawSize = chunkA5WIFECI_js.calcWHRaw(
|
|
359
359
|
positionParams,
|
|
360
360
|
updatedSize.width,
|
|
361
361
|
updatedSize.height
|
|
362
362
|
);
|
|
363
|
-
const { w: newW, h: newH } =
|
|
363
|
+
const { w: newW, h: newH } = chunk55DQUWLA_js.applySizeConstraints(
|
|
364
364
|
constraints,
|
|
365
365
|
effectiveLayoutItem,
|
|
366
366
|
rawSize.w,
|
|
@@ -369,7 +369,11 @@ function GridItem(props) {
|
|
|
369
369
|
getConstraintContext()
|
|
370
370
|
);
|
|
371
371
|
handler(i, newW, newH, {
|
|
372
|
-
|
|
372
|
+
// react-resizable forwards react-draggable's callback event, which is
|
|
373
|
+
// already a native MouseEvent/TouchEvent and has no `nativeEvent`.
|
|
374
|
+
// Reading it unconditionally handed consumers `undefined` (#2264).
|
|
375
|
+
// The drag handlers above pass the raw event for the same reason.
|
|
376
|
+
e: e.nativeEvent ?? e,
|
|
373
377
|
node,
|
|
374
378
|
size: updatedSize,
|
|
375
379
|
handle: resizeHandle2
|
|
@@ -390,7 +394,7 @@ function GridItem(props) {
|
|
|
390
394
|
const handleResizeStart = React2.useCallback(
|
|
391
395
|
(e, data) => {
|
|
392
396
|
setResizing(true);
|
|
393
|
-
const pos2 =
|
|
397
|
+
const pos2 = chunkA5WIFECI_js.calcGridItemPosition(positionParams, x, y, w, h);
|
|
394
398
|
const typedData = {
|
|
395
399
|
...data,
|
|
396
400
|
handle: data.handle
|
|
@@ -401,7 +405,7 @@ function GridItem(props) {
|
|
|
401
405
|
);
|
|
402
406
|
const handleResize = React2.useCallback(
|
|
403
407
|
(e, data) => {
|
|
404
|
-
const pos2 =
|
|
408
|
+
const pos2 = chunkA5WIFECI_js.calcGridItemPosition(positionParams, x, y, w, h);
|
|
405
409
|
const typedData = {
|
|
406
410
|
...data,
|
|
407
411
|
handle: data.handle
|
|
@@ -414,7 +418,7 @@ function GridItem(props) {
|
|
|
414
418
|
(e, data) => {
|
|
415
419
|
setResizing(false);
|
|
416
420
|
resizePositionRef.current = { top: 0, left: 0, width: 0, height: 0 };
|
|
417
|
-
const pos2 =
|
|
421
|
+
const pos2 = chunkA5WIFECI_js.calcGridItemPosition(positionParams, x, y, w, h);
|
|
418
422
|
const typedData = {
|
|
419
423
|
...data,
|
|
420
424
|
handle: data.handle
|
|
@@ -465,7 +469,7 @@ function GridItem(props) {
|
|
|
465
469
|
}
|
|
466
470
|
prevDroppingPositionRef.current = droppingPosition;
|
|
467
471
|
}, [droppingPosition, dragging, i]);
|
|
468
|
-
const pos =
|
|
472
|
+
const pos = chunkA5WIFECI_js.calcGridItemPosition(
|
|
469
473
|
positionParams,
|
|
470
474
|
x,
|
|
471
475
|
y,
|
|
@@ -475,12 +479,15 @@ function GridItem(props) {
|
|
|
475
479
|
resizing ? resizePositionRef.current : null
|
|
476
480
|
);
|
|
477
481
|
const child = React2__default.default.Children.only(children);
|
|
478
|
-
const
|
|
482
|
+
const colWidth = chunkA5WIFECI_js.calcGridColWidth(positionParams);
|
|
479
483
|
const minConstraints = [
|
|
480
|
-
|
|
481
|
-
|
|
484
|
+
chunkA5WIFECI_js.calcGridItemWHPx(minW, colWidth, margin[0]),
|
|
485
|
+
chunkA5WIFECI_js.calcGridItemWHPx(minH, rowHeight, margin[1])
|
|
486
|
+
];
|
|
487
|
+
const maxConstraints = [
|
|
488
|
+
chunkA5WIFECI_js.calcGridItemWHPx(maxW, colWidth, margin[0]),
|
|
489
|
+
chunkA5WIFECI_js.calcGridItemWHPx(maxH, rowHeight, margin[1])
|
|
482
490
|
];
|
|
483
|
-
const maxConstraints = [Infinity, Infinity];
|
|
484
491
|
const childProps = child.props;
|
|
485
492
|
const childClassName = childProps["className"];
|
|
486
493
|
const childStyle = childProps["style"];
|
|
@@ -563,7 +570,7 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactor)
|
|
|
563
570
|
childKeys.add(key);
|
|
564
571
|
const existingItem = initialLayout.find((l) => l.i === key);
|
|
565
572
|
if (existingItem) {
|
|
566
|
-
layout.push(
|
|
573
|
+
layout.push(chunkA5WIFECI_js.cloneLayoutItem(existingItem));
|
|
567
574
|
} else {
|
|
568
575
|
const childProps = child.props;
|
|
569
576
|
const dataGrid = childProps["data-grid"];
|
|
@@ -588,14 +595,14 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactor)
|
|
|
588
595
|
layout.push({
|
|
589
596
|
i: key,
|
|
590
597
|
x: 0,
|
|
591
|
-
y:
|
|
598
|
+
y: chunkA5WIFECI_js.bottom(layout),
|
|
592
599
|
w: 1,
|
|
593
600
|
h: 1
|
|
594
601
|
});
|
|
595
602
|
}
|
|
596
603
|
}
|
|
597
604
|
});
|
|
598
|
-
const corrected =
|
|
605
|
+
const corrected = chunkA5WIFECI_js.correctBounds(layout, { cols });
|
|
599
606
|
return compactor.compact(corrected, cols);
|
|
600
607
|
}
|
|
601
608
|
function GridLayout(props) {
|
|
@@ -608,9 +615,9 @@ function GridLayout(props) {
|
|
|
608
615
|
dragConfig: dragConfigProp,
|
|
609
616
|
resizeConfig: resizeConfigProp,
|
|
610
617
|
dropConfig: dropConfigProp,
|
|
611
|
-
positionStrategy =
|
|
618
|
+
positionStrategy = chunk55DQUWLA_js.defaultPositionStrategy,
|
|
612
619
|
compactor: compactorProp,
|
|
613
|
-
constraints =
|
|
620
|
+
constraints = chunk55DQUWLA_js.defaultConstraints,
|
|
614
621
|
// Layout data
|
|
615
622
|
layout: propsLayout = [],
|
|
616
623
|
droppingItem: droppingItemProp,
|
|
@@ -631,19 +638,19 @@ function GridLayout(props) {
|
|
|
631
638
|
onDropDragOver: onDropDragOverProp = noop
|
|
632
639
|
} = props;
|
|
633
640
|
const gridConfig = React2.useMemo(
|
|
634
|
-
() => ({ ...
|
|
641
|
+
() => ({ ...chunk55DQUWLA_js.defaultGridConfig, ...gridConfigProp }),
|
|
635
642
|
[gridConfigProp]
|
|
636
643
|
);
|
|
637
644
|
const dragConfig = React2.useMemo(
|
|
638
|
-
() => ({ ...
|
|
645
|
+
() => ({ ...chunk55DQUWLA_js.defaultDragConfig, ...dragConfigProp }),
|
|
639
646
|
[dragConfigProp]
|
|
640
647
|
);
|
|
641
648
|
const resizeConfig = React2.useMemo(
|
|
642
|
-
() => ({ ...
|
|
649
|
+
() => ({ ...chunk55DQUWLA_js.defaultResizeConfig, ...resizeConfigProp }),
|
|
643
650
|
[resizeConfigProp]
|
|
644
651
|
);
|
|
645
652
|
const dropConfig = React2.useMemo(
|
|
646
|
-
() => ({ ...
|
|
653
|
+
() => ({ ...chunk55DQUWLA_js.defaultDropConfig, ...dropConfigProp }),
|
|
647
654
|
[dropConfigProp]
|
|
648
655
|
);
|
|
649
656
|
const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
|
|
@@ -664,7 +671,7 @@ function GridLayout(props) {
|
|
|
664
671
|
defaultItem: defaultDropItem,
|
|
665
672
|
onDragOver: dropConfigOnDragOver
|
|
666
673
|
} = dropConfig;
|
|
667
|
-
const compactor = compactorProp ??
|
|
674
|
+
const compactor = compactorProp ?? chunk55DQUWLA_js.getCompactor("vertical");
|
|
668
675
|
const compactType = compactor.type;
|
|
669
676
|
const allowOverlap = compactor.allowOverlap;
|
|
670
677
|
const preventCollision = compactor.preventCollision ?? false;
|
|
@@ -744,14 +751,14 @@ function GridLayout(props) {
|
|
|
744
751
|
}, [layout, activeDrag, onLayoutChange, droppingItem.i]);
|
|
745
752
|
const containerHeight = React2.useMemo(() => {
|
|
746
753
|
if (!autoSize) return void 0;
|
|
747
|
-
const nbRow =
|
|
754
|
+
const nbRow = chunkA5WIFECI_js.bottom(layout);
|
|
748
755
|
const containerPaddingY = effectiveContainerPadding[1];
|
|
749
756
|
return nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPaddingY * 2 + "px";
|
|
750
757
|
}, [autoSize, layout, rowHeight, margin, effectiveContainerPadding]);
|
|
751
758
|
const onDragStart = React2.useCallback(
|
|
752
759
|
(i, _x, _y, data) => {
|
|
753
760
|
const currentLayout = layoutRef.current;
|
|
754
|
-
const l =
|
|
761
|
+
const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
|
|
755
762
|
if (!l) return;
|
|
756
763
|
const placeholder = {
|
|
757
764
|
w: l.w,
|
|
@@ -760,7 +767,7 @@ function GridLayout(props) {
|
|
|
760
767
|
y: l.y,
|
|
761
768
|
i
|
|
762
769
|
};
|
|
763
|
-
oldDragItemRef.current =
|
|
770
|
+
oldDragItemRef.current = chunkA5WIFECI_js.cloneLayoutItem(l);
|
|
764
771
|
oldLayoutRef.current = currentLayout;
|
|
765
772
|
setActiveDrag(placeholder);
|
|
766
773
|
onDragStartProp(currentLayout, l, l, null, data.e, data.node);
|
|
@@ -771,7 +778,7 @@ function GridLayout(props) {
|
|
|
771
778
|
(i, x, y, data) => {
|
|
772
779
|
const currentLayout = layoutRef.current;
|
|
773
780
|
const oldDragItem = oldDragItemRef.current;
|
|
774
|
-
const l =
|
|
781
|
+
const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
|
|
775
782
|
if (!l) return;
|
|
776
783
|
const placeholder = {
|
|
777
784
|
w: l.w,
|
|
@@ -780,7 +787,7 @@ function GridLayout(props) {
|
|
|
780
787
|
y: l.y,
|
|
781
788
|
i
|
|
782
789
|
};
|
|
783
|
-
const newLayout =
|
|
790
|
+
const newLayout = chunkA5WIFECI_js.moveElement(
|
|
784
791
|
currentLayout,
|
|
785
792
|
l,
|
|
786
793
|
x,
|
|
@@ -802,9 +809,9 @@ function GridLayout(props) {
|
|
|
802
809
|
if (!activeDrag) return;
|
|
803
810
|
const currentLayout = layoutRef.current;
|
|
804
811
|
const oldDragItem = oldDragItemRef.current;
|
|
805
|
-
const l =
|
|
812
|
+
const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
|
|
806
813
|
if (!l) return;
|
|
807
|
-
const newLayout =
|
|
814
|
+
const newLayout = chunkA5WIFECI_js.moveElement(
|
|
808
815
|
currentLayout,
|
|
809
816
|
l,
|
|
810
817
|
x,
|
|
@@ -840,9 +847,9 @@ function GridLayout(props) {
|
|
|
840
847
|
const onResizeStart = React2.useCallback(
|
|
841
848
|
(i, _w, _h, data) => {
|
|
842
849
|
const currentLayout = layoutRef.current;
|
|
843
|
-
const l =
|
|
850
|
+
const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
|
|
844
851
|
if (!l) return;
|
|
845
|
-
oldResizeItemRef.current =
|
|
852
|
+
oldResizeItemRef.current = chunkA5WIFECI_js.cloneLayoutItem(l);
|
|
846
853
|
oldLayoutRef.current = currentLayout;
|
|
847
854
|
setResizing(true);
|
|
848
855
|
onResizeStartProp(currentLayout, l, l, null, data.e, data.node);
|
|
@@ -857,7 +864,7 @@ function GridLayout(props) {
|
|
|
857
864
|
let shouldMoveItem = false;
|
|
858
865
|
let newX;
|
|
859
866
|
let newY;
|
|
860
|
-
const [newLayout, l] =
|
|
867
|
+
const [newLayout, l] = chunkA5WIFECI_js.withLayoutItem(currentLayout, i, (item) => {
|
|
861
868
|
newX = item.x;
|
|
862
869
|
newY = item.y;
|
|
863
870
|
if (["sw", "w", "nw", "n", "ne"].includes(handle)) {
|
|
@@ -874,7 +881,7 @@ function GridLayout(props) {
|
|
|
874
881
|
shouldMoveItem = true;
|
|
875
882
|
}
|
|
876
883
|
if (preventCollision && !allowOverlap) {
|
|
877
|
-
const collisions =
|
|
884
|
+
const collisions = chunkA5WIFECI_js.getAllCollisions(currentLayout, {
|
|
878
885
|
...item,
|
|
879
886
|
w,
|
|
880
887
|
h,
|
|
@@ -896,7 +903,7 @@ function GridLayout(props) {
|
|
|
896
903
|
if (!l) return;
|
|
897
904
|
let finalLayout = newLayout;
|
|
898
905
|
if (shouldMoveItem && newX !== void 0 && newY !== void 0) {
|
|
899
|
-
finalLayout =
|
|
906
|
+
finalLayout = chunkA5WIFECI_js.moveElement(
|
|
900
907
|
newLayout,
|
|
901
908
|
l,
|
|
902
909
|
newX,
|
|
@@ -933,7 +940,7 @@ function GridLayout(props) {
|
|
|
933
940
|
(i, _w, _h, data) => {
|
|
934
941
|
const currentLayout = layoutRef.current;
|
|
935
942
|
const oldResizeItem = oldResizeItemRef.current;
|
|
936
|
-
const l =
|
|
943
|
+
const l = chunkA5WIFECI_js.getLayoutItem(currentLayout, i);
|
|
937
944
|
const finalLayout = compactor.compact(currentLayout, cols);
|
|
938
945
|
onResizeStopProp(
|
|
939
946
|
finalLayout,
|
|
@@ -1004,13 +1011,13 @@ function GridLayout(props) {
|
|
|
1004
1011
|
containerWidth: width,
|
|
1005
1012
|
containerPadding: effectiveContainerPadding
|
|
1006
1013
|
};
|
|
1007
|
-
const actualColWidth =
|
|
1008
|
-
const itemPixelWidth =
|
|
1014
|
+
const actualColWidth = chunkA5WIFECI_js.calcGridColWidth(positionParams);
|
|
1015
|
+
const itemPixelWidth = chunkA5WIFECI_js.calcGridItemWHPx(
|
|
1009
1016
|
finalDroppingItem.w,
|
|
1010
1017
|
actualColWidth,
|
|
1011
1018
|
margin[0]
|
|
1012
1019
|
);
|
|
1013
|
-
const itemPixelHeight =
|
|
1020
|
+
const itemPixelHeight = chunkA5WIFECI_js.calcGridItemWHPx(
|
|
1014
1021
|
finalDroppingItem.h,
|
|
1015
1022
|
rowHeight,
|
|
1016
1023
|
margin[1]
|
|
@@ -1027,7 +1034,7 @@ function GridLayout(props) {
|
|
|
1027
1034
|
e: e.nativeEvent
|
|
1028
1035
|
};
|
|
1029
1036
|
if (!droppingDOMNode) {
|
|
1030
|
-
const calculatedPosition =
|
|
1037
|
+
const calculatedPosition = chunkA5WIFECI_js.calcXY(
|
|
1031
1038
|
positionParams,
|
|
1032
1039
|
clampedGridY,
|
|
1033
1040
|
clampedGridX,
|
|
@@ -1036,8 +1043,11 @@ function GridLayout(props) {
|
|
|
1036
1043
|
);
|
|
1037
1044
|
setDroppingDOMNode(/* @__PURE__ */ jsxRuntime.jsx("div", {}, finalDroppingItem.i));
|
|
1038
1045
|
setDroppingPosition(newDroppingPosition);
|
|
1046
|
+
const baseLayout = layoutRef.current.filter(
|
|
1047
|
+
(l) => l.i !== finalDroppingItem.i
|
|
1048
|
+
);
|
|
1039
1049
|
setLayout([
|
|
1040
|
-
...
|
|
1050
|
+
...baseLayout,
|
|
1041
1051
|
{
|
|
1042
1052
|
...finalDroppingItem,
|
|
1043
1053
|
x: calculatedPosition.x,
|
|
@@ -1103,7 +1113,7 @@ function GridLayout(props) {
|
|
|
1103
1113
|
const processGridItem = React2.useCallback(
|
|
1104
1114
|
(child, isDroppingItem) => {
|
|
1105
1115
|
if (!child || !child.key) return null;
|
|
1106
|
-
const l =
|
|
1116
|
+
const l = chunkA5WIFECI_js.getLayoutItem(layout, String(child.key));
|
|
1107
1117
|
if (!l) return null;
|
|
1108
1118
|
const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
|
|
1109
1119
|
const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
|
|
@@ -1291,14 +1301,14 @@ function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactor
|
|
|
1291
1301
|
layout.push({
|
|
1292
1302
|
i: key,
|
|
1293
1303
|
x: 0,
|
|
1294
|
-
y:
|
|
1304
|
+
y: chunkA5WIFECI_js.bottom(layout),
|
|
1295
1305
|
w: 1,
|
|
1296
1306
|
h: 1
|
|
1297
1307
|
});
|
|
1298
1308
|
}
|
|
1299
1309
|
}
|
|
1300
1310
|
});
|
|
1301
|
-
const corrected =
|
|
1311
|
+
const corrected = chunkA5WIFECI_js.correctBounds(layout, { cols });
|
|
1302
1312
|
return compactor.compact(corrected, cols);
|
|
1303
1313
|
}
|
|
1304
1314
|
function ResponsiveGridLayout(props) {
|
|
@@ -1319,17 +1329,17 @@ function ResponsiveGridLayout(props) {
|
|
|
1319
1329
|
onWidthChange = noop2,
|
|
1320
1330
|
...restProps
|
|
1321
1331
|
} = props;
|
|
1322
|
-
const compactor = compactorProp ??
|
|
1332
|
+
const compactor = compactorProp ?? chunk55DQUWLA_js.getCompactor("vertical");
|
|
1323
1333
|
const compactType = compactor.type;
|
|
1324
1334
|
const allowOverlap = compactor.allowOverlap;
|
|
1325
1335
|
const initialBreakpoint = React2.useMemo(() => {
|
|
1326
|
-
return propBreakpoint ??
|
|
1336
|
+
return propBreakpoint ?? chunk55DQUWLA_js.getBreakpointFromWidth(breakpoints, width);
|
|
1327
1337
|
}, []);
|
|
1328
1338
|
const initialCols = React2.useMemo(() => {
|
|
1329
|
-
return
|
|
1339
|
+
return chunk55DQUWLA_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
|
|
1330
1340
|
}, [initialBreakpoint, colsConfig]);
|
|
1331
1341
|
const initialLayout = React2.useMemo(() => {
|
|
1332
|
-
return
|
|
1342
|
+
return chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
|
|
1333
1343
|
propsLayouts,
|
|
1334
1344
|
breakpoints,
|
|
1335
1345
|
initialBreakpoint,
|
|
@@ -1354,7 +1364,7 @@ function ResponsiveGridLayout(props) {
|
|
|
1354
1364
|
}, [layouts]);
|
|
1355
1365
|
const derivedLayout = React2.useMemo(() => {
|
|
1356
1366
|
if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
|
|
1357
|
-
return
|
|
1367
|
+
return chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
|
|
1358
1368
|
propsLayouts,
|
|
1359
1369
|
breakpoints,
|
|
1360
1370
|
breakpoint,
|
|
@@ -1376,7 +1386,7 @@ function ResponsiveGridLayout(props) {
|
|
|
1376
1386
|
}, [derivedLayout, propsLayouts]);
|
|
1377
1387
|
React2.useEffect(() => {
|
|
1378
1388
|
if (compactType !== prevCompactTypeRef.current) {
|
|
1379
|
-
const newLayout = compactor.compact(
|
|
1389
|
+
const newLayout = compactor.compact(chunkA5WIFECI_js.cloneLayout(effectiveLayout), cols);
|
|
1380
1390
|
const newLayouts = {
|
|
1381
1391
|
...layoutsRef.current,
|
|
1382
1392
|
[breakpoint]: newLayout
|
|
@@ -1405,15 +1415,15 @@ function ResponsiveGridLayout(props) {
|
|
|
1405
1415
|
);
|
|
1406
1416
|
const colsChanged = !fastEquals.deepEqual(colsConfig, prevColsRef.current);
|
|
1407
1417
|
if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
|
|
1408
|
-
const newBreakpoint = propBreakpoint ??
|
|
1409
|
-
const newCols =
|
|
1418
|
+
const newBreakpoint = propBreakpoint ?? chunk55DQUWLA_js.getBreakpointFromWidth(breakpoints, width);
|
|
1419
|
+
const newCols = chunk55DQUWLA_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
|
|
1410
1420
|
const lastBreakpoint = breakpoint;
|
|
1411
1421
|
if (lastBreakpoint !== newBreakpoint || breakpointsChanged || colsChanged) {
|
|
1412
1422
|
const newLayouts = { ...layoutsRef.current };
|
|
1413
1423
|
if (!newLayouts[lastBreakpoint]) {
|
|
1414
|
-
newLayouts[lastBreakpoint] =
|
|
1424
|
+
newLayouts[lastBreakpoint] = chunkA5WIFECI_js.cloneLayout(layout);
|
|
1415
1425
|
}
|
|
1416
|
-
let newLayout =
|
|
1426
|
+
let newLayout = chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
|
|
1417
1427
|
newLayouts,
|
|
1418
1428
|
breakpoints,
|
|
1419
1429
|
newBreakpoint,
|
|
@@ -1436,11 +1446,11 @@ function ResponsiveGridLayout(props) {
|
|
|
1436
1446
|
onBreakpointChange(newBreakpoint, newCols);
|
|
1437
1447
|
onLayoutChange(newLayout, newLayouts);
|
|
1438
1448
|
}
|
|
1439
|
-
const currentMargin2 =
|
|
1449
|
+
const currentMargin2 = chunk55DQUWLA_js.getIndentationValue(
|
|
1440
1450
|
propMargin,
|
|
1441
1451
|
newBreakpoint
|
|
1442
1452
|
);
|
|
1443
|
-
const currentPadding = propContainerPadding ?
|
|
1453
|
+
const currentPadding = propContainerPadding ? chunk55DQUWLA_js.getIndentationValue(
|
|
1444
1454
|
propContainerPadding,
|
|
1445
1455
|
newBreakpoint
|
|
1446
1456
|
) : null;
|
|
@@ -1483,14 +1493,14 @@ function ResponsiveGridLayout(props) {
|
|
|
1483
1493
|
[breakpoint, onLayoutChange]
|
|
1484
1494
|
);
|
|
1485
1495
|
const currentMargin = React2.useMemo(() => {
|
|
1486
|
-
return
|
|
1496
|
+
return chunk55DQUWLA_js.getIndentationValue(
|
|
1487
1497
|
propMargin,
|
|
1488
1498
|
breakpoint
|
|
1489
1499
|
);
|
|
1490
1500
|
}, [propMargin, breakpoint]);
|
|
1491
1501
|
const currentContainerPadding = React2.useMemo(() => {
|
|
1492
1502
|
if (propContainerPadding === null) return null;
|
|
1493
|
-
return
|
|
1503
|
+
return chunk55DQUWLA_js.getIndentationValue(
|
|
1494
1504
|
propContainerPadding,
|
|
1495
1505
|
breakpoint
|
|
1496
1506
|
);
|
|
@@ -1522,5 +1532,3 @@ function ResponsiveGridLayout(props) {
|
|
|
1522
1532
|
exports.GridItem = GridItem;
|
|
1523
1533
|
exports.GridLayout = GridLayout;
|
|
1524
1534
|
exports.ResponsiveGridLayout = ResponsiveGridLayout;
|
|
1525
|
-
//# sourceMappingURL=chunk-KEM2G3LX.js.map
|
|
1526
|
-
//# sourceMappingURL=chunk-KEM2G3LX.js.map
|
package/dist/core.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { f as LayoutConstraint,
|
|
2
|
-
export { A as ArrayElement, B as Breakpoint,
|
|
3
|
-
export { c as collides,
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
1
|
+
import { f as LayoutConstraint, d as LayoutItem, g as ConstraintContext, R as ResizeHandleAxis } from './types-jd8MiKM1.mjs';
|
|
2
|
+
export { A as ArrayElement, B as Breakpoint, h as BreakpointCols, a as Breakpoints, C as CompactType, b as Compactor, i as DeepPartial, j as DragConfig, k as DragOverEvent, l as DropConfig, D as DroppingPosition, E as EventCallback, m as GridConfig, G as GridDragEvent, c as GridResizeEvent, L as Layout, M as Mutable, O as OnBreakpointChangeCallback, n as OnLayoutChangeCallback, o as PartialPosition, P as Position, p as PositionStrategy, q as ReactDraggableCallbackData, r as ResizeConfig, e as ResponsiveLayouts, S as Size, s as defaultDragConfig, t as defaultDropConfig, u as defaultGridConfig, v as defaultResizeConfig } from './types-jd8MiKM1.mjs';
|
|
3
|
+
export { c as collides, f as findOrGenerateResponsiveLayout, g as getAllCollisions, a as getBreakpointFromWidth, b as getColsFromBreakpoint, d as getFirstCollision, i as getIndentationValue, j as sortBreakpoints, s as sortLayoutItems, e as sortLayoutItemsByColRow, h as sortLayoutItemsByRowCol } from './responsive-BrTV_0tK.mjs';
|
|
4
|
+
export { i as absoluteStrategy, b as bottom, c as cloneLayout, a as cloneLayoutItem, j as compactItemHorizontal, k as compactItemVertical, l as correctBounds, o as createScaledStrategy, p as defaultPositionStrategy, g as getCompactor, d as getLayoutItem, q as getStatics, h as horizontalCompactor, r as horizontalOverlapCompactor, t as modifyLayout, m as moveElement, u as moveElementAwayFromCollision, n as noCompactor, w as noOverlapCompactor, x as perc, y as resizeItemInDirection, z as resolveCompactionCollision, s as setTopLeft, e as setTransform, A as transformStrategy, v as validateLayout, f as verticalCompactor, B as verticalOverlapCompactor, C as withLayoutItem } from './position-BV-g3Ezg.mjs';
|
|
5
|
+
export { G as GridCellConfig, d as GridCellDimensions, P as PositionParams, e as calcGridCellDimensions, f as calcGridColWidth, c as calcGridItemPosition, g as calcGridItemWHPx, a as calcWH, h as calcWHRaw, b as calcXY, i as calcXYRaw, j as clamp } from './calculate-DH4EVtn1.mjs';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Pluggable layout constraints for react-grid-layout v2
|
package/dist/core.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { f as LayoutConstraint,
|
|
2
|
-
export { A as ArrayElement, B as Breakpoint,
|
|
3
|
-
export { c as collides,
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
1
|
+
import { f as LayoutConstraint, d as LayoutItem, g as ConstraintContext, R as ResizeHandleAxis } from './types-jd8MiKM1.js';
|
|
2
|
+
export { A as ArrayElement, B as Breakpoint, h as BreakpointCols, a as Breakpoints, C as CompactType, b as Compactor, i as DeepPartial, j as DragConfig, k as DragOverEvent, l as DropConfig, D as DroppingPosition, E as EventCallback, m as GridConfig, G as GridDragEvent, c as GridResizeEvent, L as Layout, M as Mutable, O as OnBreakpointChangeCallback, n as OnLayoutChangeCallback, o as PartialPosition, P as Position, p as PositionStrategy, q as ReactDraggableCallbackData, r as ResizeConfig, e as ResponsiveLayouts, S as Size, s as defaultDragConfig, t as defaultDropConfig, u as defaultGridConfig, v as defaultResizeConfig } from './types-jd8MiKM1.js';
|
|
3
|
+
export { c as collides, f as findOrGenerateResponsiveLayout, g as getAllCollisions, a as getBreakpointFromWidth, b as getColsFromBreakpoint, d as getFirstCollision, i as getIndentationValue, j as sortBreakpoints, s as sortLayoutItems, e as sortLayoutItemsByColRow, h as sortLayoutItemsByRowCol } from './responsive-C_YtBQYq.js';
|
|
4
|
+
export { i as absoluteStrategy, b as bottom, c as cloneLayout, a as cloneLayoutItem, j as compactItemHorizontal, k as compactItemVertical, l as correctBounds, o as createScaledStrategy, p as defaultPositionStrategy, g as getCompactor, d as getLayoutItem, q as getStatics, h as horizontalCompactor, r as horizontalOverlapCompactor, t as modifyLayout, m as moveElement, u as moveElementAwayFromCollision, n as noCompactor, w as noOverlapCompactor, x as perc, y as resizeItemInDirection, z as resolveCompactionCollision, s as setTopLeft, e as setTransform, A as transformStrategy, v as validateLayout, f as verticalCompactor, B as verticalOverlapCompactor, C as withLayoutItem } from './position-CSgQSjwQ.js';
|
|
5
|
+
export { G as GridCellConfig, d as GridCellDimensions, P as PositionParams, e as calcGridCellDimensions, f as calcGridColWidth, c as calcGridItemPosition, g as calcGridItemWHPx, a as calcWH, h as calcWHRaw, b as calcXY, i as calcXYRaw, j as clamp } from './calculate-rP3DHexe.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Pluggable layout constraints for react-grid-layout v2
|