publ-echo-test 0.0.1
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 +29 -0
- package/css/gle-styles.css +169 -0
- package/css/resizable-styles.css +76 -0
- package/dist/external-lib/classnames/index.d.ts +5 -0
- package/dist/external-lib/classnames/index.js +60 -0
- package/dist/external-lib/lodash.isEqual/index.d.ts +30 -0
- package/dist/external-lib/lodash.isEqual/index.js +1661 -0
- package/dist/lib/Draggable/Draggable.d.ts +17 -0
- package/dist/lib/Draggable/Draggable.js +192 -0
- package/dist/lib/Draggable/DraggableCore.d.ts +5 -0
- package/dist/lib/Draggable/DraggableCore.js +266 -0
- package/dist/lib/Draggable/constants.d.ts +12 -0
- package/dist/lib/Draggable/constants.js +12 -0
- package/dist/lib/Draggable/index.d.ts +2 -0
- package/dist/lib/Draggable/index.js +2 -0
- package/dist/lib/Draggable/types.d.ts +55 -0
- package/dist/lib/Draggable/types.js +1 -0
- package/dist/lib/Draggable/utils/domHelpers.d.ts +22 -0
- package/dist/lib/Draggable/utils/domHelpers.js +222 -0
- package/dist/lib/Draggable/utils/getPrefix.d.ts +5 -0
- package/dist/lib/Draggable/utils/getPrefix.js +41 -0
- package/dist/lib/Draggable/utils/positionHelpers.d.ts +7 -0
- package/dist/lib/Draggable/utils/positionHelpers.js +32 -0
- package/dist/lib/Draggable/utils/types.d.ts +30 -0
- package/dist/lib/Draggable/utils/types.js +1 -0
- package/dist/lib/Draggable/utils/validationHelpers.d.ts +4 -0
- package/dist/lib/Draggable/utils/validationHelpers.js +16 -0
- package/dist/lib/GridItem/GridItem.d.ts +5 -0
- package/dist/lib/GridItem/GridItem.js +350 -0
- package/dist/lib/GridItem/index.d.ts +1 -0
- package/dist/lib/GridItem/index.js +1 -0
- package/dist/lib/GridItem/types.d.ts +107 -0
- package/dist/lib/GridItem/types.js +1 -0
- package/dist/lib/GridItem/utils/calculateUtils.d.ts +30 -0
- package/dist/lib/GridItem/utils/calculateUtils.js +108 -0
- package/dist/lib/GridLayoutEditor/ReactGridLayout.d.ts +6 -0
- package/dist/lib/GridLayoutEditor/ReactGridLayout.js +456 -0
- package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.d.ts +4 -0
- package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js +117 -0
- package/dist/lib/GridLayoutEditor/index.d.ts +3 -0
- package/dist/lib/GridLayoutEditor/index.js +2 -0
- package/dist/lib/GridLayoutEditor/types.d.ts +133 -0
- package/dist/lib/GridLayoutEditor/types.js +1 -0
- package/dist/lib/GridLayoutEditor/utils/renderHelpers.d.ts +165 -0
- package/dist/lib/GridLayoutEditor/utils/renderHelpers.js +566 -0
- package/dist/lib/GridLayoutEditor/utils/responsiveUtils.d.ts +26 -0
- package/dist/lib/GridLayoutEditor/utils/responsiveUtils.js +77 -0
- package/dist/lib/Resizable/Resizable.d.ts +6 -0
- package/dist/lib/Resizable/Resizable.js +215 -0
- package/dist/lib/Resizable/ResizableBox.d.ts +7 -0
- package/dist/lib/Resizable/ResizableBox.js +57 -0
- package/dist/lib/Resizable/index.d.ts +1 -0
- package/dist/lib/Resizable/index.js +1 -0
- package/dist/lib/Resizable/types.d.ts +63 -0
- package/dist/lib/Resizable/types.js +1 -0
- package/dist/lib/Resizable/utils/cloneElement.d.ts +2 -0
- package/dist/lib/Resizable/utils/cloneElement.js +21 -0
- package/dist/lib/components/WidthProvider.d.ts +9 -0
- package/dist/lib/components/WidthProvider.js +65 -0
- package/dist/lib/components/index.d.ts +1 -0
- package/dist/lib/components/index.js +1 -0
- package/dist/lib/components/types.d.ts +13 -0
- package/dist/lib/components/types.js +1 -0
- package/dist/lib/index.d.ts +5 -0
- package/dist/lib/index.js +5 -0
- package/dist/lib/types.d.ts +4 -0
- package/dist/lib/types.js +1 -0
- package/package.json +56 -0
@@ -0,0 +1,456 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
23
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
24
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
25
|
+
if (ar || !(i in from)) {
|
26
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
27
|
+
ar[i] = from[i];
|
28
|
+
}
|
29
|
+
}
|
30
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
31
|
+
};
|
32
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
33
|
+
import * as React from "react";
|
34
|
+
import { useState, useRef, useLayoutEffect } from "react";
|
35
|
+
import classNames from "../../external-lib/classnames";
|
36
|
+
import { bottom, cloneLayoutItem, compact, getAllCollisions, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from "./utils/renderHelpers";
|
37
|
+
import { calcGridColWidth, calcXY, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
|
38
|
+
import GridItem from "../GridItem/GridItem";
|
39
|
+
import isEqual from "../../external-lib/lodash.isEqual";
|
40
|
+
var layoutClassName = "react-grid-layout";
|
41
|
+
var ReactGridLayout = function (_a) {
|
42
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
43
|
+
var _b = props.autoSize, autoSize = _b === void 0 ? true : _b, _c = props.cols, cols = _c === void 0 ? 12 : _c, _d = props.className, className = _d === void 0 ? "" : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.draggableHandle, draggableHandle = _f === void 0 ? "" : _f, _g = props.draggableCancel, draggableCancel = _g === void 0 ? "" : _g, _h = props.containerPadding, containerPadding = _h === void 0 ? undefined : _h, _j = props.rowHeight, rowHeight = _j === void 0 ? 150 : _j, _k = props.maxRows, maxRows = _k === void 0 ? Infinity : _k, _l = props.margin, margin = _l === void 0 ? [10, 10] : _l, _m = props.isBounded, isBounded = _m === void 0 ? false : _m, _o = props.isDraggable, isDraggable = _o === void 0 ? true : _o, _p = props.isResizable, isResizable = _p === void 0 ? true : _p, _q = props.allowOverlap, allowOverlap = _q === void 0 ? false : _q, _r = props.isDroppable, isDroppable = _r === void 0 ? false : _r, _s = props.useCSSTransforms, useCSSTransforms = _s === void 0 ? true : _s, _t = props.transformScale, transformScale = _t === void 0 ? 1 : _t, _u = props.compactType, compactType = _u === void 0 ? "vertical" : _u, _v = props.preventCollision, preventCollision = _v === void 0 ? false : _v, _w = props.droppingItem, droppingItem = _w === void 0 ? {
|
44
|
+
i: "__dropping-elem__",
|
45
|
+
h: 1,
|
46
|
+
w: 1,
|
47
|
+
} : _w, // TODO fix
|
48
|
+
_x = props.resizeHandles, // TODO fix
|
49
|
+
resizeHandles = _x === void 0 ? ["se"] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth;
|
50
|
+
var _0 = useState(), activeDrag = _0[0], setActiveDrag = _0[1];
|
51
|
+
var _1 = useState(), oldDragItem = _1[0], setOldDragItem = _1[1];
|
52
|
+
var _2 = useState(), oldLayout = _2[0], setOldLayout = _2[1];
|
53
|
+
var _3 = useState(), oldResizeItem = _3[0], setOldResizeItem = _3[1];
|
54
|
+
var _4 = useState(), droppingDOMNode = _4[0], setDroppingDOMNode = _4[1];
|
55
|
+
var _5 = useState(), droppingPosition = _5[0], setDroppingPosition = _5[1];
|
56
|
+
var _6 = useState(false), isMounted = _6[0], setIsMounted = _6[1];
|
57
|
+
var _7 = useState(function () {
|
58
|
+
return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
|
59
|
+
}), layout = _7[0], setLayout = _7[1];
|
60
|
+
var dragEnterCounter = useRef(0);
|
61
|
+
useLayoutEffect(function () {
|
62
|
+
setIsMounted(true);
|
63
|
+
onLayoutMaybeChanged(layout, layout);
|
64
|
+
}, []);
|
65
|
+
useLayoutEffect(function () {
|
66
|
+
if (props.layout && !Array.isArray(props.layout)) {
|
67
|
+
console.error("Expecting layout to be an Array but got: ", props.layout);
|
68
|
+
}
|
69
|
+
setLayout(synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap));
|
70
|
+
}, [props.layout]);
|
71
|
+
useLayoutEffect(function () {
|
72
|
+
var newLayout = synchronizeLayoutWithChildren(props.layout || layout, children, props.cols || cols, props.compactType || "vertical", props.allowOverlap);
|
73
|
+
setLayout(newLayout);
|
74
|
+
}, [children]);
|
75
|
+
var getPositionParams = function () {
|
76
|
+
return {
|
77
|
+
cols: cols,
|
78
|
+
margin: margin,
|
79
|
+
maxRows: maxRows,
|
80
|
+
rowHeight: rowHeight,
|
81
|
+
containerWidth: width,
|
82
|
+
containerPadding: containerPadding || margin,
|
83
|
+
};
|
84
|
+
};
|
85
|
+
var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(getPositionParams());
|
86
|
+
/**
|
87
|
+
* Calculates a pixel value for the container.
|
88
|
+
* @return {String} Container height in pixels.
|
89
|
+
*/
|
90
|
+
var containerHeight = function () {
|
91
|
+
if (!autoSize)
|
92
|
+
return;
|
93
|
+
var nbRow = bottom(layout);
|
94
|
+
var biggerNbRow = minNbRow ? Math.max(nbRow, minNbRow) : nbRow;
|
95
|
+
var containerPaddingY = containerPadding
|
96
|
+
? containerPadding[1]
|
97
|
+
: margin[1];
|
98
|
+
return (biggerNbRow *
|
99
|
+
resolveRowHeight(rowHeight, colWidth) +
|
100
|
+
(biggerNbRow - 1) * margin[1] +
|
101
|
+
containerPaddingY * 2 +
|
102
|
+
"px");
|
103
|
+
};
|
104
|
+
var getBackgroundHeight = function () {
|
105
|
+
if (!autoSize)
|
106
|
+
return;
|
107
|
+
var nbRow = bottom(layout);
|
108
|
+
var biggerNbRow = minNbRow ? Math.max(nbRow, minNbRow) : nbRow;
|
109
|
+
var containerPaddingY = containerPadding
|
110
|
+
? containerPadding[1]
|
111
|
+
: margin[1];
|
112
|
+
return (biggerNbRow *
|
113
|
+
resolveRowHeight(rowHeight, colWidth) +
|
114
|
+
(biggerNbRow - 1) * margin[1] +
|
115
|
+
containerPaddingY * 2 -
|
116
|
+
2 * margin[1] +
|
117
|
+
"px");
|
118
|
+
};
|
119
|
+
var getBackgroundWidth = function () {
|
120
|
+
if (!autoSize)
|
121
|
+
return;
|
122
|
+
return width - margin[0] * 2 + "px";
|
123
|
+
};
|
124
|
+
/**
|
125
|
+
* When dragging starts
|
126
|
+
* @param {String} i Id of the child
|
127
|
+
* @param {Number} x X position of the move
|
128
|
+
* @param {Number} y Y position of the move
|
129
|
+
* @param {Event} e The mousedown event
|
130
|
+
* @param {Element} node The current dragging DOM element
|
131
|
+
*/
|
132
|
+
var onDragStartHandler = function (i, x, y, _a) {
|
133
|
+
var e = _a.e, node = _a.node;
|
134
|
+
var l = getLayoutItem(layout, i);
|
135
|
+
if (!l)
|
136
|
+
return;
|
137
|
+
setOldDragItem(cloneLayoutItem(l));
|
138
|
+
setOldLayout(layout);
|
139
|
+
props.onDragStart &&
|
140
|
+
props.onDragStart({
|
141
|
+
layout: layout,
|
142
|
+
prev: l,
|
143
|
+
item: l,
|
144
|
+
placeholder: undefined,
|
145
|
+
e: e,
|
146
|
+
node: node,
|
147
|
+
});
|
148
|
+
};
|
149
|
+
/**
|
150
|
+
* Each drag movement create a new dragelement and move the element to the dragged location
|
151
|
+
* @param {String} i Id of the child
|
152
|
+
* @param {Number} x X position of the move
|
153
|
+
* @param {Number} y Y position of the move
|
154
|
+
* @param {Event} e The mousedown event
|
155
|
+
* @param {Element} node The current dragging DOM element
|
156
|
+
*/
|
157
|
+
var onDragHandler = function (i, x, y, _a) {
|
158
|
+
var e = _a.e, node = _a.node;
|
159
|
+
var l = getLayoutItem(layout, i);
|
160
|
+
if (!l)
|
161
|
+
return;
|
162
|
+
var placeholder = {
|
163
|
+
w: l.w,
|
164
|
+
h: l.h,
|
165
|
+
x: l.x,
|
166
|
+
y: l.y,
|
167
|
+
z: l.z,
|
168
|
+
placeholder: true,
|
169
|
+
i: i,
|
170
|
+
};
|
171
|
+
var isUserAction = true;
|
172
|
+
var newLayout = moveElement({
|
173
|
+
layout: layout,
|
174
|
+
l: l,
|
175
|
+
x: x,
|
176
|
+
y: y,
|
177
|
+
isUserAction: isUserAction,
|
178
|
+
preventCollision: preventCollision,
|
179
|
+
compactType: compactType,
|
180
|
+
cols: cols,
|
181
|
+
allowOverlap: allowOverlap,
|
182
|
+
});
|
183
|
+
props.onDrag &&
|
184
|
+
props.onDrag({
|
185
|
+
layout: newLayout,
|
186
|
+
prev: oldDragItem,
|
187
|
+
item: l,
|
188
|
+
placeholder: placeholder,
|
189
|
+
e: e,
|
190
|
+
node: node,
|
191
|
+
});
|
192
|
+
setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
|
193
|
+
setActiveDrag(placeholder);
|
194
|
+
};
|
195
|
+
/**
|
196
|
+
* When dragging stops, figure out which position the element is closest to and update its x and y.
|
197
|
+
* @param {String} i Index of the child.
|
198
|
+
* @param {Number} x X position of the move
|
199
|
+
* @param {Number} y Y position of the move
|
200
|
+
* @param {Event} e The mousedown event
|
201
|
+
* @param {Element} node The current dragging DOM element
|
202
|
+
*/
|
203
|
+
var onDragStopHandler = function (i, x, y, _a) {
|
204
|
+
var e = _a.e, node = _a.node;
|
205
|
+
if (!activeDrag || !oldDragItem) {
|
206
|
+
return;
|
207
|
+
}
|
208
|
+
;
|
209
|
+
var l = getLayoutItem(layout, i);
|
210
|
+
if (!l)
|
211
|
+
return;
|
212
|
+
// NOTE: z-index 원래대로 복귀
|
213
|
+
l.z = oldDragItem.z;
|
214
|
+
var isUserAction = true;
|
215
|
+
var movedLayout = moveElement({
|
216
|
+
layout: layout,
|
217
|
+
l: l,
|
218
|
+
x: x,
|
219
|
+
y: y,
|
220
|
+
isUserAction: isUserAction,
|
221
|
+
preventCollision: preventCollision,
|
222
|
+
compactType: compactType,
|
223
|
+
cols: cols,
|
224
|
+
allowOverlap: allowOverlap,
|
225
|
+
overrideZ: oldDragItem.z
|
226
|
+
});
|
227
|
+
props.onDragStop &&
|
228
|
+
props.onDragStop({
|
229
|
+
layout: movedLayout,
|
230
|
+
prev: oldDragItem,
|
231
|
+
item: l,
|
232
|
+
placeholder: undefined,
|
233
|
+
e: e,
|
234
|
+
node: node,
|
235
|
+
});
|
236
|
+
var newLayout = allowOverlap
|
237
|
+
? movedLayout
|
238
|
+
: compact(movedLayout, compactType, cols);
|
239
|
+
setActiveDrag(undefined);
|
240
|
+
setLayout(newLayout);
|
241
|
+
setOldDragItem(undefined);
|
242
|
+
setOldLayout(undefined);
|
243
|
+
props.onLayoutChange && props.onLayoutChange(newLayout);
|
244
|
+
};
|
245
|
+
var onLayoutMaybeChanged = function (newLayout, oldLayout) {
|
246
|
+
if (!oldLayout) {
|
247
|
+
oldLayout = layout;
|
248
|
+
}
|
249
|
+
if (!isEqual(oldLayout, newLayout)) {
|
250
|
+
props.onLayoutChange && props.onLayoutChange(newLayout);
|
251
|
+
}
|
252
|
+
};
|
253
|
+
var onResizeStartHandler = function (i, x, y, _a) {
|
254
|
+
var e = _a.e, node = _a.node;
|
255
|
+
var l = getLayoutItem(layout, i);
|
256
|
+
if (!l)
|
257
|
+
return;
|
258
|
+
setOldResizeItem(cloneLayoutItem(l));
|
259
|
+
setOldLayout(layout);
|
260
|
+
props.onResizeStart &&
|
261
|
+
props.onResizeStart({
|
262
|
+
layout: layout,
|
263
|
+
prev: l,
|
264
|
+
item: l,
|
265
|
+
e: e,
|
266
|
+
node: node,
|
267
|
+
});
|
268
|
+
};
|
269
|
+
var onResizeHandler = function (i, w, h, _a, x, y) {
|
270
|
+
var e = _a.e, node = _a.node;
|
271
|
+
var _b = withLayoutItem(layout, i, function (l) {
|
272
|
+
var hasCollisions;
|
273
|
+
if (preventCollision && !allowOverlap) {
|
274
|
+
var collisions = getAllCollisions(layout, __assign(__assign({}, l), { w: x, h: y })).filter(function (layoutItem) { return layoutItem.i !== l.i; });
|
275
|
+
hasCollisions = collisions.length > 0;
|
276
|
+
if (hasCollisions) {
|
277
|
+
var leastX_1 = Infinity, leastY_1 = Infinity;
|
278
|
+
collisions.forEach(function (layoutItem) {
|
279
|
+
if (layoutItem.x > l.x)
|
280
|
+
leastX_1 = Math.min(leastX_1, layoutItem.x);
|
281
|
+
if (layoutItem.y > l.y)
|
282
|
+
leastY_1 = Math.min(leastY_1, layoutItem.y);
|
283
|
+
});
|
284
|
+
if (Number.isFinite(leastX_1))
|
285
|
+
l.w = leastX_1 - l.x;
|
286
|
+
if (Number.isFinite(leastY_1))
|
287
|
+
l.h = leastY_1 - l.y;
|
288
|
+
}
|
289
|
+
}
|
290
|
+
if (!hasCollisions) {
|
291
|
+
// NOTE - 여기서 x, y를 추가적으로 세팅해줘야 nw, w, n, sw 방향에서 placeholder가 반대로 resize되지 않고 해당 element와 똑같이 resize
|
292
|
+
l.w = w;
|
293
|
+
l.h = h;
|
294
|
+
l.x = x;
|
295
|
+
l.y = y;
|
296
|
+
}
|
297
|
+
return l;
|
298
|
+
}), newLayout = _b[0], l = _b[1];
|
299
|
+
if (!l)
|
300
|
+
return;
|
301
|
+
var placeholder = {
|
302
|
+
w: l.w,
|
303
|
+
h: l.h,
|
304
|
+
x: l.x,
|
305
|
+
y: l.y,
|
306
|
+
z: l.z,
|
307
|
+
static: true,
|
308
|
+
i: i,
|
309
|
+
};
|
310
|
+
props.onResize &&
|
311
|
+
props.onResize({
|
312
|
+
layout: newLayout,
|
313
|
+
prev: oldResizeItem,
|
314
|
+
item: l,
|
315
|
+
placeholder: placeholder,
|
316
|
+
e: e,
|
317
|
+
node: node,
|
318
|
+
});
|
319
|
+
setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
|
320
|
+
setActiveDrag(placeholder);
|
321
|
+
};
|
322
|
+
var onResizeStopHandler = function (i, x, y, _a) {
|
323
|
+
var e = _a.e, node = _a.node;
|
324
|
+
var l = getLayoutItem(layout, i);
|
325
|
+
props.onResizeStop &&
|
326
|
+
props.onResizeStop({ layout: layout, prev: oldResizeItem, item: l, e: e, node: node });
|
327
|
+
var newLayout = allowOverlap
|
328
|
+
? layout
|
329
|
+
: compact(layout, compactType, cols);
|
330
|
+
setActiveDrag(undefined);
|
331
|
+
setLayout(newLayout);
|
332
|
+
setOldResizeItem(undefined);
|
333
|
+
setOldLayout(undefined);
|
334
|
+
onLayoutMaybeChanged(newLayout, oldLayout);
|
335
|
+
};
|
336
|
+
/**
|
337
|
+
* Create a placeholder object.
|
338
|
+
* @return {Element} Placeholder div.
|
339
|
+
*/
|
340
|
+
var placeholder = function () {
|
341
|
+
if (!activeDrag)
|
342
|
+
return;
|
343
|
+
// {...activeDrag} is pretty slow, actually
|
344
|
+
var l = getLayoutItem(props.layout, String(activeDrag.i));
|
345
|
+
if (!l) {
|
346
|
+
return null;
|
347
|
+
}
|
348
|
+
// NOTE: toChildren changes key
|
349
|
+
// LINK: https://legacy.reactjs.org/docs/react-api.html
|
350
|
+
var items = React.Children.toArray(children);
|
351
|
+
var item = items.find(function (child) {
|
352
|
+
var originalKey = String(child.key).split(".$");
|
353
|
+
return originalKey[1] === l.i;
|
354
|
+
});
|
355
|
+
if (!item) {
|
356
|
+
return null;
|
357
|
+
}
|
358
|
+
return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: activeDrag.z || 0, i: activeDrag.i, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, autoResize: true, children: item && item }));
|
359
|
+
};
|
360
|
+
/**
|
361
|
+
* Given a grid item, set its style attributes & surround in a <Draggable>.
|
362
|
+
* @param {Element} child React element.
|
363
|
+
* @return {Element} Element wrapped in draggable and properly placed.
|
364
|
+
*/
|
365
|
+
var processGridItem = function (child, isDroppingItem) {
|
366
|
+
if (!child || !child.key)
|
367
|
+
return;
|
368
|
+
var l = getLayoutItem(layout, String(child.key));
|
369
|
+
if (!l) {
|
370
|
+
return;
|
371
|
+
}
|
372
|
+
;
|
373
|
+
var draggable = typeof l.isDraggable === "boolean"
|
374
|
+
? l.isDraggable
|
375
|
+
: !l.static && isDraggable;
|
376
|
+
var resizable = typeof l.isResizable === "boolean"
|
377
|
+
? l.isResizable
|
378
|
+
: !l.static && isResizable;
|
379
|
+
var resizeHandlesOptions = l.resizeHandles || resizeHandles;
|
380
|
+
var bounded = draggable && isBounded && l.isBounded !== false;
|
381
|
+
return (_jsx(GridItem, { containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, isDraggable: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: true, children: child }, l.i));
|
382
|
+
};
|
383
|
+
var onDragOverHandler = function (e) {
|
384
|
+
var _a;
|
385
|
+
e.preventDefault();
|
386
|
+
e.stopPropagation();
|
387
|
+
var onDragOverResult = (_a = props.onDropDragOver) === null || _a === void 0 ? void 0 : _a.call(props, e); // TODO fix
|
388
|
+
if (onDragOverResult === false) {
|
389
|
+
if (droppingDOMNode) {
|
390
|
+
removeDroppingPlaceholder();
|
391
|
+
}
|
392
|
+
return false;
|
393
|
+
}
|
394
|
+
var finalDroppingItem = __assign(__assign({}, droppingItem), onDragOverResult);
|
395
|
+
var _b = e.nativeEvent, layerX = _b.layerX, layerY = _b.layerY; // TODO fix
|
396
|
+
var droppingPosition = {
|
397
|
+
left: layerX / transformScale,
|
398
|
+
top: layerY / transformScale,
|
399
|
+
e: e,
|
400
|
+
};
|
401
|
+
if (!droppingDOMNode) {
|
402
|
+
var calculatedPosition = calcXY(getPositionParams(), layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
|
403
|
+
setDroppingDOMNode(_jsx("div", {}, finalDroppingItem.i));
|
404
|
+
setDroppingPosition(droppingPosition);
|
405
|
+
setLayout(__spreadArray(__spreadArray([], layout, true), [
|
406
|
+
__assign(__assign({}, finalDroppingItem), { x: calculatedPosition.x, y: calculatedPosition.y, static: false, isDraggable: true }),
|
407
|
+
], false));
|
408
|
+
}
|
409
|
+
else if (droppingPosition) {
|
410
|
+
var left = droppingPosition.left, top_1 = droppingPosition.top;
|
411
|
+
var shouldUpdatePosition = left != layerX || top_1 != layerY;
|
412
|
+
if (shouldUpdatePosition) {
|
413
|
+
setDroppingPosition(droppingPosition);
|
414
|
+
}
|
415
|
+
}
|
416
|
+
};
|
417
|
+
var removeDroppingPlaceholder = function () {
|
418
|
+
var newLayout = compact(layout.filter(function (l) { return l.i !== droppingItem.i; }), compactType, cols, allowOverlap);
|
419
|
+
setLayout(newLayout);
|
420
|
+
setDroppingDOMNode(undefined);
|
421
|
+
setActiveDrag(undefined);
|
422
|
+
setDroppingPosition(undefined);
|
423
|
+
};
|
424
|
+
var onDragLeaveHandler = function (e) {
|
425
|
+
e.preventDefault();
|
426
|
+
e.stopPropagation();
|
427
|
+
dragEnterCounter.current = dragEnterCounter.current - 1;
|
428
|
+
if (dragEnterCounter.current === 0) {
|
429
|
+
removeDroppingPlaceholder();
|
430
|
+
}
|
431
|
+
};
|
432
|
+
var onDragEnterHandler = function (e) {
|
433
|
+
e.preventDefault();
|
434
|
+
e.stopPropagation();
|
435
|
+
dragEnterCounter.current += 1;
|
436
|
+
};
|
437
|
+
var onDropHandler = function (e) {
|
438
|
+
e.preventDefault();
|
439
|
+
e.stopPropagation();
|
440
|
+
var item = layout.find(function (l) { return l.i === droppingItem.i; });
|
441
|
+
dragEnterCounter.current = 0;
|
442
|
+
removeDroppingPlaceholder();
|
443
|
+
if (item) {
|
444
|
+
props.onDrop && props.onDrop(layout, item, e);
|
445
|
+
}
|
446
|
+
};
|
447
|
+
var mergedClassName = classNames(layoutClassName, className);
|
448
|
+
var mergedStyle = __assign({ height: containerHeight() }, style);
|
449
|
+
return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx("div", { className: "grid-placeholder", style: {
|
450
|
+
marginTop: margin[1] + "px",
|
451
|
+
marginBottom: margin[1] + "px",
|
452
|
+
marginLeft: margin[0] + "px",
|
453
|
+
marginRight: margin[0] + "px",
|
454
|
+
}, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: getBackgroundWidth(), height: getBackgroundHeight(), children: [_jsx("defs", { children: _jsx("pattern", { id: "grid-pattern", height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: "userSpaceOnUse", children: _jsx("rect", { x: 0.5, y: 0.5, className: "grid-pattern-rect", height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: width, height: "100%", fill: "url(#grid-pattern)" })] }) }))] }));
|
455
|
+
};
|
456
|
+
export default ReactGridLayout;
|
@@ -0,0 +1,4 @@
|
|
1
|
+
import { ResponsiveGridLayoutProps } from "./types";
|
2
|
+
import { PropsWithChildren } from "../types";
|
3
|
+
export declare const ResponsiveGridLayout: ({ children, ...props }: PropsWithChildren<ResponsiveGridLayoutProps>) => React.ReactElement;
|
4
|
+
export default ResponsiveGridLayout;
|
@@ -0,0 +1,117 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
24
|
+
import { useLayoutEffect, useRef, useState } from "react";
|
25
|
+
import { cloneLayout, noop, synchronizeLayoutWithChildren, } from "./utils/renderHelpers";
|
26
|
+
import { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, } from "./utils/responsiveUtils";
|
27
|
+
import isEqual from "../../external-lib/lodash.isEqual";
|
28
|
+
import ReactGridLayout from "./ReactGridLayout";
|
29
|
+
/**
|
30
|
+
* Get a value of margin or containerPadding.
|
31
|
+
*
|
32
|
+
* @param {Array | Object} param Margin | containerPadding, e.g. [10, 10] | {lg: [10, 10], ...}.
|
33
|
+
* @param {String} breakpoint Breakpoint: lg, md, sm, xs and etc.
|
34
|
+
* @return {Array}
|
35
|
+
*/
|
36
|
+
function getIndentationValue(param, breakpoint) {
|
37
|
+
return Array.isArray(param) ? param : param[breakpoint];
|
38
|
+
}
|
39
|
+
export var ResponsiveGridLayout = function (_a) {
|
40
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
41
|
+
var breakpoint = props.breakpoint, compactType = props.compactType, _b = props.breakpoints, breakpoints = _b === void 0 ? { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } : _b, _c = props.cols, cols = _c === void 0 ? { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } : _c, _d = props.containerPadding, containerPadding = _d === void 0 ? {} : _d, _e = props.layouts, layouts = _e === void 0 ? {} : _e, _f = props.width, width = _f === void 0 ? 0 : _f, _g = props.margin, margin = _g === void 0 ? [10, 10] : _g, _h = props.onBreakpointChange, onBreakpointChange = _h === void 0 ? noop : _h, _j = props.onLayoutChange, onLayoutChange = _j === void 0 ? noop : _j, _k = props.onWidthChange, onWidthChange = _k === void 0 ? noop : _k, restProps = __rest(props, ["breakpoint", "compactType", "breakpoints", "cols", "containerPadding", "layouts", "width", "margin", "onBreakpointChange", "onLayoutChange", "onWidthChange"]);
|
42
|
+
var _l = useState({ width: width, breakpoints: breakpoints, cols: cols }), prevProps = _l[0], setPrevProps = _l[1];
|
43
|
+
var generateInitialState = function () {
|
44
|
+
var breakpoint = getBreakpointFromWidth(breakpoints, width);
|
45
|
+
var colNo = getColsFromBreakpoint(breakpoint, cols);
|
46
|
+
var compactType = props.compactType;
|
47
|
+
var initialLayout = findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, breakpoint, colNo, compactType || "vertical", false);
|
48
|
+
return {
|
49
|
+
layout: initialLayout,
|
50
|
+
layouts: layouts,
|
51
|
+
breakpoint: breakpoint,
|
52
|
+
cols: colNo,
|
53
|
+
};
|
54
|
+
};
|
55
|
+
var _m = useState(function () {
|
56
|
+
return generateInitialState();
|
57
|
+
}), state = _m[0], setState = _m[1];
|
58
|
+
var emittedBreakpointChangeOnce = useRef(breakpoint != null);
|
59
|
+
useLayoutEffect(function () {
|
60
|
+
if (!state || !isEqual(state.layouts, layouts)) {
|
61
|
+
setState(generateInitialState());
|
62
|
+
}
|
63
|
+
}, [layouts]);
|
64
|
+
useLayoutEffect(function () {
|
65
|
+
onWidthChangeHandler();
|
66
|
+
}, [width, breakpoint, JSON.stringify(breakpoints), cols]);
|
67
|
+
var onLayoutChangeHandler = function (layout) {
|
68
|
+
var _a;
|
69
|
+
var newLayouts = __assign(__assign({}, layouts), (_a = {}, _a[state.breakpoint] = layout, _a));
|
70
|
+
setState({
|
71
|
+
breakpoint: state.breakpoint,
|
72
|
+
cols: state.cols,
|
73
|
+
layout: layout,
|
74
|
+
layouts: newLayouts,
|
75
|
+
});
|
76
|
+
onLayoutChange({
|
77
|
+
layout: layout,
|
78
|
+
layouts: newLayouts,
|
79
|
+
});
|
80
|
+
};
|
81
|
+
var onWidthChangeHandler = function () {
|
82
|
+
var newBreakpoint = breakpoint || getBreakpointFromWidth(breakpoints, width);
|
83
|
+
var lastBreakpoint = state.breakpoint;
|
84
|
+
var newCols = getColsFromBreakpoint(newBreakpoint, cols);
|
85
|
+
var newLayouts = __assign({}, layouts);
|
86
|
+
if (!emittedBreakpointChangeOnce.current ||
|
87
|
+
lastBreakpoint !== newBreakpoint ||
|
88
|
+
!isEqual(prevProps.breakpoints, breakpoints) ||
|
89
|
+
!isEqual(prevProps.cols, cols)) {
|
90
|
+
emittedBreakpointChangeOnce.current = true;
|
91
|
+
if (!(lastBreakpoint in newLayouts)) {
|
92
|
+
newLayouts[lastBreakpoint] = cloneLayout(state.layout);
|
93
|
+
}
|
94
|
+
var newBreakpointIsBiggerOrEqual = lastBreakpoint === newBreakpoint ||
|
95
|
+
breakpoints[newBreakpoint] > breakpoints[lastBreakpoint];
|
96
|
+
var isNewLayout = layouts[newBreakpoint] == null;
|
97
|
+
var overlap = !!props.allowOverlap && (!isNewLayout || newBreakpointIsBiggerOrEqual); // allow resize overlap only if we are going into a larger screen
|
98
|
+
var layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType || "vertical", overlap);
|
99
|
+
layout = synchronizeLayoutWithChildren(layout, children, newCols, compactType || "vertical", overlap);
|
100
|
+
newLayouts[newBreakpoint] = layout;
|
101
|
+
setState({
|
102
|
+
breakpoint: newBreakpoint,
|
103
|
+
layout: layout,
|
104
|
+
layouts: newLayouts,
|
105
|
+
cols: newCols,
|
106
|
+
});
|
107
|
+
onLayoutChange({ layout: layout, layouts: newLayouts });
|
108
|
+
onBreakpointChange(newBreakpoint, newCols);
|
109
|
+
}
|
110
|
+
setPrevProps({ breakpoints: breakpoints, cols: cols, width: width });
|
111
|
+
var modifiedMargin = getIndentationValue(margin, newBreakpoint);
|
112
|
+
var containerPaddingModified = getIndentationValue(containerPadding, newBreakpoint);
|
113
|
+
onWidthChange(width, modifiedMargin, newCols, containerPaddingModified);
|
114
|
+
};
|
115
|
+
return (_jsx(ReactGridLayout, __assign({}, restProps, { children: children, width: width, margin: getIndentationValue(margin, state.breakpoint), containerPadding: getIndentationValue(containerPadding, state.breakpoint), onLayoutChange: onLayoutChangeHandler, layout: state.layout, cols: state.cols })));
|
116
|
+
};
|
117
|
+
export default ResponsiveGridLayout;
|
@@ -0,0 +1,3 @@
|
|
1
|
+
export { ResponsiveGridLayout as ResponsiveGridEditor } from "./ResponsiveGridLayout";
|
2
|
+
export { default as GridEditor } from "./ReactGridLayout";
|
3
|
+
export type { Breakpoint, Breakpoints, DefaultBreakpoints, OnLayoutChangeCallback, ResponsiveLayout, Layout, LayoutItem, } from "./types";
|