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.
Files changed (68) hide show
  1. package/README.md +29 -0
  2. package/css/gle-styles.css +169 -0
  3. package/css/resizable-styles.css +76 -0
  4. package/dist/external-lib/classnames/index.d.ts +5 -0
  5. package/dist/external-lib/classnames/index.js +60 -0
  6. package/dist/external-lib/lodash.isEqual/index.d.ts +30 -0
  7. package/dist/external-lib/lodash.isEqual/index.js +1661 -0
  8. package/dist/lib/Draggable/Draggable.d.ts +17 -0
  9. package/dist/lib/Draggable/Draggable.js +192 -0
  10. package/dist/lib/Draggable/DraggableCore.d.ts +5 -0
  11. package/dist/lib/Draggable/DraggableCore.js +266 -0
  12. package/dist/lib/Draggable/constants.d.ts +12 -0
  13. package/dist/lib/Draggable/constants.js +12 -0
  14. package/dist/lib/Draggable/index.d.ts +2 -0
  15. package/dist/lib/Draggable/index.js +2 -0
  16. package/dist/lib/Draggable/types.d.ts +55 -0
  17. package/dist/lib/Draggable/types.js +1 -0
  18. package/dist/lib/Draggable/utils/domHelpers.d.ts +22 -0
  19. package/dist/lib/Draggable/utils/domHelpers.js +222 -0
  20. package/dist/lib/Draggable/utils/getPrefix.d.ts +5 -0
  21. package/dist/lib/Draggable/utils/getPrefix.js +41 -0
  22. package/dist/lib/Draggable/utils/positionHelpers.d.ts +7 -0
  23. package/dist/lib/Draggable/utils/positionHelpers.js +32 -0
  24. package/dist/lib/Draggable/utils/types.d.ts +30 -0
  25. package/dist/lib/Draggable/utils/types.js +1 -0
  26. package/dist/lib/Draggable/utils/validationHelpers.d.ts +4 -0
  27. package/dist/lib/Draggable/utils/validationHelpers.js +16 -0
  28. package/dist/lib/GridItem/GridItem.d.ts +5 -0
  29. package/dist/lib/GridItem/GridItem.js +350 -0
  30. package/dist/lib/GridItem/index.d.ts +1 -0
  31. package/dist/lib/GridItem/index.js +1 -0
  32. package/dist/lib/GridItem/types.d.ts +107 -0
  33. package/dist/lib/GridItem/types.js +1 -0
  34. package/dist/lib/GridItem/utils/calculateUtils.d.ts +30 -0
  35. package/dist/lib/GridItem/utils/calculateUtils.js +108 -0
  36. package/dist/lib/GridLayoutEditor/ReactGridLayout.d.ts +6 -0
  37. package/dist/lib/GridLayoutEditor/ReactGridLayout.js +456 -0
  38. package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.d.ts +4 -0
  39. package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js +117 -0
  40. package/dist/lib/GridLayoutEditor/index.d.ts +3 -0
  41. package/dist/lib/GridLayoutEditor/index.js +2 -0
  42. package/dist/lib/GridLayoutEditor/types.d.ts +133 -0
  43. package/dist/lib/GridLayoutEditor/types.js +1 -0
  44. package/dist/lib/GridLayoutEditor/utils/renderHelpers.d.ts +165 -0
  45. package/dist/lib/GridLayoutEditor/utils/renderHelpers.js +566 -0
  46. package/dist/lib/GridLayoutEditor/utils/responsiveUtils.d.ts +26 -0
  47. package/dist/lib/GridLayoutEditor/utils/responsiveUtils.js +77 -0
  48. package/dist/lib/Resizable/Resizable.d.ts +6 -0
  49. package/dist/lib/Resizable/Resizable.js +215 -0
  50. package/dist/lib/Resizable/ResizableBox.d.ts +7 -0
  51. package/dist/lib/Resizable/ResizableBox.js +57 -0
  52. package/dist/lib/Resizable/index.d.ts +1 -0
  53. package/dist/lib/Resizable/index.js +1 -0
  54. package/dist/lib/Resizable/types.d.ts +63 -0
  55. package/dist/lib/Resizable/types.js +1 -0
  56. package/dist/lib/Resizable/utils/cloneElement.d.ts +2 -0
  57. package/dist/lib/Resizable/utils/cloneElement.js +21 -0
  58. package/dist/lib/components/WidthProvider.d.ts +9 -0
  59. package/dist/lib/components/WidthProvider.js +65 -0
  60. package/dist/lib/components/index.d.ts +1 -0
  61. package/dist/lib/components/index.js +1 -0
  62. package/dist/lib/components/types.d.ts +13 -0
  63. package/dist/lib/components/types.js +1 -0
  64. package/dist/lib/index.d.ts +5 -0
  65. package/dist/lib/index.js +5 -0
  66. package/dist/lib/types.d.ts +4 -0
  67. package/dist/lib/types.js +1 -0
  68. 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";
@@ -0,0 +1,2 @@
1
+ export { ResponsiveGridLayout as ResponsiveGridEditor } from "./ResponsiveGridLayout";
2
+ export { default as GridEditor } from "./ReactGridLayout";