react-grid-layout 2.2.1 → 2.2.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/{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-QGXQSZII.js → chunk-7MZZ6T4J.js} +49 -35
- package/dist/{chunk-BJFPTW5Q.js → chunk-A5WIFECI.js} +0 -2
- package/dist/{chunk-3CEWSUXL.js → chunk-BPZQUJ7Y.js} +101 -84
- package/dist/{chunk-XYPIYYYQ.mjs → chunk-KDANGDDL.mjs} +1 -3
- package/dist/chunk-O3KX3VYW.mjs +1 -0
- package/dist/{chunk-YFVX5RDK.mjs → chunk-PZLKKWSX.mjs} +19 -5
- package/dist/{chunk-AZ6K3JIJ.mjs → chunk-WGL5FSZH.mjs} +34 -17
- 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 +25 -17
- package/dist/legacy.mjs +14 -6
- 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-3CEWSUXL.js.map +0 -1
- package/dist/chunk-AWM66AWF.mjs.map +0 -1
- package/dist/chunk-AZ6K3JIJ.mjs.map +0 -1
- package/dist/chunk-BJFPTW5Q.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-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,5 +1,5 @@
|
|
|
1
1
|
import React__default, { CSSProperties, DragEvent, ReactElement } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { m as GridConfig, j as DragConfig, r as ResizeConfig, l as DropConfig, p as PositionStrategy, b as Compactor, f as LayoutConstraint, L as Layout, d as LayoutItem, E as EventCallback, B as Breakpoint, a as Breakpoints, e as ResponsiveLayouts } from './types-jd8MiKM1.mjs';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* GridLayout component
|
|
@@ -7,7 +7,6 @@ import { l as GridConfig, m as DragConfig, n as ResizeConfig, o as DropConfig, k
|
|
|
7
7
|
* A reactive, fluid grid layout with draggable, resizable components.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element?: HTMLElement) => void;
|
|
11
10
|
interface GridLayoutProps {
|
|
12
11
|
/** Child elements to render in the grid */
|
|
13
12
|
children: React__default.ReactNode;
|
|
@@ -130,4 +129,4 @@ interface ResponsiveGridLayoutProps<B extends Breakpoint = string> extends Omit<
|
|
|
130
129
|
*/
|
|
131
130
|
declare function ResponsiveGridLayout<B extends Breakpoint = string>(props: ResponsiveGridLayoutProps<B>): ReactElement;
|
|
132
131
|
|
|
133
|
-
export {
|
|
132
|
+
export { GridLayout as G, ResponsiveGridLayout as R, type GridLayoutProps as a, type ResponsiveGridLayoutProps as b };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default, { CSSProperties, DragEvent, ReactElement } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { m as GridConfig, j as DragConfig, r as ResizeConfig, l as DropConfig, p as PositionStrategy, b as Compactor, f as LayoutConstraint, L as Layout, d as LayoutItem, E as EventCallback, B as Breakpoint, a as Breakpoints, e as ResponsiveLayouts } from './types-jd8MiKM1.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* GridLayout component
|
|
@@ -7,7 +7,6 @@ import { l as GridConfig, m as DragConfig, n as ResizeConfig, o as DropConfig, k
|
|
|
7
7
|
* A reactive, fluid grid layout with draggable, resizable components.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
type EventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event, element?: HTMLElement) => void;
|
|
11
10
|
interface GridLayoutProps {
|
|
12
11
|
/** Child elements to render in the grid */
|
|
13
12
|
children: React__default.ReactNode;
|
|
@@ -130,4 +129,4 @@ interface ResponsiveGridLayoutProps<B extends Breakpoint = string> extends Omit<
|
|
|
130
129
|
*/
|
|
131
130
|
declare function ResponsiveGridLayout<B extends Breakpoint = string>(props: ResponsiveGridLayoutProps<B>): ReactElement;
|
|
132
131
|
|
|
133
|
-
export {
|
|
132
|
+
export { GridLayout as G, ResponsiveGridLayout as R, type GridLayoutProps as a, type ResponsiveGridLayoutProps as b };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as Position,
|
|
1
|
+
import { P as Position, R as ResizeHandleAxis } from './types-jd8MiKM1.mjs';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Grid calculation utilities.
|
|
@@ -193,4 +193,4 @@ interface GridCellConfig {
|
|
|
193
193
|
*/
|
|
194
194
|
declare function calcGridCellDimensions(config: GridCellConfig): GridCellDimensions;
|
|
195
195
|
|
|
196
|
-
export { type
|
|
196
|
+
export { type GridCellConfig as G, type PositionParams as P, calcWH as a, calcXY as b, calcGridItemPosition as c, type GridCellDimensions as d, calcGridCellDimensions as e, calcGridColWidth as f, calcGridItemWHPx as g, calcWHRaw as h, calcXYRaw as i, clamp as j };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as Position,
|
|
1
|
+
import { P as Position, R as ResizeHandleAxis } from './types-jd8MiKM1.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Grid calculation utilities.
|
|
@@ -193,4 +193,4 @@ interface GridCellConfig {
|
|
|
193
193
|
*/
|
|
194
194
|
declare function calcGridCellDimensions(config: GridCellConfig): GridCellDimensions;
|
|
195
195
|
|
|
196
|
-
export { type
|
|
196
|
+
export { type GridCellConfig as G, type PositionParams as P, calcWH as a, calcXY as b, calcGridItemPosition as c, type GridCellDimensions as d, calcGridCellDimensions as e, calcGridColWidth as f, calcGridItemWHPx as g, calcWHRaw as h, calcXYRaw as i, clamp as j };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkA5WIFECI_js = require('./chunk-A5WIFECI.js');
|
|
4
4
|
|
|
5
5
|
// src/core/constraints.ts
|
|
6
6
|
function clamp(value, min, max) {
|
|
@@ -351,13 +351,13 @@ function resolveCompactionCollision(layout, item, moveToCoord, axis, hasStatics)
|
|
|
351
351
|
const sizeProp = axis === "x" ? "w" : "h";
|
|
352
352
|
item[axis] += 1;
|
|
353
353
|
const itemIndex = layout.findIndex((l) => l.i === item.i);
|
|
354
|
-
const layoutHasStatics = hasStatics ??
|
|
354
|
+
const layoutHasStatics = hasStatics ?? chunkA5WIFECI_js.getStatics(layout).length > 0;
|
|
355
355
|
for (let i = itemIndex + 1; i < layout.length; i++) {
|
|
356
356
|
const otherItem = layout[i];
|
|
357
357
|
if (otherItem === void 0) continue;
|
|
358
358
|
if (otherItem.static) continue;
|
|
359
359
|
if (!layoutHasStatics && otherItem.y > item.y + item.h) break;
|
|
360
|
-
if (
|
|
360
|
+
if (chunkA5WIFECI_js.collides(item, otherItem)) {
|
|
361
361
|
resolveCompactionCollision(
|
|
362
362
|
layout,
|
|
363
363
|
otherItem,
|
|
@@ -373,11 +373,11 @@ function compactItemVertical(compareWith, l, fullLayout, maxY) {
|
|
|
373
373
|
l.x = Math.max(l.x, 0);
|
|
374
374
|
l.y = Math.max(l.y, 0);
|
|
375
375
|
l.y = Math.min(maxY, l.y);
|
|
376
|
-
while (l.y > 0 && !
|
|
376
|
+
while (l.y > 0 && !chunkA5WIFECI_js.getFirstCollision(compareWith, l)) {
|
|
377
377
|
l.y--;
|
|
378
378
|
}
|
|
379
379
|
let collision;
|
|
380
|
-
while ((collision =
|
|
380
|
+
while ((collision = chunkA5WIFECI_js.getFirstCollision(compareWith, l)) !== void 0) {
|
|
381
381
|
resolveCompactionCollision(fullLayout, l, collision.y + collision.h, "y");
|
|
382
382
|
}
|
|
383
383
|
l.y = Math.max(l.y, 0);
|
|
@@ -386,16 +386,16 @@ function compactItemVertical(compareWith, l, fullLayout, maxY) {
|
|
|
386
386
|
function compactItemHorizontal(compareWith, l, cols, fullLayout) {
|
|
387
387
|
l.x = Math.max(l.x, 0);
|
|
388
388
|
l.y = Math.max(l.y, 0);
|
|
389
|
-
while (l.x > 0 && !
|
|
389
|
+
while (l.x > 0 && !chunkA5WIFECI_js.getFirstCollision(compareWith, l)) {
|
|
390
390
|
l.x--;
|
|
391
391
|
}
|
|
392
392
|
let collision;
|
|
393
|
-
while ((collision =
|
|
393
|
+
while ((collision = chunkA5WIFECI_js.getFirstCollision(compareWith, l)) !== void 0) {
|
|
394
394
|
resolveCompactionCollision(fullLayout, l, collision.x + collision.w, "x");
|
|
395
395
|
if (l.x + l.w > cols) {
|
|
396
396
|
l.x = cols - l.w;
|
|
397
397
|
l.y++;
|
|
398
|
-
while (l.x > 0 && !
|
|
398
|
+
while (l.x > 0 && !chunkA5WIFECI_js.getFirstCollision(compareWith, l)) {
|
|
399
399
|
l.x--;
|
|
400
400
|
}
|
|
401
401
|
}
|
|
@@ -407,14 +407,14 @@ var verticalCompactor = {
|
|
|
407
407
|
type: "vertical",
|
|
408
408
|
allowOverlap: false,
|
|
409
409
|
compact(layout, _cols) {
|
|
410
|
-
const compareWith =
|
|
411
|
-
let maxY =
|
|
412
|
-
const sorted =
|
|
410
|
+
const compareWith = chunkA5WIFECI_js.getStatics(layout);
|
|
411
|
+
let maxY = chunkA5WIFECI_js.bottom(compareWith);
|
|
412
|
+
const sorted = chunkA5WIFECI_js.sortLayoutItemsByRowCol(layout);
|
|
413
413
|
const out = new Array(layout.length);
|
|
414
414
|
for (let i = 0; i < sorted.length; i++) {
|
|
415
415
|
const sortedItem = sorted[i];
|
|
416
416
|
if (sortedItem === void 0) continue;
|
|
417
|
-
let l =
|
|
417
|
+
let l = chunkA5WIFECI_js.cloneLayoutItem(sortedItem);
|
|
418
418
|
if (!l.static) {
|
|
419
419
|
l = compactItemVertical(compareWith, l, sorted, maxY);
|
|
420
420
|
maxY = Math.max(maxY, l.y + l.h);
|
|
@@ -431,13 +431,13 @@ var horizontalCompactor = {
|
|
|
431
431
|
type: "horizontal",
|
|
432
432
|
allowOverlap: false,
|
|
433
433
|
compact(layout, cols) {
|
|
434
|
-
const compareWith =
|
|
435
|
-
const sorted =
|
|
434
|
+
const compareWith = chunkA5WIFECI_js.getStatics(layout);
|
|
435
|
+
const sorted = chunkA5WIFECI_js.sortLayoutItemsByColRow(layout);
|
|
436
436
|
const out = new Array(layout.length);
|
|
437
437
|
for (let i = 0; i < sorted.length; i++) {
|
|
438
438
|
const sortedItem = sorted[i];
|
|
439
439
|
if (sortedItem === void 0) continue;
|
|
440
|
-
let l =
|
|
440
|
+
let l = chunkA5WIFECI_js.cloneLayoutItem(sortedItem);
|
|
441
441
|
if (!l.static) {
|
|
442
442
|
l = compactItemHorizontal(compareWith, l, cols, sorted);
|
|
443
443
|
compareWith.push(l);
|
|
@@ -453,21 +453,21 @@ var noCompactor = {
|
|
|
453
453
|
type: null,
|
|
454
454
|
allowOverlap: false,
|
|
455
455
|
compact(layout, _cols) {
|
|
456
|
-
return
|
|
456
|
+
return chunkA5WIFECI_js.cloneLayout(layout);
|
|
457
457
|
}
|
|
458
458
|
};
|
|
459
459
|
var verticalOverlapCompactor = {
|
|
460
460
|
...verticalCompactor,
|
|
461
461
|
allowOverlap: true,
|
|
462
462
|
compact(layout, _cols) {
|
|
463
|
-
return
|
|
463
|
+
return chunkA5WIFECI_js.cloneLayout(layout);
|
|
464
464
|
}
|
|
465
465
|
};
|
|
466
466
|
var horizontalOverlapCompactor = {
|
|
467
467
|
...horizontalCompactor,
|
|
468
468
|
allowOverlap: true,
|
|
469
469
|
compact(layout, _cols) {
|
|
470
|
-
return
|
|
470
|
+
return chunkA5WIFECI_js.cloneLayout(layout);
|
|
471
471
|
}
|
|
472
472
|
};
|
|
473
473
|
var noOverlapCompactor = {
|
|
@@ -525,7 +525,7 @@ function getColsFromBreakpoint(breakpoint, cols) {
|
|
|
525
525
|
function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBreakpoint, cols, compactTypeOrCompactor) {
|
|
526
526
|
const existingLayout = layouts[breakpoint];
|
|
527
527
|
if (existingLayout) {
|
|
528
|
-
return
|
|
528
|
+
return chunkA5WIFECI_js.cloneLayout(existingLayout);
|
|
529
529
|
}
|
|
530
530
|
let layout = layouts[lastBreakpoint];
|
|
531
531
|
const breakpointsSorted = sortBreakpoints(breakpoints);
|
|
@@ -541,8 +541,8 @@ function findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, lastBr
|
|
|
541
541
|
break;
|
|
542
542
|
}
|
|
543
543
|
}
|
|
544
|
-
const clonedLayout =
|
|
545
|
-
const corrected =
|
|
544
|
+
const clonedLayout = chunkA5WIFECI_js.cloneLayout(layout || []);
|
|
545
|
+
const corrected = chunkA5WIFECI_js.correctBounds(clonedLayout, { cols });
|
|
546
546
|
const compactor = typeof compactTypeOrCompactor === "object" && compactTypeOrCompactor !== null ? compactTypeOrCompactor : getCompactor(compactTypeOrCompactor);
|
|
547
547
|
return compactor.compact(corrected, cols);
|
|
548
548
|
}
|
|
@@ -604,5 +604,3 @@ exports.sortBreakpoints = sortBreakpoints;
|
|
|
604
604
|
exports.transformStrategy = transformStrategy;
|
|
605
605
|
exports.verticalCompactor = verticalCompactor;
|
|
606
606
|
exports.verticalOverlapCompactor = verticalOverlapCompactor;
|
|
607
|
-
//# sourceMappingURL=chunk-2DDROKB2.js.map
|
|
608
|
-
//# sourceMappingURL=chunk-2DDROKB2.js.map
|
|
@@ -418,5 +418,3 @@ function validateLayout(layout, contextName = "Layout") {
|
|
|
418
418
|
}
|
|
419
419
|
|
|
420
420
|
export { bottom, calcGridCellDimensions, calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcWHRaw, calcXY, calcXYRaw, clamp, cloneLayout, cloneLayoutItem, collides, correctBounds, getAllCollisions, getFirstCollision, getLayoutItem, getStatics, modifyLayout, moveElement, moveElementAwayFromCollision, sortLayoutItems, sortLayoutItemsByColRow, sortLayoutItemsByRowCol, validateLayout, withLayoutItem };
|
|
421
|
-
//# sourceMappingURL=chunk-AWM66AWF.mjs.map
|
|
422
|
-
//# sourceMappingURL=chunk-AWM66AWF.mjs.map
|
|
@@ -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 react = require('react');
|
|
6
6
|
var fastEquals = require('fast-equals');
|
|
7
7
|
|
|
@@ -26,14 +26,30 @@ function useContainerWidth(options = {}) {
|
|
|
26
26
|
if (!node) return;
|
|
27
27
|
measureWidth();
|
|
28
28
|
if (typeof ResizeObserver !== "undefined") {
|
|
29
|
+
let rafId = null;
|
|
29
30
|
observerRef.current = new ResizeObserver((entries) => {
|
|
30
31
|
const entry = entries[0];
|
|
31
32
|
if (entry) {
|
|
32
33
|
const newWidth = entry.contentRect.width;
|
|
33
|
-
|
|
34
|
+
if (rafId !== null) {
|
|
35
|
+
cancelAnimationFrame(rafId);
|
|
36
|
+
}
|
|
37
|
+
rafId = requestAnimationFrame(() => {
|
|
38
|
+
setWidth(newWidth);
|
|
39
|
+
rafId = null;
|
|
40
|
+
});
|
|
34
41
|
}
|
|
35
42
|
});
|
|
36
43
|
observerRef.current.observe(node);
|
|
44
|
+
return () => {
|
|
45
|
+
if (rafId !== null) {
|
|
46
|
+
cancelAnimationFrame(rafId);
|
|
47
|
+
}
|
|
48
|
+
if (observerRef.current) {
|
|
49
|
+
observerRef.current.disconnect();
|
|
50
|
+
observerRef.current = null;
|
|
51
|
+
}
|
|
52
|
+
};
|
|
37
53
|
}
|
|
38
54
|
return () => {
|
|
39
55
|
if (observerRef.current) {
|
|
@@ -55,11 +71,11 @@ function useGridLayout(options) {
|
|
|
55
71
|
cols,
|
|
56
72
|
preventCollision = false,
|
|
57
73
|
onLayoutChange,
|
|
58
|
-
compactor =
|
|
74
|
+
compactor = chunk55DQUWLA_js.verticalCompactor
|
|
59
75
|
} = options;
|
|
60
76
|
const isDraggingRef = react.useRef(false);
|
|
61
77
|
const [layout, setLayoutState] = react.useState(() => {
|
|
62
|
-
const corrected =
|
|
78
|
+
const corrected = chunkA5WIFECI_js.correctBounds(chunkA5WIFECI_js.cloneLayout(propsLayout), { cols });
|
|
63
79
|
return compactor.compact(corrected, cols);
|
|
64
80
|
});
|
|
65
81
|
const [dragState, setDragState] = react.useState({
|
|
@@ -79,7 +95,7 @@ function useGridLayout(options) {
|
|
|
79
95
|
const prevLayoutRef = react.useRef(layout);
|
|
80
96
|
const setLayout = react.useCallback(
|
|
81
97
|
(newLayout) => {
|
|
82
|
-
const corrected =
|
|
98
|
+
const corrected = chunkA5WIFECI_js.correctBounds(chunkA5WIFECI_js.cloneLayout(newLayout), { cols });
|
|
83
99
|
const compacted = compactor.compact(corrected, cols);
|
|
84
100
|
setLayoutState(compacted);
|
|
85
101
|
},
|
|
@@ -99,11 +115,11 @@ function useGridLayout(options) {
|
|
|
99
115
|
}, [layout, onLayoutChange]);
|
|
100
116
|
const onDragStart = react.useCallback(
|
|
101
117
|
(itemId, x, y) => {
|
|
102
|
-
const item =
|
|
118
|
+
const item = chunkA5WIFECI_js.getLayoutItem(layout, itemId);
|
|
103
119
|
if (!item) return null;
|
|
104
120
|
isDraggingRef.current = true;
|
|
105
121
|
const placeholder = {
|
|
106
|
-
...
|
|
122
|
+
...chunkA5WIFECI_js.cloneLayoutItem(item),
|
|
107
123
|
x,
|
|
108
124
|
y,
|
|
109
125
|
static: false,
|
|
@@ -111,8 +127,8 @@ function useGridLayout(options) {
|
|
|
111
127
|
};
|
|
112
128
|
setDragState({
|
|
113
129
|
activeDrag: placeholder,
|
|
114
|
-
oldDragItem:
|
|
115
|
-
oldLayout:
|
|
130
|
+
oldDragItem: chunkA5WIFECI_js.cloneLayoutItem(item),
|
|
131
|
+
oldLayout: chunkA5WIFECI_js.cloneLayout(layout)
|
|
116
132
|
});
|
|
117
133
|
return placeholder;
|
|
118
134
|
},
|
|
@@ -120,13 +136,13 @@ function useGridLayout(options) {
|
|
|
120
136
|
);
|
|
121
137
|
const onDrag = react.useCallback(
|
|
122
138
|
(itemId, x, y) => {
|
|
123
|
-
const item =
|
|
139
|
+
const item = chunkA5WIFECI_js.getLayoutItem(layout, itemId);
|
|
124
140
|
if (!item) return;
|
|
125
141
|
setDragState((prev) => ({
|
|
126
142
|
...prev,
|
|
127
143
|
activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null
|
|
128
144
|
}));
|
|
129
|
-
const newLayout =
|
|
145
|
+
const newLayout = chunkA5WIFECI_js.moveElement(
|
|
130
146
|
layout,
|
|
131
147
|
item,
|
|
132
148
|
x,
|
|
@@ -145,9 +161,9 @@ function useGridLayout(options) {
|
|
|
145
161
|
);
|
|
146
162
|
const onDragStop = react.useCallback(
|
|
147
163
|
(itemId, x, y) => {
|
|
148
|
-
const item =
|
|
164
|
+
const item = chunkA5WIFECI_js.getLayoutItem(layout, itemId);
|
|
149
165
|
if (!item) return;
|
|
150
|
-
const newLayout =
|
|
166
|
+
const newLayout = chunkA5WIFECI_js.moveElement(
|
|
151
167
|
layout,
|
|
152
168
|
item,
|
|
153
169
|
x,
|
|
@@ -171,12 +187,12 @@ function useGridLayout(options) {
|
|
|
171
187
|
);
|
|
172
188
|
const onResizeStart = react.useCallback(
|
|
173
189
|
(itemId) => {
|
|
174
|
-
const item =
|
|
190
|
+
const item = chunkA5WIFECI_js.getLayoutItem(layout, itemId);
|
|
175
191
|
if (!item) return null;
|
|
176
192
|
setResizeState({
|
|
177
193
|
resizing: true,
|
|
178
|
-
oldResizeItem:
|
|
179
|
-
oldLayout:
|
|
194
|
+
oldResizeItem: chunkA5WIFECI_js.cloneLayoutItem(item),
|
|
195
|
+
oldLayout: chunkA5WIFECI_js.cloneLayout(layout)
|
|
180
196
|
});
|
|
181
197
|
return item;
|
|
182
198
|
},
|
|
@@ -197,7 +213,7 @@ function useGridLayout(options) {
|
|
|
197
213
|
}
|
|
198
214
|
return item;
|
|
199
215
|
});
|
|
200
|
-
const corrected =
|
|
216
|
+
const corrected = chunkA5WIFECI_js.correctBounds(newLayout, { cols });
|
|
201
217
|
const compacted = compactor.compact(corrected, cols);
|
|
202
218
|
setLayoutState(compacted);
|
|
203
219
|
},
|
|
@@ -216,10 +232,10 @@ function useGridLayout(options) {
|
|
|
216
232
|
);
|
|
217
233
|
const onDropDragOver = react.useCallback(
|
|
218
234
|
(droppingItem, position) => {
|
|
219
|
-
const existingItem =
|
|
235
|
+
const existingItem = chunkA5WIFECI_js.getLayoutItem(layout, droppingItem.i);
|
|
220
236
|
if (!existingItem) {
|
|
221
237
|
const newLayout = [...layout, droppingItem];
|
|
222
|
-
const corrected =
|
|
238
|
+
const corrected = chunkA5WIFECI_js.correctBounds(newLayout, { cols });
|
|
223
239
|
const compacted = compactor.compact(corrected, cols);
|
|
224
240
|
setLayoutState(compacted);
|
|
225
241
|
}
|
|
@@ -251,7 +267,7 @@ function useGridLayout(options) {
|
|
|
251
267
|
}
|
|
252
268
|
return item;
|
|
253
269
|
});
|
|
254
|
-
const corrected =
|
|
270
|
+
const corrected = chunkA5WIFECI_js.correctBounds(newLayout, { cols });
|
|
255
271
|
const compacted = compactor.compact(corrected, cols);
|
|
256
272
|
setLayoutState(compacted);
|
|
257
273
|
setDropState({
|
|
@@ -261,7 +277,7 @@ function useGridLayout(options) {
|
|
|
261
277
|
},
|
|
262
278
|
[layout, cols, compactor]
|
|
263
279
|
);
|
|
264
|
-
const containerHeight = react.useMemo(() =>
|
|
280
|
+
const containerHeight = react.useMemo(() => chunkA5WIFECI_js.bottom(layout), [layout]);
|
|
265
281
|
const isInteracting = dragState.activeDrag !== null || resizeState.resizing || dropState.droppingPosition !== null;
|
|
266
282
|
return {
|
|
267
283
|
layout,
|
|
@@ -303,23 +319,23 @@ function useResponsiveLayout(options) {
|
|
|
303
319
|
breakpoints = DEFAULT_BREAKPOINTS,
|
|
304
320
|
cols: colsConfig = DEFAULT_COLS,
|
|
305
321
|
layouts: propsLayouts = {},
|
|
306
|
-
compactor =
|
|
322
|
+
compactor = chunk55DQUWLA_js.verticalCompactor,
|
|
307
323
|
onBreakpointChange,
|
|
308
324
|
onLayoutChange,
|
|
309
325
|
onWidthChange
|
|
310
326
|
} = options;
|
|
311
327
|
const sortedBreakpoints = react.useMemo(
|
|
312
|
-
() =>
|
|
328
|
+
() => chunk55DQUWLA_js.sortBreakpoints(breakpoints),
|
|
313
329
|
[breakpoints]
|
|
314
330
|
);
|
|
315
331
|
const initialBreakpoint = react.useMemo(
|
|
316
|
-
() =>
|
|
332
|
+
() => chunk55DQUWLA_js.getBreakpointFromWidth(breakpoints, width),
|
|
317
333
|
// Only calculate on mount, not on width changes
|
|
318
334
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
319
335
|
[]
|
|
320
336
|
);
|
|
321
337
|
const initialCols = react.useMemo(
|
|
322
|
-
() =>
|
|
338
|
+
() => chunk55DQUWLA_js.getColsFromBreakpoint(initialBreakpoint, colsConfig),
|
|
323
339
|
[initialBreakpoint, colsConfig]
|
|
324
340
|
);
|
|
325
341
|
const [breakpoint, setBreakpoint] = react.useState(initialBreakpoint);
|
|
@@ -329,7 +345,7 @@ function useResponsiveLayout(options) {
|
|
|
329
345
|
for (const bp of sortedBreakpoints) {
|
|
330
346
|
const layout2 = propsLayouts[bp];
|
|
331
347
|
if (layout2) {
|
|
332
|
-
cloned[bp] =
|
|
348
|
+
cloned[bp] = chunkA5WIFECI_js.cloneLayout(layout2);
|
|
333
349
|
}
|
|
334
350
|
}
|
|
335
351
|
return cloned;
|
|
@@ -339,7 +355,7 @@ function useResponsiveLayout(options) {
|
|
|
339
355
|
const prevPropsLayoutsRef = react.useRef(propsLayouts);
|
|
340
356
|
const prevLayoutsRef = react.useRef(layouts);
|
|
341
357
|
const layout = react.useMemo(() => {
|
|
342
|
-
return
|
|
358
|
+
return chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
|
|
343
359
|
layouts,
|
|
344
360
|
breakpoints,
|
|
345
361
|
breakpoint,
|
|
@@ -351,7 +367,7 @@ function useResponsiveLayout(options) {
|
|
|
351
367
|
const setLayoutForBreakpoint = react.useCallback((bp, newLayout) => {
|
|
352
368
|
setLayoutsState((prev) => ({
|
|
353
369
|
...prev,
|
|
354
|
-
[bp]:
|
|
370
|
+
[bp]: chunkA5WIFECI_js.cloneLayout(newLayout)
|
|
355
371
|
}));
|
|
356
372
|
}, []);
|
|
357
373
|
const setLayouts = react.useCallback((newLayouts) => {
|
|
@@ -359,7 +375,7 @@ function useResponsiveLayout(options) {
|
|
|
359
375
|
for (const bp of Object.keys(newLayouts)) {
|
|
360
376
|
const layoutForBp = newLayouts[bp];
|
|
361
377
|
if (layoutForBp) {
|
|
362
|
-
cloned[bp] =
|
|
378
|
+
cloned[bp] = chunkA5WIFECI_js.cloneLayout(layoutForBp);
|
|
363
379
|
}
|
|
364
380
|
}
|
|
365
381
|
setLayoutsState(cloned);
|
|
@@ -367,11 +383,11 @@ function useResponsiveLayout(options) {
|
|
|
367
383
|
react.useEffect(() => {
|
|
368
384
|
if (prevWidthRef.current === width) return;
|
|
369
385
|
prevWidthRef.current = width;
|
|
370
|
-
const newBreakpoint =
|
|
371
|
-
const newCols =
|
|
386
|
+
const newBreakpoint = chunk55DQUWLA_js.getBreakpointFromWidth(breakpoints, width);
|
|
387
|
+
const newCols = chunk55DQUWLA_js.getColsFromBreakpoint(newBreakpoint, colsConfig);
|
|
372
388
|
onWidthChange?.(width, [10, 10], newCols, null);
|
|
373
389
|
if (newBreakpoint !== breakpoint) {
|
|
374
|
-
const newLayout =
|
|
390
|
+
const newLayout = chunk55DQUWLA_js.findOrGenerateResponsiveLayout(
|
|
375
391
|
layouts,
|
|
376
392
|
breakpoints,
|
|
377
393
|
newBreakpoint,
|
|
@@ -427,5 +443,3 @@ exports.DEFAULT_COLS = DEFAULT_COLS;
|
|
|
427
443
|
exports.useContainerWidth = useContainerWidth;
|
|
428
444
|
exports.useGridLayout = useGridLayout;
|
|
429
445
|
exports.useResponsiveLayout = useResponsiveLayout;
|
|
430
|
-
//# sourceMappingURL=chunk-QGXQSZII.js.map
|
|
431
|
-
//# sourceMappingURL=chunk-QGXQSZII.js.map
|
|
@@ -445,5 +445,3 @@ exports.sortLayoutItemsByColRow = sortLayoutItemsByColRow;
|
|
|
445
445
|
exports.sortLayoutItemsByRowCol = sortLayoutItemsByRowCol;
|
|
446
446
|
exports.validateLayout = validateLayout;
|
|
447
447
|
exports.withLayoutItem = withLayoutItem;
|
|
448
|
-
//# sourceMappingURL=chunk-BJFPTW5Q.js.map
|
|
449
|
-
//# sourceMappingURL=chunk-BJFPTW5Q.js.map
|