react-grid-layout 2.1.1 → 2.2.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/dist/{chunk-WWS3M5Y3.js → chunk-2TEFHZC4.js} +112 -112
- package/dist/{chunk-WWS3M5Y3.js.map → chunk-2TEFHZC4.js.map} +1 -1
- package/dist/{chunk-YQQYHEEG.js → chunk-43GDBEG4.js} +18 -18
- package/dist/{chunk-YQQYHEEG.js.map → chunk-43GDBEG4.js.map} +1 -1
- package/dist/{chunk-LIKX67MZ.mjs → chunk-MUNIXYTV.mjs} +3 -3
- package/dist/{chunk-LIKX67MZ.mjs.map → chunk-MUNIXYTV.mjs.map} +1 -1
- package/dist/{chunk-RB2IKK5B.js → chunk-NQUM7RXX.js} +162 -82
- package/dist/chunk-NQUM7RXX.js.map +1 -0
- package/dist/{chunk-FLITZMQC.mjs → chunk-OH26KG7Y.mjs} +113 -113
- package/dist/{chunk-FLITZMQC.mjs.map → chunk-OH26KG7Y.mjs.map} +1 -1
- package/dist/{chunk-PLWMASMX.mjs → chunk-OWK47QTG.mjs} +131 -51
- package/dist/chunk-OWK47QTG.mjs.map +1 -0
- package/dist/core.js +42 -42
- package/dist/core.mjs +1 -1
- package/dist/index.js +23 -23
- package/dist/index.mjs +3 -3
- package/dist/legacy.js +17 -14
- package/dist/legacy.js.map +1 -1
- package/dist/legacy.mjs +6 -3
- package/dist/legacy.mjs.map +1 -1
- package/dist/react.d.mts +5 -1
- package/dist/react.d.ts +5 -1
- package/dist/react.js +17 -17
- package/dist/react.mjs +3 -3
- package/package.json +1 -1
- package/dist/chunk-PLWMASMX.mjs.map +0 -1
- package/dist/chunk-RB2IKK5B.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunk2TEFHZC4_js = require('./chunk-2TEFHZC4.js');
|
|
4
4
|
var chunkBJFPTW5Q_js = require('./chunk-BJFPTW5Q.js');
|
|
5
5
|
var React2 = require('react');
|
|
6
6
|
var reactDraggable = require('react-draggable');
|
|
@@ -30,6 +30,8 @@ function GridItem(props) {
|
|
|
30
30
|
useCSSTransforms = true,
|
|
31
31
|
usePercentages = false,
|
|
32
32
|
transformScale = 1,
|
|
33
|
+
positionStrategy,
|
|
34
|
+
dragThreshold = 0,
|
|
33
35
|
droppingPosition,
|
|
34
36
|
className = "",
|
|
35
37
|
style,
|
|
@@ -46,7 +48,7 @@ function GridItem(props) {
|
|
|
46
48
|
i,
|
|
47
49
|
resizeHandles,
|
|
48
50
|
resizeHandle,
|
|
49
|
-
constraints =
|
|
51
|
+
constraints = chunk2TEFHZC4_js.defaultConstraints,
|
|
50
52
|
layoutItem,
|
|
51
53
|
layout = [],
|
|
52
54
|
onDragStart: onDragStartProp,
|
|
@@ -69,6 +71,11 @@ function GridItem(props) {
|
|
|
69
71
|
const prevDroppingPositionRef = React2.useRef(
|
|
70
72
|
void 0
|
|
71
73
|
);
|
|
74
|
+
const layoutRef = React2.useRef(layout);
|
|
75
|
+
layoutRef.current = layout;
|
|
76
|
+
const dragPendingRef = React2.useRef(false);
|
|
77
|
+
const initialDragClientRef = React2.useRef({ x: 0, y: 0 });
|
|
78
|
+
const thresholdExceededRef = React2.useRef(false);
|
|
72
79
|
const positionParams = React2.useMemo(
|
|
73
80
|
() => ({
|
|
74
81
|
cols,
|
|
@@ -89,9 +96,18 @@ function GridItem(props) {
|
|
|
89
96
|
// Auto-height grids don't have a fixed container height
|
|
90
97
|
rowHeight,
|
|
91
98
|
margin,
|
|
92
|
-
layout
|
|
99
|
+
// Use empty layout here - the actual layout will be accessed via layoutRef when needed
|
|
100
|
+
// This prevents the context from changing when layout changes, avoiding callback recreation
|
|
101
|
+
layout: []
|
|
102
|
+
}),
|
|
103
|
+
[cols, maxRows, containerWidth, rowHeight, margin]
|
|
104
|
+
);
|
|
105
|
+
const getConstraintContext = React2.useCallback(
|
|
106
|
+
() => ({
|
|
107
|
+
...constraintContext,
|
|
108
|
+
layout: layoutRef.current
|
|
93
109
|
}),
|
|
94
|
-
[
|
|
110
|
+
[constraintContext]
|
|
95
111
|
);
|
|
96
112
|
const effectiveLayoutItem = React2.useMemo(
|
|
97
113
|
() => layoutItem ?? {
|
|
@@ -109,20 +125,23 @@ function GridItem(props) {
|
|
|
109
125
|
);
|
|
110
126
|
const createStyle = React2.useCallback(
|
|
111
127
|
(pos2) => {
|
|
128
|
+
if (positionStrategy?.calcStyle) {
|
|
129
|
+
return positionStrategy.calcStyle(pos2);
|
|
130
|
+
}
|
|
112
131
|
if (useCSSTransforms) {
|
|
113
|
-
return
|
|
132
|
+
return chunk2TEFHZC4_js.setTransform(pos2);
|
|
114
133
|
}
|
|
115
|
-
const styleObj =
|
|
134
|
+
const styleObj = chunk2TEFHZC4_js.setTopLeft(pos2);
|
|
116
135
|
if (usePercentages) {
|
|
117
136
|
return {
|
|
118
137
|
...styleObj,
|
|
119
|
-
left:
|
|
120
|
-
width:
|
|
138
|
+
left: chunk2TEFHZC4_js.perc(pos2.left / containerWidth),
|
|
139
|
+
width: chunk2TEFHZC4_js.perc(pos2.width / containerWidth)
|
|
121
140
|
};
|
|
122
141
|
}
|
|
123
142
|
return styleObj;
|
|
124
143
|
},
|
|
125
|
-
[useCSSTransforms, usePercentages, containerWidth]
|
|
144
|
+
[positionStrategy, useCSSTransforms, usePercentages, containerWidth]
|
|
126
145
|
);
|
|
127
146
|
const onDragStart = React2.useCallback(
|
|
128
147
|
(e, { node }) => {
|
|
@@ -135,23 +154,45 @@ function GridItem(props) {
|
|
|
135
154
|
const pLeft = parentRect.left / transformScale;
|
|
136
155
|
const cTop = clientRect.top / transformScale;
|
|
137
156
|
const pTop = parentRect.top / transformScale;
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
157
|
+
let newPosition;
|
|
158
|
+
if (positionStrategy?.calcDragPosition) {
|
|
159
|
+
const mouseEvent = e;
|
|
160
|
+
newPosition = positionStrategy.calcDragPosition(
|
|
161
|
+
mouseEvent.clientX,
|
|
162
|
+
mouseEvent.clientY,
|
|
163
|
+
mouseEvent.clientX - clientRect.left,
|
|
164
|
+
mouseEvent.clientY - clientRect.top
|
|
165
|
+
);
|
|
166
|
+
} else {
|
|
167
|
+
newPosition = {
|
|
168
|
+
left: cLeft - pLeft + offsetParent.scrollLeft,
|
|
169
|
+
top: cTop - pTop + offsetParent.scrollTop
|
|
170
|
+
};
|
|
171
|
+
}
|
|
142
172
|
dragPositionRef.current = newPosition;
|
|
173
|
+
if (dragThreshold > 0) {
|
|
174
|
+
const mouseEvent = e;
|
|
175
|
+
initialDragClientRef.current = {
|
|
176
|
+
x: mouseEvent.clientX,
|
|
177
|
+
y: mouseEvent.clientY
|
|
178
|
+
};
|
|
179
|
+
dragPendingRef.current = true;
|
|
180
|
+
thresholdExceededRef.current = false;
|
|
181
|
+
setDragging(true);
|
|
182
|
+
return;
|
|
183
|
+
}
|
|
143
184
|
setDragging(true);
|
|
144
185
|
const rawPos = chunkBJFPTW5Q_js.calcXYRaw(
|
|
145
186
|
positionParams,
|
|
146
187
|
newPosition.top,
|
|
147
188
|
newPosition.left
|
|
148
189
|
);
|
|
149
|
-
const { x: newX, y: newY } =
|
|
190
|
+
const { x: newX, y: newY } = chunk2TEFHZC4_js.applyPositionConstraints(
|
|
150
191
|
constraints,
|
|
151
192
|
effectiveLayoutItem,
|
|
152
193
|
rawPos.x,
|
|
153
194
|
rawPos.y,
|
|
154
|
-
|
|
195
|
+
getConstraintContext()
|
|
155
196
|
);
|
|
156
197
|
onDragStartProp(i, newX, newY, {
|
|
157
198
|
e,
|
|
@@ -163,15 +204,47 @@ function GridItem(props) {
|
|
|
163
204
|
onDragStartProp,
|
|
164
205
|
transformScale,
|
|
165
206
|
positionParams,
|
|
207
|
+
positionStrategy,
|
|
208
|
+
dragThreshold,
|
|
166
209
|
constraints,
|
|
167
210
|
effectiveLayoutItem,
|
|
168
|
-
|
|
211
|
+
getConstraintContext,
|
|
169
212
|
i
|
|
170
213
|
]
|
|
171
214
|
);
|
|
172
215
|
const onDrag = React2.useCallback(
|
|
173
216
|
(e, { node, deltaX, deltaY }) => {
|
|
174
217
|
if (!onDragProp || !dragging) return;
|
|
218
|
+
const mouseEvent = e;
|
|
219
|
+
if (dragPendingRef.current && !thresholdExceededRef.current) {
|
|
220
|
+
const dx = mouseEvent.clientX - initialDragClientRef.current.x;
|
|
221
|
+
const dy = mouseEvent.clientY - initialDragClientRef.current.y;
|
|
222
|
+
const distance = Math.hypot(dx, dy);
|
|
223
|
+
if (distance < dragThreshold) {
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
thresholdExceededRef.current = true;
|
|
227
|
+
dragPendingRef.current = false;
|
|
228
|
+
if (onDragStartProp) {
|
|
229
|
+
const rawPos2 = chunkBJFPTW5Q_js.calcXYRaw(
|
|
230
|
+
positionParams,
|
|
231
|
+
dragPositionRef.current.top,
|
|
232
|
+
dragPositionRef.current.left
|
|
233
|
+
);
|
|
234
|
+
const { x: startX, y: startY } = chunk2TEFHZC4_js.applyPositionConstraints(
|
|
235
|
+
constraints,
|
|
236
|
+
effectiveLayoutItem,
|
|
237
|
+
rawPos2.x,
|
|
238
|
+
rawPos2.y,
|
|
239
|
+
getConstraintContext()
|
|
240
|
+
);
|
|
241
|
+
onDragStartProp(i, startX, startY, {
|
|
242
|
+
e,
|
|
243
|
+
node,
|
|
244
|
+
newPosition: dragPositionRef.current
|
|
245
|
+
});
|
|
246
|
+
}
|
|
247
|
+
}
|
|
175
248
|
let top = dragPositionRef.current.top + deltaY;
|
|
176
249
|
let left = dragPositionRef.current.left + deltaX;
|
|
177
250
|
if (isBounded) {
|
|
@@ -187,12 +260,12 @@ function GridItem(props) {
|
|
|
187
260
|
const newPosition = { top, left };
|
|
188
261
|
dragPositionRef.current = newPosition;
|
|
189
262
|
const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
|
|
190
|
-
const { x: newX, y: newY } =
|
|
263
|
+
const { x: newX, y: newY } = chunk2TEFHZC4_js.applyPositionConstraints(
|
|
191
264
|
constraints,
|
|
192
265
|
effectiveLayoutItem,
|
|
193
266
|
rawPos.x,
|
|
194
267
|
rawPos.y,
|
|
195
|
-
|
|
268
|
+
getConstraintContext()
|
|
196
269
|
);
|
|
197
270
|
onDragProp(i, newX, newY, {
|
|
198
271
|
e,
|
|
@@ -202,7 +275,9 @@ function GridItem(props) {
|
|
|
202
275
|
},
|
|
203
276
|
[
|
|
204
277
|
onDragProp,
|
|
278
|
+
onDragStartProp,
|
|
205
279
|
dragging,
|
|
280
|
+
dragThreshold,
|
|
206
281
|
isBounded,
|
|
207
282
|
h,
|
|
208
283
|
rowHeight,
|
|
@@ -213,23 +288,32 @@ function GridItem(props) {
|
|
|
213
288
|
i,
|
|
214
289
|
constraints,
|
|
215
290
|
effectiveLayoutItem,
|
|
216
|
-
|
|
291
|
+
getConstraintContext
|
|
217
292
|
]
|
|
218
293
|
);
|
|
219
294
|
const onDragStop = React2.useCallback(
|
|
220
295
|
(e, { node }) => {
|
|
221
296
|
if (!onDragStopProp || !dragging) return;
|
|
297
|
+
const wasPending = dragPendingRef.current;
|
|
298
|
+
dragPendingRef.current = false;
|
|
299
|
+
thresholdExceededRef.current = false;
|
|
300
|
+
initialDragClientRef.current = { x: 0, y: 0 };
|
|
301
|
+
if (wasPending) {
|
|
302
|
+
setDragging(false);
|
|
303
|
+
dragPositionRef.current = { left: 0, top: 0 };
|
|
304
|
+
return;
|
|
305
|
+
}
|
|
222
306
|
const { left, top } = dragPositionRef.current;
|
|
223
307
|
const newPosition = { top, left };
|
|
224
308
|
setDragging(false);
|
|
225
309
|
dragPositionRef.current = { left: 0, top: 0 };
|
|
226
310
|
const rawPos = chunkBJFPTW5Q_js.calcXYRaw(positionParams, top, left);
|
|
227
|
-
const { x: newX, y: newY } =
|
|
311
|
+
const { x: newX, y: newY } = chunk2TEFHZC4_js.applyPositionConstraints(
|
|
228
312
|
constraints,
|
|
229
313
|
effectiveLayoutItem,
|
|
230
314
|
rawPos.x,
|
|
231
315
|
rawPos.y,
|
|
232
|
-
|
|
316
|
+
getConstraintContext()
|
|
233
317
|
);
|
|
234
318
|
onDragStopProp(i, newX, newY, {
|
|
235
319
|
e,
|
|
@@ -243,7 +327,7 @@ function GridItem(props) {
|
|
|
243
327
|
positionParams,
|
|
244
328
|
constraints,
|
|
245
329
|
effectiveLayoutItem,
|
|
246
|
-
|
|
330
|
+
getConstraintContext,
|
|
247
331
|
i
|
|
248
332
|
]
|
|
249
333
|
);
|
|
@@ -253,7 +337,7 @@ function GridItem(props) {
|
|
|
253
337
|
if (!handler) return;
|
|
254
338
|
let updatedSize;
|
|
255
339
|
if (node) {
|
|
256
|
-
updatedSize =
|
|
340
|
+
updatedSize = chunk2TEFHZC4_js.resizeItemInDirection(
|
|
257
341
|
resizeHandle2,
|
|
258
342
|
position,
|
|
259
343
|
size,
|
|
@@ -272,13 +356,13 @@ function GridItem(props) {
|
|
|
272
356
|
updatedSize.width,
|
|
273
357
|
updatedSize.height
|
|
274
358
|
);
|
|
275
|
-
const { w: newW, h: newH } =
|
|
359
|
+
const { w: newW, h: newH } = chunk2TEFHZC4_js.applySizeConstraints(
|
|
276
360
|
constraints,
|
|
277
361
|
effectiveLayoutItem,
|
|
278
362
|
rawSize.w,
|
|
279
363
|
rawSize.h,
|
|
280
364
|
resizeHandle2,
|
|
281
|
-
|
|
365
|
+
getConstraintContext()
|
|
282
366
|
);
|
|
283
367
|
handler(i, newW, newH, {
|
|
284
368
|
e: e.nativeEvent,
|
|
@@ -293,12 +377,10 @@ function GridItem(props) {
|
|
|
293
377
|
onResizeStopProp,
|
|
294
378
|
containerWidth,
|
|
295
379
|
positionParams,
|
|
296
|
-
x,
|
|
297
|
-
y,
|
|
298
380
|
i,
|
|
299
381
|
constraints,
|
|
300
382
|
effectiveLayoutItem,
|
|
301
|
-
|
|
383
|
+
getConstraintContext
|
|
302
384
|
]
|
|
303
385
|
);
|
|
304
386
|
const handleResizeStart = React2.useCallback(
|
|
@@ -462,7 +544,7 @@ function childrenEqual(a, b) {
|
|
|
462
544
|
}
|
|
463
545
|
return true;
|
|
464
546
|
}
|
|
465
|
-
function synchronizeLayoutWithChildren(initialLayout, children, cols,
|
|
547
|
+
function synchronizeLayoutWithChildren(initialLayout, children, cols, compactor) {
|
|
466
548
|
const layout = [];
|
|
467
549
|
const childKeys = /* @__PURE__ */ new Set();
|
|
468
550
|
React2__default.default.Children.forEach(children, (child) => {
|
|
@@ -504,7 +586,7 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactTyp
|
|
|
504
586
|
}
|
|
505
587
|
});
|
|
506
588
|
const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
|
|
507
|
-
return
|
|
589
|
+
return compactor.compact(corrected, cols);
|
|
508
590
|
}
|
|
509
591
|
function GridLayout(props) {
|
|
510
592
|
const {
|
|
@@ -516,9 +598,9 @@ function GridLayout(props) {
|
|
|
516
598
|
dragConfig: dragConfigProp,
|
|
517
599
|
resizeConfig: resizeConfigProp,
|
|
518
600
|
dropConfig: dropConfigProp,
|
|
519
|
-
positionStrategy =
|
|
601
|
+
positionStrategy = chunk2TEFHZC4_js.defaultPositionStrategy,
|
|
520
602
|
compactor: compactorProp,
|
|
521
|
-
constraints =
|
|
603
|
+
constraints = chunk2TEFHZC4_js.defaultConstraints,
|
|
522
604
|
// Layout data
|
|
523
605
|
layout: propsLayout = [],
|
|
524
606
|
droppingItem: droppingItemProp,
|
|
@@ -539,19 +621,19 @@ function GridLayout(props) {
|
|
|
539
621
|
onDropDragOver: onDropDragOverProp = noop
|
|
540
622
|
} = props;
|
|
541
623
|
const gridConfig = React2.useMemo(
|
|
542
|
-
() => ({ ...
|
|
624
|
+
() => ({ ...chunk2TEFHZC4_js.defaultGridConfig, ...gridConfigProp }),
|
|
543
625
|
[gridConfigProp]
|
|
544
626
|
);
|
|
545
627
|
const dragConfig = React2.useMemo(
|
|
546
|
-
() => ({ ...
|
|
628
|
+
() => ({ ...chunk2TEFHZC4_js.defaultDragConfig, ...dragConfigProp }),
|
|
547
629
|
[dragConfigProp]
|
|
548
630
|
);
|
|
549
631
|
const resizeConfig = React2.useMemo(
|
|
550
|
-
() => ({ ...
|
|
632
|
+
() => ({ ...chunk2TEFHZC4_js.defaultResizeConfig, ...resizeConfigProp }),
|
|
551
633
|
[resizeConfigProp]
|
|
552
634
|
);
|
|
553
635
|
const dropConfig = React2.useMemo(
|
|
554
|
-
() => ({ ...
|
|
636
|
+
() => ({ ...chunk2TEFHZC4_js.defaultDropConfig, ...dropConfigProp }),
|
|
555
637
|
[dropConfigProp]
|
|
556
638
|
);
|
|
557
639
|
const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
|
|
@@ -559,15 +641,20 @@ function GridLayout(props) {
|
|
|
559
641
|
enabled: isDraggable,
|
|
560
642
|
bounded: isBounded,
|
|
561
643
|
handle: draggableHandle,
|
|
562
|
-
cancel: draggableCancel
|
|
644
|
+
cancel: draggableCancel,
|
|
645
|
+
threshold: dragThreshold
|
|
563
646
|
} = dragConfig;
|
|
564
647
|
const {
|
|
565
648
|
enabled: isResizable,
|
|
566
649
|
handles: resizeHandles,
|
|
567
650
|
handleComponent: resizeHandle
|
|
568
651
|
} = resizeConfig;
|
|
569
|
-
const {
|
|
570
|
-
|
|
652
|
+
const {
|
|
653
|
+
enabled: isDroppable,
|
|
654
|
+
defaultItem: defaultDropItem,
|
|
655
|
+
onDragOver: dropConfigOnDragOver
|
|
656
|
+
} = dropConfig;
|
|
657
|
+
const compactor = compactorProp ?? chunk2TEFHZC4_js.getCompactor("vertical");
|
|
571
658
|
const compactType = compactor.type;
|
|
572
659
|
const allowOverlap = compactor.allowOverlap;
|
|
573
660
|
const preventCollision = compactor.preventCollision ?? false;
|
|
@@ -583,13 +670,7 @@ function GridLayout(props) {
|
|
|
583
670
|
const effectiveContainerPadding = containerPadding ?? margin;
|
|
584
671
|
const [mounted, setMounted] = React2.useState(false);
|
|
585
672
|
const [layout, setLayout] = React2.useState(
|
|
586
|
-
() => synchronizeLayoutWithChildren(
|
|
587
|
-
propsLayout,
|
|
588
|
-
children,
|
|
589
|
-
cols,
|
|
590
|
-
compactType,
|
|
591
|
-
allowOverlap
|
|
592
|
-
)
|
|
673
|
+
() => synchronizeLayoutWithChildren(propsLayout, children, cols, compactor)
|
|
593
674
|
);
|
|
594
675
|
const [activeDrag, setActiveDrag] = React2.useState(null);
|
|
595
676
|
const [resizing, setResizing] = React2.useState(false);
|
|
@@ -625,8 +706,7 @@ function GridLayout(props) {
|
|
|
625
706
|
baseLayout,
|
|
626
707
|
children,
|
|
627
708
|
cols,
|
|
628
|
-
|
|
629
|
-
allowOverlap
|
|
709
|
+
compactor
|
|
630
710
|
);
|
|
631
711
|
setLayout(newLayout);
|
|
632
712
|
}
|
|
@@ -638,7 +718,7 @@ function GridLayout(props) {
|
|
|
638
718
|
children,
|
|
639
719
|
cols,
|
|
640
720
|
compactType,
|
|
641
|
-
|
|
721
|
+
compactor,
|
|
642
722
|
activeDrag,
|
|
643
723
|
droppingDOMNode,
|
|
644
724
|
layout
|
|
@@ -699,12 +779,10 @@ function GridLayout(props) {
|
|
|
699
779
|
allowOverlap
|
|
700
780
|
);
|
|
701
781
|
onDragProp(newLayout, oldDragItem, l, placeholder, data.e, data.node);
|
|
702
|
-
setLayout(
|
|
703
|
-
allowOverlap ? newLayout : chunkWWS3M5Y3_js.compact(newLayout, compactType, cols)
|
|
704
|
-
);
|
|
782
|
+
setLayout(compactor.compact(newLayout, cols));
|
|
705
783
|
setActiveDrag(placeholder);
|
|
706
784
|
},
|
|
707
|
-
[preventCollision, compactType, cols, allowOverlap, onDragProp]
|
|
785
|
+
[preventCollision, compactType, cols, allowOverlap, compactor, onDragProp]
|
|
708
786
|
);
|
|
709
787
|
const onDragStop = React2.useCallback(
|
|
710
788
|
(i, x, y, data) => {
|
|
@@ -724,7 +802,7 @@ function GridLayout(props) {
|
|
|
724
802
|
cols,
|
|
725
803
|
allowOverlap
|
|
726
804
|
);
|
|
727
|
-
const finalLayout =
|
|
805
|
+
const finalLayout = compactor.compact(newLayout, cols);
|
|
728
806
|
onDragStopProp(finalLayout, oldDragItem, l, null, data.e, data.node);
|
|
729
807
|
const oldLayout = oldLayoutRef.current;
|
|
730
808
|
oldDragItemRef.current = null;
|
|
@@ -741,6 +819,7 @@ function GridLayout(props) {
|
|
|
741
819
|
compactType,
|
|
742
820
|
cols,
|
|
743
821
|
allowOverlap,
|
|
822
|
+
compactor,
|
|
744
823
|
onDragStopProp,
|
|
745
824
|
onLayoutChange
|
|
746
825
|
]
|
|
@@ -832,19 +911,17 @@ function GridLayout(props) {
|
|
|
832
911
|
data.e,
|
|
833
912
|
data.node
|
|
834
913
|
);
|
|
835
|
-
setLayout(
|
|
836
|
-
allowOverlap ? finalLayout : chunkWWS3M5Y3_js.compact(finalLayout, compactType, cols)
|
|
837
|
-
);
|
|
914
|
+
setLayout(compactor.compact(finalLayout, cols));
|
|
838
915
|
setActiveDrag(placeholder);
|
|
839
916
|
},
|
|
840
|
-
[preventCollision,
|
|
917
|
+
[preventCollision, compactType, cols, allowOverlap, compactor, onResizeProp]
|
|
841
918
|
);
|
|
842
919
|
const onResizeStop = React2.useCallback(
|
|
843
920
|
(i, _w, _h, data) => {
|
|
844
921
|
const currentLayout = layoutRef.current;
|
|
845
922
|
const oldResizeItem = oldResizeItemRef.current;
|
|
846
923
|
const l = chunkBJFPTW5Q_js.getLayoutItem(currentLayout, i);
|
|
847
|
-
const finalLayout =
|
|
924
|
+
const finalLayout = compactor.compact(currentLayout, cols);
|
|
848
925
|
onResizeStopProp(
|
|
849
926
|
finalLayout,
|
|
850
927
|
oldResizeItem,
|
|
@@ -863,21 +940,19 @@ function GridLayout(props) {
|
|
|
863
940
|
onLayoutChange(finalLayout);
|
|
864
941
|
}
|
|
865
942
|
},
|
|
866
|
-
[
|
|
943
|
+
[cols, compactor, onResizeStopProp, onLayoutChange]
|
|
867
944
|
);
|
|
868
945
|
const removeDroppingPlaceholder = React2.useCallback(() => {
|
|
869
946
|
const currentLayout = layoutRef.current;
|
|
870
|
-
const newLayout =
|
|
947
|
+
const newLayout = compactor.compact(
|
|
871
948
|
currentLayout.filter((l) => l.i !== droppingItem.i),
|
|
872
|
-
|
|
873
|
-
cols,
|
|
874
|
-
allowOverlap
|
|
949
|
+
cols
|
|
875
950
|
);
|
|
876
951
|
setLayout(newLayout);
|
|
877
952
|
setDroppingDOMNode(null);
|
|
878
953
|
setActiveDrag(null);
|
|
879
954
|
setDroppingPosition(void 0);
|
|
880
|
-
}, [droppingItem.i,
|
|
955
|
+
}, [droppingItem.i, cols, compactor]);
|
|
881
956
|
const handleDragOver = React2.useCallback(
|
|
882
957
|
(e) => {
|
|
883
958
|
e.preventDefault();
|
|
@@ -887,7 +962,7 @@ function GridLayout(props) {
|
|
|
887
962
|
)) {
|
|
888
963
|
return false;
|
|
889
964
|
}
|
|
890
|
-
const rawResult = onDropDragOverProp(e);
|
|
965
|
+
const rawResult = dropConfigOnDragOver ? dropConfigOnDragOver(e.nativeEvent) : onDropDragOverProp(e);
|
|
891
966
|
if (rawResult === false) {
|
|
892
967
|
if (droppingDOMNode) {
|
|
893
968
|
removeDroppingPlaceholder();
|
|
@@ -962,6 +1037,7 @@ function GridLayout(props) {
|
|
|
962
1037
|
droppingDOMNode,
|
|
963
1038
|
droppingPosition,
|
|
964
1039
|
droppingItem,
|
|
1040
|
+
dropConfigOnDragOver,
|
|
965
1041
|
onDropDragOverProp,
|
|
966
1042
|
removeDroppingPlaceholder,
|
|
967
1043
|
transformScale,
|
|
@@ -1034,6 +1110,8 @@ function GridLayout(props) {
|
|
|
1034
1110
|
useCSSTransforms: useCSSTransforms && mounted,
|
|
1035
1111
|
usePercentages: !mounted,
|
|
1036
1112
|
transformScale,
|
|
1113
|
+
positionStrategy,
|
|
1114
|
+
dragThreshold,
|
|
1037
1115
|
w: l.w,
|
|
1038
1116
|
h: l.h,
|
|
1039
1117
|
x: l.x,
|
|
@@ -1077,6 +1155,8 @@ function GridLayout(props) {
|
|
|
1077
1155
|
useCSSTransforms,
|
|
1078
1156
|
mounted,
|
|
1079
1157
|
transformScale,
|
|
1158
|
+
positionStrategy,
|
|
1159
|
+
dragThreshold,
|
|
1080
1160
|
droppingPosition,
|
|
1081
1161
|
resizeHandles,
|
|
1082
1162
|
resizeHandle,
|
|
@@ -1196,7 +1276,7 @@ function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactTy
|
|
|
1196
1276
|
}
|
|
1197
1277
|
});
|
|
1198
1278
|
const corrected = chunkBJFPTW5Q_js.correctBounds(layout, { cols });
|
|
1199
|
-
return
|
|
1279
|
+
return chunk2TEFHZC4_js.compact(corrected, compactType, cols, allowOverlap);
|
|
1200
1280
|
}
|
|
1201
1281
|
function ResponsiveGridLayout(props) {
|
|
1202
1282
|
const {
|
|
@@ -1216,17 +1296,17 @@ function ResponsiveGridLayout(props) {
|
|
|
1216
1296
|
onWidthChange = noop2,
|
|
1217
1297
|
...restProps
|
|
1218
1298
|
} = props;
|
|
1219
|
-
const compactor = compactorProp ??
|
|
1299
|
+
const compactor = compactorProp ?? chunk2TEFHZC4_js.getCompactor("vertical");
|
|
1220
1300
|
const compactType = compactor.type;
|
|
1221
1301
|
const allowOverlap = compactor.allowOverlap;
|
|
1222
1302
|
const initialBreakpoint = React2.useMemo(() => {
|
|
1223
|
-
return propBreakpoint ??
|
|
1303
|
+
return propBreakpoint ?? chunk2TEFHZC4_js.getBreakpointFromWidth(breakpoints, width);
|
|
1224
1304
|
}, []);
|
|
1225
1305
|
const initialCols = React2.useMemo(() => {
|
|
1226
|
-
return
|
|
1306
|
+
return chunk2TEFHZC4_js.getColsFromBreakpoint(initialBreakpoint, colsConfig);
|
|
1227
1307
|
}, [initialBreakpoint, colsConfig]);
|
|
1228
1308
|
const initialLayout = React2.useMemo(() => {
|
|
1229
|
-
return
|
|
1309
|
+
return chunk2TEFHZC4_js.findOrGenerateResponsiveLayout(
|
|
1230
1310
|
propsLayouts,
|
|
1231
1311
|
breakpoints,
|
|
1232
1312
|
initialBreakpoint,
|
|
@@ -1251,7 +1331,7 @@ function ResponsiveGridLayout(props) {
|
|
|
1251
1331
|
}, [layouts]);
|
|
1252
1332
|
const derivedLayout = React2.useMemo(() => {
|
|
1253
1333
|
if (!fastEquals.deepEqual(propsLayouts, prevLayoutsRef.current)) {
|
|
1254
|
-
return
|
|
1334
|
+
return chunk2TEFHZC4_js.findOrGenerateResponsiveLayout(
|
|
1255
1335
|
propsLayouts,
|
|
1256
1336
|
breakpoints,
|
|
1257
1337
|
breakpoint,
|
|
@@ -1273,7 +1353,7 @@ function ResponsiveGridLayout(props) {
|
|
|
1273
1353
|
}, [derivedLayout, propsLayouts]);
|
|
1274
1354
|
React2.useEffect(() => {
|
|
1275
1355
|
if (compactType !== prevCompactTypeRef.current) {
|
|
1276
|
-
const newLayout =
|
|
1356
|
+
const newLayout = chunk2TEFHZC4_js.compact(
|
|
1277
1357
|
chunkBJFPTW5Q_js.cloneLayout(effectiveLayout),
|
|
1278
1358
|
compactType,
|
|
1279
1359
|
cols,
|
|
@@ -1306,15 +1386,15 @@ function ResponsiveGridLayout(props) {
|
|
|
1306
1386
|
);
|
|
1307
1387
|
const colsChanged = !fastEquals.deepEqual(colsConfig, prevColsRef.current);
|
|
1308
1388
|
if (widthChanged || breakpointPropChanged || breakpointsChanged || colsChanged) {
|
|
1309
|
-
const newBreakpoint = propBreakpoint ??
|
|
1310
|
-
const newCols =
|
|
1389
|
+
const newBreakpoint = propBreakpoint ?? chunk2TEFHZC4_js.getBreakpointFromWidth(breakpoints, width);
|
|
1390
|
+
const newCols = chunk2TEFHZC4_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
|
|
1311
1391
|
const lastBreakpoint = breakpoint;
|
|
1312
1392
|
if (lastBreakpoint !== newBreakpoint || breakpointsChanged || colsChanged) {
|
|
1313
1393
|
const newLayouts = { ...layoutsRef.current };
|
|
1314
1394
|
if (!newLayouts[lastBreakpoint]) {
|
|
1315
1395
|
newLayouts[lastBreakpoint] = chunkBJFPTW5Q_js.cloneLayout(layout);
|
|
1316
1396
|
}
|
|
1317
|
-
let newLayout =
|
|
1397
|
+
let newLayout = chunk2TEFHZC4_js.findOrGenerateResponsiveLayout(
|
|
1318
1398
|
newLayouts,
|
|
1319
1399
|
breakpoints,
|
|
1320
1400
|
newBreakpoint,
|
|
@@ -1338,11 +1418,11 @@ function ResponsiveGridLayout(props) {
|
|
|
1338
1418
|
onBreakpointChange(newBreakpoint, newCols);
|
|
1339
1419
|
onLayoutChange(newLayout, newLayouts);
|
|
1340
1420
|
}
|
|
1341
|
-
const currentMargin2 =
|
|
1421
|
+
const currentMargin2 = chunk2TEFHZC4_js.getIndentationValue(
|
|
1342
1422
|
propMargin,
|
|
1343
1423
|
newBreakpoint
|
|
1344
1424
|
);
|
|
1345
|
-
const currentPadding = propContainerPadding ?
|
|
1425
|
+
const currentPadding = propContainerPadding ? chunk2TEFHZC4_js.getIndentationValue(
|
|
1346
1426
|
propContainerPadding,
|
|
1347
1427
|
newBreakpoint
|
|
1348
1428
|
) : null;
|
|
@@ -1384,14 +1464,14 @@ function ResponsiveGridLayout(props) {
|
|
|
1384
1464
|
[breakpoint, onLayoutChange]
|
|
1385
1465
|
);
|
|
1386
1466
|
const currentMargin = React2.useMemo(() => {
|
|
1387
|
-
return
|
|
1467
|
+
return chunk2TEFHZC4_js.getIndentationValue(
|
|
1388
1468
|
propMargin,
|
|
1389
1469
|
breakpoint
|
|
1390
1470
|
);
|
|
1391
1471
|
}, [propMargin, breakpoint]);
|
|
1392
1472
|
const currentContainerPadding = React2.useMemo(() => {
|
|
1393
1473
|
if (propContainerPadding === null) return null;
|
|
1394
|
-
return
|
|
1474
|
+
return chunk2TEFHZC4_js.getIndentationValue(
|
|
1395
1475
|
propContainerPadding,
|
|
1396
1476
|
breakpoint
|
|
1397
1477
|
);
|
|
@@ -1423,5 +1503,5 @@ function ResponsiveGridLayout(props) {
|
|
|
1423
1503
|
exports.GridItem = GridItem;
|
|
1424
1504
|
exports.GridLayout = GridLayout;
|
|
1425
1505
|
exports.ResponsiveGridLayout = ResponsiveGridLayout;
|
|
1426
|
-
//# sourceMappingURL=chunk-
|
|
1427
|
-
//# sourceMappingURL=chunk-
|
|
1506
|
+
//# sourceMappingURL=chunk-NQUM7RXX.js.map
|
|
1507
|
+
//# sourceMappingURL=chunk-NQUM7RXX.js.map
|