publ-echo-test 0.0.141 → 0.0.143
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/lib/GridItem/GridItem.d.ts +3 -3
- package/dist/lib/GridItem/GridItem.js +34 -26
- package/dist/lib/GridItem/GroupItem.d.ts +4 -3
- package/dist/lib/GridItem/GroupItem.js +37 -25
- package/dist/lib/GridItem/types.d.ts +5 -4
- package/dist/lib/GridLayoutEditor/ReactGridLayout.d.ts +4 -4
- package/dist/lib/GridLayoutEditor/ReactGridLayout.js +75 -63
- package/package.json +1 -1
@@ -1,5 +1,5 @@
|
|
1
|
-
import React from
|
2
|
-
import { GridItemProps } from
|
3
|
-
import { PropsWithChildren } from
|
1
|
+
import React from 'react';
|
2
|
+
import { GridItemProps } from './types';
|
3
|
+
import { PropsWithChildren } from '../types';
|
4
4
|
declare const GridItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
5
5
|
export default GridItem;
|
@@ -21,16 +21,16 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
21
21
|
return t;
|
22
22
|
};
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
24
|
-
import React, { useEffect, useRef, useState } from
|
25
|
-
import { DraggableCore } from
|
26
|
-
import classNames from
|
27
|
-
import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from
|
28
|
-
import { perc, setTopLeft, setTransform, } from
|
29
|
-
import { Resizable } from
|
24
|
+
import React, { useEffect, useRef, useState } from 'react';
|
25
|
+
import { DraggableCore } from '../Draggable';
|
26
|
+
import classNames from '../../external-lib/classnames';
|
27
|
+
import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from './utils/calculateUtils';
|
28
|
+
import { perc, setTopLeft, setTransform, } from '../GridLayoutEditor/utils/renderHelpers';
|
29
|
+
import { Resizable } from '../Resizable';
|
30
30
|
var GridItem = function (_a) {
|
31
31
|
var _b;
|
32
32
|
var children = _a.children, props = __rest(_a, ["children"]);
|
33
|
-
var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ?
|
33
|
+
var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? '' : _d, _e = props.handle, handle = _e === void 0 ? '' : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize;
|
34
34
|
var _l = useState(), resizing = _l[0], setResizing = _l[1];
|
35
35
|
var _m = useState(), dragging = _m[0], setDragging = _m[1];
|
36
36
|
var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
|
@@ -59,7 +59,9 @@ var GridItem = function (_a) {
|
|
59
59
|
var isCharacterChanged = mutation.type === 'characterData';
|
60
60
|
var keepWidth = true;
|
61
61
|
var hasPaddingChanged = false;
|
62
|
-
var height = isCharacterChanged
|
62
|
+
var height = isCharacterChanged
|
63
|
+
? mutation.target.parentNode.clientHeight
|
64
|
+
: mutation.target.clientHeight;
|
63
65
|
var width = targetNode.clientWidth;
|
64
66
|
if (!isCharacterChanged && mutation.target instanceof Element) {
|
65
67
|
var styles = getComputedStyle(mutation.target);
|
@@ -72,7 +74,10 @@ var GridItem = function (_a) {
|
|
72
74
|
var paddingR = parseFloat(styles.paddingRight);
|
73
75
|
var paddingT = parseFloat(styles.paddingTop);
|
74
76
|
var paddingB = parseFloat(styles.paddingBottom);
|
75
|
-
if (prevPaddingL !== paddingL ||
|
77
|
+
if (prevPaddingL !== paddingL ||
|
78
|
+
prevPaddingR !== paddingR ||
|
79
|
+
prevPaddingT !== paddingT ||
|
80
|
+
prevPaddingB !== paddingB) {
|
76
81
|
hasPaddingChanged = true;
|
77
82
|
keepWidth = false;
|
78
83
|
}
|
@@ -93,7 +98,8 @@ var GridItem = function (_a) {
|
|
93
98
|
if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
|
94
99
|
return;
|
95
100
|
}
|
96
|
-
props.onFitToContent &&
|
101
|
+
props.onFitToContent &&
|
102
|
+
props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
|
97
103
|
}
|
98
104
|
};
|
99
105
|
// MutationObserver 인스턴스 생성
|
@@ -158,7 +164,7 @@ var GridItem = function (_a) {
|
|
158
164
|
style = setTopLeft(pos);
|
159
165
|
if (usePercentages) {
|
160
166
|
if (containerWidth == null) {
|
161
|
-
throw new Error(
|
167
|
+
throw new Error('Container width is missing!');
|
162
168
|
}
|
163
169
|
style.left = perc(pos.left / containerWidth);
|
164
170
|
style.width = perc(pos.width / containerWidth);
|
@@ -172,7 +178,7 @@ var GridItem = function (_a) {
|
|
172
178
|
* @return {Element} Child wrapped in Draggable.
|
173
179
|
*/
|
174
180
|
var mixinDraggable = function (child, isDraggable) {
|
175
|
-
return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel:
|
181
|
+
return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: '.react-resizable-handle' + (cancel ? ',' + cancel : ''), scale: transformScale, nodeRef: elementRef, children: child }));
|
176
182
|
};
|
177
183
|
/**
|
178
184
|
* Mix a Resizable instance into a child.
|
@@ -199,7 +205,7 @@ var GridItem = function (_a) {
|
|
199
205
|
];
|
200
206
|
return (_jsx(Resizable, { draggableOpts: {
|
201
207
|
disabled: !isResizable,
|
202
|
-
}, className: isResizable ? undefined :
|
208
|
+
}, className: isResizable ? undefined : 'react-resizable-hide', width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, autoResize: autoResize, colWidth: colWidth, margin: props.margin, children: child }));
|
203
209
|
};
|
204
210
|
/**
|
205
211
|
* onDragStart event handler
|
@@ -234,7 +240,7 @@ var GridItem = function (_a) {
|
|
234
240
|
var onDrag = function (e, _a) {
|
235
241
|
var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
|
236
242
|
if (!dragging) {
|
237
|
-
throw new Error(
|
243
|
+
throw new Error('onDrag called before onDragStart.');
|
238
244
|
}
|
239
245
|
setIsDragging(true);
|
240
246
|
var top = dragging.top + deltaY;
|
@@ -267,7 +273,7 @@ var GridItem = function (_a) {
|
|
267
273
|
var onDragStop = function (e, _a) {
|
268
274
|
var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
|
269
275
|
if (!dragging) {
|
270
|
-
throw new Error(
|
276
|
+
throw new Error('onDragEnd called before onDragStart.');
|
271
277
|
}
|
272
278
|
var w = props.w, h = props.h, i = props.i;
|
273
279
|
var left = dragging.left, top = dragging.top;
|
@@ -283,7 +289,7 @@ var GridItem = function (_a) {
|
|
283
289
|
var getResizableXYPosition = function (handle, width, height, prevW, prevH) {
|
284
290
|
var newX = x;
|
285
291
|
var newY = y;
|
286
|
-
if (handle ===
|
292
|
+
if (handle === 'nw') {
|
287
293
|
// NOTE - nw left(X)와 top(Y) 둘다 변경
|
288
294
|
if (width > prevW) {
|
289
295
|
newX = x - (width - prevW);
|
@@ -298,7 +304,7 @@ var GridItem = function (_a) {
|
|
298
304
|
newY = y + (prevH - height);
|
299
305
|
}
|
300
306
|
}
|
301
|
-
if (handle ===
|
307
|
+
if (handle === 'n' || handle === 'ne') {
|
302
308
|
// NOTE - n, ne left(X) 고정 & top(Y) 변경
|
303
309
|
if (height > prevH) {
|
304
310
|
newY = y - (height - prevH);
|
@@ -307,7 +313,7 @@ var GridItem = function (_a) {
|
|
307
313
|
newY = y + (prevH - height);
|
308
314
|
}
|
309
315
|
}
|
310
|
-
if (handle ===
|
316
|
+
if (handle === 'w' || handle === 'sw') {
|
311
317
|
// NOTE - s, sw left(X) 변경 top(Y) 고정
|
312
318
|
if (width > prevW) {
|
313
319
|
newX = x - (width - prevW);
|
@@ -324,7 +330,7 @@ var GridItem = function (_a) {
|
|
324
330
|
* @param {Object} callbackData an object with node and size information
|
325
331
|
*/
|
326
332
|
var onResizeStart = function (e, callbackData) {
|
327
|
-
onResizeHandler(e, callbackData,
|
333
|
+
onResizeHandler(e, callbackData, 'onResizeStart');
|
328
334
|
};
|
329
335
|
/**
|
330
336
|
* onResize event handler
|
@@ -333,7 +339,7 @@ var GridItem = function (_a) {
|
|
333
339
|
*/
|
334
340
|
var onResize = function (e, callbackData) {
|
335
341
|
setIsResizing(true);
|
336
|
-
onResizeHandler(e, callbackData,
|
342
|
+
onResizeHandler(e, callbackData, 'onResize');
|
337
343
|
};
|
338
344
|
/**
|
339
345
|
* onResizeStop event handler
|
@@ -342,7 +348,7 @@ var GridItem = function (_a) {
|
|
342
348
|
*/
|
343
349
|
var onResizeStop = function (e, callbackData) {
|
344
350
|
setIsResizing(false);
|
345
|
-
onResizeHandler(e, callbackData,
|
351
|
+
onResizeHandler(e, callbackData, 'onResizeStop');
|
346
352
|
};
|
347
353
|
/**
|
348
354
|
* Wrapper around drag events to provide more useful data.
|
@@ -376,7 +382,7 @@ var GridItem = function (_a) {
|
|
376
382
|
// maxW = Math.min(maxW, cols - x);
|
377
383
|
w = clamp(w, minW, maxW);
|
378
384
|
h = clamp(h, tempMinH, maxH);
|
379
|
-
setResizing(handlerName ===
|
385
|
+
setResizing(handlerName === 'onResizeStop' ? undefined : size);
|
380
386
|
var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
|
381
387
|
handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
|
382
388
|
};
|
@@ -389,14 +395,16 @@ var GridItem = function (_a) {
|
|
389
395
|
key: i,
|
390
396
|
ref: elementRef,
|
391
397
|
'data-grid-id': i,
|
392
|
-
|
398
|
+
'data-z-index': z,
|
399
|
+
'data-z-order': zOrder,
|
400
|
+
className: classNames('react-grid-item', child.props.className, className, {
|
393
401
|
static: props.static,
|
394
402
|
isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
|
395
403
|
resizing: Boolean(resizing),
|
396
|
-
|
397
|
-
|
404
|
+
'react-draggable': isDraggable,
|
405
|
+
'editable-grid-item': isResizable && isDraggable,
|
398
406
|
isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
|
399
|
-
|
407
|
+
'react-draggable-dragging': Boolean(dragging),
|
400
408
|
// dropping: Boolean(droppingPosition),
|
401
409
|
cssTransforms: useCSSTransforms,
|
402
410
|
}),
|
@@ -1,7 +1,8 @@
|
|
1
|
-
import React from
|
2
|
-
import { GridItemProps } from
|
3
|
-
import { PropsWithChildren } from
|
1
|
+
import React from 'react';
|
2
|
+
import { GridItemProps } from './types';
|
3
|
+
import { PropsWithChildren } from '../types';
|
4
4
|
declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps & {
|
5
5
|
onContextGroup: (e: React.MouseEvent) => void;
|
6
|
+
zOrder: number;
|
6
7
|
}>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
7
8
|
export default GroupItem;
|
@@ -21,15 +21,15 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
21
21
|
return t;
|
22
22
|
};
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
24
|
-
import React, { useEffect, useRef, useState } from
|
25
|
-
import { DraggableCore } from
|
26
|
-
import classNames from
|
27
|
-
import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from
|
28
|
-
import { perc, setTopLeft, setTransform, } from
|
24
|
+
import React, { useEffect, useRef, useState } from 'react';
|
25
|
+
import { DraggableCore } from '../Draggable';
|
26
|
+
import classNames from '../../external-lib/classnames';
|
27
|
+
import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from './utils/calculateUtils';
|
28
|
+
import { perc, setTopLeft, setTransform, } from '../GridLayoutEditor/utils/renderHelpers';
|
29
29
|
var GroupItem = function (_a) {
|
30
30
|
var _b;
|
31
31
|
var children = _a.children, props = __rest(_a, ["children"]);
|
32
|
-
var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ?
|
32
|
+
var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? '' : _d, _e = props.handle, handle = _e === void 0 ? '' : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize, onContextGroup = props.onContextGroup;
|
33
33
|
var _l = useState(), resizing = _l[0], setResizing = _l[1];
|
34
34
|
var _m = useState(), dragging = _m[0], setDragging = _m[1];
|
35
35
|
var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
|
@@ -57,7 +57,9 @@ var GroupItem = function (_a) {
|
|
57
57
|
var isCharacterChanged = mutation.type === 'characterData';
|
58
58
|
var keepWidth = true;
|
59
59
|
var hasPaddingChanged = false;
|
60
|
-
var height = isCharacterChanged
|
60
|
+
var height = isCharacterChanged
|
61
|
+
? mutation.target.parentNode.clientHeight
|
62
|
+
: mutation.target.clientHeight;
|
61
63
|
var width = targetNode.clientWidth;
|
62
64
|
if (!isCharacterChanged && mutation.target instanceof Element) {
|
63
65
|
var styles = getComputedStyle(mutation.target);
|
@@ -70,7 +72,10 @@ var GroupItem = function (_a) {
|
|
70
72
|
var paddingR = parseFloat(styles.paddingRight);
|
71
73
|
var paddingT = parseFloat(styles.paddingTop);
|
72
74
|
var paddingB = parseFloat(styles.paddingBottom);
|
73
|
-
if (prevPaddingL !== paddingL ||
|
75
|
+
if (prevPaddingL !== paddingL ||
|
76
|
+
prevPaddingR !== paddingR ||
|
77
|
+
prevPaddingT !== paddingT ||
|
78
|
+
prevPaddingB !== paddingB) {
|
74
79
|
hasPaddingChanged = true;
|
75
80
|
keepWidth = false;
|
76
81
|
}
|
@@ -91,7 +96,8 @@ var GroupItem = function (_a) {
|
|
91
96
|
if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
|
92
97
|
return;
|
93
98
|
}
|
94
|
-
props.onFitToContent &&
|
99
|
+
props.onFitToContent &&
|
100
|
+
props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
|
95
101
|
}
|
96
102
|
};
|
97
103
|
// MutationObserver 인스턴스 생성
|
@@ -156,7 +162,7 @@ var GroupItem = function (_a) {
|
|
156
162
|
style = setTopLeft(pos);
|
157
163
|
if (usePercentages) {
|
158
164
|
if (containerWidth == null) {
|
159
|
-
throw new Error(
|
165
|
+
throw new Error('Container width is missing!');
|
160
166
|
}
|
161
167
|
style.left = perc(pos.left / containerWidth);
|
162
168
|
style.width = perc(pos.width / containerWidth);
|
@@ -170,7 +176,7 @@ var GroupItem = function (_a) {
|
|
170
176
|
* @return {Element} Child wrapped in Draggable.
|
171
177
|
*/
|
172
178
|
var mixinDraggable = function (child, isDraggable) {
|
173
|
-
return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel:
|
179
|
+
return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: '.react-resizable-handle' + (cancel ? ',' + cancel : ''), scale: transformScale, nodeRef: elementRef, children: child }));
|
174
180
|
};
|
175
181
|
// /**
|
176
182
|
// * Mix a Resizable instance into a child.
|
@@ -257,7 +263,7 @@ var GroupItem = function (_a) {
|
|
257
263
|
var onDrag = function (e, _a) {
|
258
264
|
var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
|
259
265
|
if (!dragging) {
|
260
|
-
throw new Error(
|
266
|
+
throw new Error('onDrag called before onDragStart.');
|
261
267
|
}
|
262
268
|
setIsDragging(true);
|
263
269
|
var top = dragging.top + deltaY;
|
@@ -291,7 +297,7 @@ var GroupItem = function (_a) {
|
|
291
297
|
var onDragStop = function (e, _a) {
|
292
298
|
var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
|
293
299
|
if (!dragging) {
|
294
|
-
throw new Error(
|
300
|
+
throw new Error('onDragEnd called before onDragStart.');
|
295
301
|
}
|
296
302
|
var w = props.w, h = props.h, i = props.i;
|
297
303
|
var left = dragging.left, top = dragging.top;
|
@@ -307,7 +313,7 @@ var GroupItem = function (_a) {
|
|
307
313
|
var getResizableXYPosition = function (handle, width, height, prevW, prevH) {
|
308
314
|
var newX = x;
|
309
315
|
var newY = y;
|
310
|
-
if (handle ===
|
316
|
+
if (handle === 'nw') {
|
311
317
|
// NOTE - nw left(X)와 top(Y) 둘다 변경
|
312
318
|
if (width > prevW) {
|
313
319
|
newX = x - (width - prevW);
|
@@ -322,7 +328,7 @@ var GroupItem = function (_a) {
|
|
322
328
|
newY = y + (prevH - height);
|
323
329
|
}
|
324
330
|
}
|
325
|
-
if (handle ===
|
331
|
+
if (handle === 'n' || handle === 'ne') {
|
326
332
|
// NOTE - n, ne left(X) 고정 & top(Y) 변경
|
327
333
|
if (height > prevH) {
|
328
334
|
newY = y - (height - prevH);
|
@@ -331,7 +337,7 @@ var GroupItem = function (_a) {
|
|
331
337
|
newY = y + (prevH - height);
|
332
338
|
}
|
333
339
|
}
|
334
|
-
if (handle ===
|
340
|
+
if (handle === 'w' || handle === 'sw') {
|
335
341
|
// NOTE - s, sw left(X) 변경 top(Y) 고정
|
336
342
|
if (width > prevW) {
|
337
343
|
newX = x - (width - prevW);
|
@@ -348,7 +354,7 @@ var GroupItem = function (_a) {
|
|
348
354
|
* @param {Object} callbackData an object with node and size information
|
349
355
|
*/
|
350
356
|
var onResizeStart = function (e, callbackData) {
|
351
|
-
onResizeHandler(e, callbackData,
|
357
|
+
onResizeHandler(e, callbackData, 'onResizeStart');
|
352
358
|
};
|
353
359
|
/**
|
354
360
|
* onResize event handler
|
@@ -357,7 +363,7 @@ var GroupItem = function (_a) {
|
|
357
363
|
*/
|
358
364
|
var onResize = function (e, callbackData) {
|
359
365
|
setIsResizing(true);
|
360
|
-
onResizeHandler(e, callbackData,
|
366
|
+
onResizeHandler(e, callbackData, 'onResize');
|
361
367
|
};
|
362
368
|
/**
|
363
369
|
* onResizeStop event handler
|
@@ -366,7 +372,7 @@ var GroupItem = function (_a) {
|
|
366
372
|
*/
|
367
373
|
var onResizeStop = function (e, callbackData) {
|
368
374
|
setIsResizing(false);
|
369
|
-
onResizeHandler(e, callbackData,
|
375
|
+
onResizeHandler(e, callbackData, 'onResizeStop');
|
370
376
|
};
|
371
377
|
/**
|
372
378
|
* Wrapper around drag events to provide more useful data.
|
@@ -400,7 +406,7 @@ var GroupItem = function (_a) {
|
|
400
406
|
// maxW = Math.min(maxW, cols - x);
|
401
407
|
w = clamp(w, minW, maxW);
|
402
408
|
h = clamp(h, tempMinH, maxH);
|
403
|
-
setResizing(handlerName ===
|
409
|
+
setResizing(handlerName === 'onResizeStop' ? undefined : size);
|
404
410
|
var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
|
405
411
|
handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
|
406
412
|
};
|
@@ -410,13 +416,19 @@ var GroupItem = function (_a) {
|
|
410
416
|
key: i,
|
411
417
|
ref: elementRef,
|
412
418
|
'data-group-block-id': i,
|
413
|
-
|
419
|
+
'data-z-index': z,
|
420
|
+
'data-z-order': zOrder,
|
421
|
+
className: classNames('react-group-block', child.props.className, className, {
|
414
422
|
static: props.static,
|
415
|
-
isResizing: Boolean(resizing) &&
|
423
|
+
isResizing: Boolean(resizing) &&
|
424
|
+
Boolean(isResizing) &&
|
425
|
+
Boolean(isHiddenVisibility),
|
416
426
|
resizing: Boolean(resizing),
|
417
|
-
|
418
|
-
isDragging: Boolean(isDragging) &&
|
419
|
-
|
427
|
+
'react-draggable': isDraggable,
|
428
|
+
isDragging: Boolean(isDragging) &&
|
429
|
+
Boolean(dragging) &&
|
430
|
+
Boolean(isHiddenVisibility),
|
431
|
+
'react-draggable-dragging': Boolean(dragging),
|
420
432
|
// dropping: Boolean(droppingPosition),
|
421
433
|
cssTransforms: useCSSTransforms,
|
422
434
|
}),
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import { DragEvent, SyntheticEvent } from
|
2
|
-
import { RowHeight } from
|
3
|
-
import { ResizeHandleAxis, ResizeHandleType } from
|
1
|
+
import { DragEvent, SyntheticEvent } from 'react';
|
2
|
+
import { RowHeight } from '../GridLayoutEditor/types';
|
3
|
+
import { ResizeHandleAxis, ResizeHandleType } from '../Resizable/types';
|
4
4
|
export type PartialPosition = {
|
5
5
|
top: number;
|
6
6
|
left: number;
|
@@ -81,6 +81,7 @@ export type GridItemProps = {
|
|
81
81
|
isHiddenVisibility?: boolean;
|
82
82
|
customColWidth?: number;
|
83
83
|
autoResize: boolean;
|
84
|
+
zOrder?: number;
|
84
85
|
};
|
85
86
|
export type GridItemDefaultProps = {
|
86
87
|
className: string;
|
@@ -106,5 +107,5 @@ export type ReactDraggableCallbackData = {
|
|
106
107
|
lastX: number;
|
107
108
|
lastY: number;
|
108
109
|
};
|
109
|
-
export type ResizeHandlerNameType =
|
110
|
+
export type ResizeHandlerNameType = 'onResizeStart' | 'onResize' | 'onResizeStop';
|
110
111
|
export {};
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import * as React from
|
2
|
-
import type { ReactElement } from
|
3
|
-
import { PropsWithChildren } from
|
4
|
-
import { ReactGridLayoutProps } from
|
1
|
+
import * as React from 'react';
|
2
|
+
import type { ReactElement } from 'react';
|
3
|
+
import { PropsWithChildren } from '../types';
|
4
|
+
import { ReactGridLayoutProps } from './types';
|
5
5
|
declare const ReactGridLayout: ({ children, ...props }: PropsWithChildren<ReactGridLayoutProps>) => React.ReactElement;
|
6
6
|
export default ReactGridLayout;
|
@@ -30,26 +30,26 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
30
30
|
return to.concat(ar || Array.prototype.slice.call(from));
|
31
31
|
};
|
32
32
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
33
|
-
import * as React from
|
34
|
-
import { useState, useRef, useLayoutEffect } from
|
35
|
-
import classNames from
|
36
|
-
import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from
|
37
|
-
import { calcGridColWidth, calcXY, resolveRowHeight, } from
|
38
|
-
import GridItem from
|
39
|
-
import isEqual from
|
40
|
-
import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, formatCbIdToBlockId, getBlockSpecificType, zIndexMap } from
|
41
|
-
import GroupItem from
|
42
|
-
import OutsideClickHandler from
|
43
|
-
var layoutClassName =
|
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, getBoundingArea, 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
|
+
import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, formatCbIdToBlockId, getBlockSpecificType, zIndexMap, } from './group';
|
41
|
+
import GroupItem from '../GridItem/GroupItem';
|
42
|
+
import OutsideClickHandler from '../GridItem/OutsideClickHandler';
|
43
|
+
var layoutClassName = 'react-grid-layout';
|
44
44
|
var ReactGridLayout = function (_a) {
|
45
45
|
var children = _a.children, props = __rest(_a, ["children"]);
|
46
|
-
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 ?
|
47
|
-
i:
|
46
|
+
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 ? {
|
47
|
+
i: '__dropping-elem__',
|
48
48
|
h: 1,
|
49
49
|
w: 1,
|
50
50
|
} : _w, // TODO fix
|
51
51
|
_x = props.resizeHandles, // TODO fix
|
52
|
-
resizeHandles = _x === void 0 ? [
|
52
|
+
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, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.editingGroupBlock, editingGroupBlock = _0 === void 0 ? 'ROOT' : _0, _1 = props.selectedGroupBlock, selectedGroupBlock = _1 === void 0 ? 'ROOT' : _1, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup;
|
53
53
|
var device = cols === 24 ? 'DESKTOP' : 'MOBILE';
|
54
54
|
var _2 = useState(), activeDrag = _2[0], setActiveDrag = _2[1];
|
55
55
|
var _3 = useState(), oldDragItem = _3[0], setOldDragItem = _3[1];
|
@@ -59,8 +59,14 @@ var ReactGridLayout = function (_a) {
|
|
59
59
|
var _7 = useState(), droppingPosition = _7[0], setDroppingPosition = _7[1];
|
60
60
|
var _8 = useState(false), isMounted = _8[0], setIsMounted = _8[1];
|
61
61
|
var editorMode = props.isDraggable && props.isResizable ? 'EDIT' : 'VIEW';
|
62
|
-
var editableBlockIds = blockStructure
|
63
|
-
|
62
|
+
var editableBlockIds = blockStructure
|
63
|
+
? findDirectChildrenCbIds(blockStructure, editingGroupBlock)
|
64
|
+
: [];
|
65
|
+
var editingGroupAllChildren = blockStructure && editingGroupBlock
|
66
|
+
? findAllChildrenCbIds(blockStructure, editingGroupBlock).map(function (i) {
|
67
|
+
return i.toString();
|
68
|
+
})
|
69
|
+
: [];
|
64
70
|
var _9 = useState([]), oldGroupChildren = _9[0], setOldGroupChildren = _9[1];
|
65
71
|
var _10 = useState(function () {
|
66
72
|
return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
|
@@ -72,12 +78,12 @@ var ReactGridLayout = function (_a) {
|
|
72
78
|
}, []);
|
73
79
|
useLayoutEffect(function () {
|
74
80
|
if (props.layout && !Array.isArray(props.layout)) {
|
75
|
-
console.error(
|
81
|
+
console.error('Expecting layout to be an Array but got: ', props.layout);
|
76
82
|
}
|
77
83
|
setLayout(synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap));
|
78
84
|
}, [props.layout]);
|
79
85
|
useLayoutEffect(function () {
|
80
|
-
var newLayout = synchronizeLayoutWithChildren(props.layout || layout, children, props.cols || cols, props.compactType ||
|
86
|
+
var newLayout = synchronizeLayoutWithChildren(props.layout || layout, children, props.cols || cols, props.compactType || 'vertical', props.allowOverlap);
|
81
87
|
setLayout(newLayout);
|
82
88
|
}, [children]);
|
83
89
|
var getPositionParams = function () {
|
@@ -103,11 +109,10 @@ var ReactGridLayout = function (_a) {
|
|
103
109
|
var containerPaddingY = containerPadding
|
104
110
|
? containerPadding[1]
|
105
111
|
: margin[1];
|
106
|
-
return (biggerNbRow *
|
107
|
-
resolveRowHeight(rowHeight, colWidth) +
|
112
|
+
return (biggerNbRow * resolveRowHeight(rowHeight, colWidth) +
|
108
113
|
(biggerNbRow - 1) * margin[1] +
|
109
114
|
containerPaddingY * 2 +
|
110
|
-
|
115
|
+
'px');
|
111
116
|
};
|
112
117
|
var getBackgroundHeight = function () {
|
113
118
|
if (!autoSize)
|
@@ -117,17 +122,16 @@ var ReactGridLayout = function (_a) {
|
|
117
122
|
var containerPaddingY = containerPadding
|
118
123
|
? containerPadding[1]
|
119
124
|
: margin[1];
|
120
|
-
return (biggerNbRow *
|
121
|
-
resolveRowHeight(rowHeight, colWidth) +
|
125
|
+
return (biggerNbRow * resolveRowHeight(rowHeight, colWidth) +
|
122
126
|
(biggerNbRow - 1) * margin[1] +
|
123
127
|
containerPaddingY * 2 -
|
124
128
|
2 * margin[1] +
|
125
|
-
|
129
|
+
'px');
|
126
130
|
};
|
127
131
|
var getBackgroundWidth = function () {
|
128
132
|
if (!autoSize)
|
129
133
|
return;
|
130
|
-
return width - margin[0] * 2 +
|
134
|
+
return width - margin[0] * 2 + 'px';
|
131
135
|
};
|
132
136
|
/**
|
133
137
|
* When dragging starts
|
@@ -149,7 +153,9 @@ var ReactGridLayout = function (_a) {
|
|
149
153
|
if (!blockStructure) {
|
150
154
|
return;
|
151
155
|
}
|
152
|
-
var childrenIds = findAllChildrenCbIds(blockStructure, i).map(function (i) {
|
156
|
+
var childrenIds = findAllChildrenCbIds(blockStructure, i).map(function (i) {
|
157
|
+
return i.toString();
|
158
|
+
});
|
153
159
|
var children_1 = childrenIds.map(function (id) {
|
154
160
|
var item = getLayoutItem(layout, id);
|
155
161
|
return cloneLayoutItem(item);
|
@@ -221,17 +227,19 @@ var ReactGridLayout = function (_a) {
|
|
221
227
|
i: i,
|
222
228
|
};
|
223
229
|
var isUserAction = true;
|
224
|
-
var newLayout = isGroup
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
230
|
+
var newLayout = isGroup
|
231
|
+
? layout
|
232
|
+
: moveElement({
|
233
|
+
layout: layout,
|
234
|
+
l: l,
|
235
|
+
x: x,
|
236
|
+
y: y,
|
237
|
+
isUserAction: isUserAction,
|
238
|
+
preventCollision: preventCollision,
|
239
|
+
compactType: compactType,
|
240
|
+
cols: cols,
|
241
|
+
allowOverlap: allowOverlap,
|
242
|
+
});
|
235
243
|
if (isGroup) {
|
236
244
|
oldGroupChildren.forEach(function (item) {
|
237
245
|
var layoutItem = getLayoutItem(layout, item.i);
|
@@ -274,7 +282,6 @@ var ReactGridLayout = function (_a) {
|
|
274
282
|
if (!activeDrag || !oldDragItem) {
|
275
283
|
return;
|
276
284
|
}
|
277
|
-
;
|
278
285
|
var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
|
279
286
|
if (!l)
|
280
287
|
return;
|
@@ -291,7 +298,7 @@ var ReactGridLayout = function (_a) {
|
|
291
298
|
compactType: compactType,
|
292
299
|
cols: cols,
|
293
300
|
allowOverlap: allowOverlap,
|
294
|
-
overrideZ: oldDragItem.z
|
301
|
+
overrideZ: oldDragItem.z,
|
295
302
|
});
|
296
303
|
props.onDragStop &&
|
297
304
|
props.onDragStop({
|
@@ -318,7 +325,6 @@ var ReactGridLayout = function (_a) {
|
|
318
325
|
if (!activeDrag || !oldDragItem) {
|
319
326
|
return;
|
320
327
|
}
|
321
|
-
;
|
322
328
|
var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
|
323
329
|
if (!l)
|
324
330
|
return;
|
@@ -335,7 +341,7 @@ var ReactGridLayout = function (_a) {
|
|
335
341
|
compactType: compactType,
|
336
342
|
cols: cols,
|
337
343
|
allowOverlap: allowOverlap,
|
338
|
-
overrideZ: oldDragItem.z
|
344
|
+
overrideZ: oldDragItem.z,
|
339
345
|
});
|
340
346
|
var updatedItems = oldGroupChildren.map(function (item) {
|
341
347
|
var layoutItem = getLayoutItem(layout, item.i);
|
@@ -353,7 +359,7 @@ var ReactGridLayout = function (_a) {
|
|
353
359
|
placeholder: undefined,
|
354
360
|
e: e,
|
355
361
|
node: node,
|
356
|
-
updatedItems: updatedItems
|
362
|
+
updatedItems: updatedItems,
|
357
363
|
});
|
358
364
|
var newLayout = allowOverlap
|
359
365
|
? movedLayout
|
@@ -494,7 +500,7 @@ var ReactGridLayout = function (_a) {
|
|
494
500
|
layout: newLayout,
|
495
501
|
prev: oldResizeItem,
|
496
502
|
item: l,
|
497
|
-
hasPaddingChanged: hasPaddingChanged
|
503
|
+
hasPaddingChanged: hasPaddingChanged,
|
498
504
|
});
|
499
505
|
setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
|
500
506
|
};
|
@@ -514,10 +520,11 @@ var ReactGridLayout = function (_a) {
|
|
514
520
|
// LINK: https://legacy.reactjs.org/docs/react-api.html
|
515
521
|
var items = React.Children.toArray(children);
|
516
522
|
var item = items.find(function (child) {
|
517
|
-
var originalKey = String(child.key).split(
|
523
|
+
var originalKey = String(child.key).split('.$');
|
518
524
|
return originalKey[1] === l.i;
|
519
525
|
});
|
520
|
-
var isInBulk = blockStructure &&
|
526
|
+
var isInBulk = blockStructure &&
|
527
|
+
(bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(activeDrag.i))));
|
521
528
|
if (!item) {
|
522
529
|
return null;
|
523
530
|
}
|
@@ -536,11 +543,10 @@ var ReactGridLayout = function (_a) {
|
|
536
543
|
if (!l) {
|
537
544
|
return;
|
538
545
|
}
|
539
|
-
|
540
|
-
var draggable = typeof l.isDraggable === "boolean"
|
546
|
+
var draggable = typeof l.isDraggable === 'boolean'
|
541
547
|
? l.isDraggable
|
542
548
|
: !l.static && isDraggable;
|
543
|
-
var resizable = typeof l.isResizable ===
|
549
|
+
var resizable = typeof l.isResizable === 'boolean'
|
544
550
|
? l.isResizable
|
545
551
|
: !l.static && isResizable;
|
546
552
|
var resizeHandlesOptions = l.resizeHandles || resizeHandles;
|
@@ -549,7 +555,9 @@ var ReactGridLayout = function (_a) {
|
|
549
555
|
var z = l.z || 0;
|
550
556
|
var isInBulk = blockStructure && (bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(l.i))));
|
551
557
|
var isRoot = editingGroupBlock === 'ROOT';
|
552
|
-
var block = blockStructure
|
558
|
+
var block = blockStructure
|
559
|
+
? findBlockByBlockId(blockStructure, formatCbIdToBlockId(Number(l.i)))
|
560
|
+
: undefined;
|
553
561
|
if (!block) {
|
554
562
|
return _jsx(_Fragment, { children: "NO-BLOCK-FOUND" });
|
555
563
|
}
|
@@ -575,8 +583,8 @@ var ReactGridLayout = function (_a) {
|
|
575
583
|
var outsideOfEditingGroup = !editingGroupAllChildren.includes(l.i);
|
576
584
|
var zIndex = editorMode === 'EDIT' ? editorZIndex : z;
|
577
585
|
return (_jsx(GridItem, { className: classNames({
|
578
|
-
'editable-grid-item':
|
579
|
-
'not-editable-grid-item':
|
586
|
+
'editable-grid-item': !isRoot && editable,
|
587
|
+
'not-editable-grid-item': !isRoot && !editable,
|
580
588
|
'bulk-child-item': isInBulk,
|
581
589
|
'outside-of-editing-group': outsideOfEditingGroup,
|
582
590
|
}), z: zIndex, isDraggable: editable && !isInBulk, isResizable: editable && !isInBulk, 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, onFitToContent: onFitToContentHandler, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, 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: !!l.autoResize, children: child }, l.i));
|
@@ -670,7 +678,8 @@ var ReactGridLayout = function (_a) {
|
|
670
678
|
if (isBulk) {
|
671
679
|
return zIndexMap.EDITING_GROUP_CHILD + zOrder;
|
672
680
|
}
|
673
|
-
if (isInBulk) {
|
681
|
+
if (isInBulk) {
|
682
|
+
// 위와 같지만 이것은 not-editable이긴 함.
|
674
683
|
// const bulkBlock = findBlockByBlockId(blockStructure, 'BULK');
|
675
684
|
// const bulkZOrder = bulkBlock?.[device === 'DESKTOP' ? 'zOrderDesktopInternal' : 'zOrderMobileInternal'] ?? 0;
|
676
685
|
return zIndexMap.EDITING_GROUP_CHILD + zOrder;
|
@@ -694,14 +703,15 @@ var ReactGridLayout = function (_a) {
|
|
694
703
|
onDoubleClickGroup && onDoubleClickGroup(e, block.blockId, type);
|
695
704
|
};
|
696
705
|
var handleClickContextGroup = function (e) {
|
697
|
-
(props === null || props === void 0 ? void 0 : props.onContextGroup) &&
|
706
|
+
(props === null || props === void 0 ? void 0 : props.onContextGroup) &&
|
707
|
+
props.onContextGroup(e, block.blockId, isEditingGroup);
|
698
708
|
};
|
699
709
|
return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classNames({
|
700
710
|
'bulk-child-item': isInBulk,
|
701
711
|
'grid-bulk-block': block.blockId === 'BULK',
|
702
|
-
|
703
|
-
|
704
|
-
}), z: zIndex, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopGroupHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup && !isInBulk, isResizable: !viewOnly && !isEditingGroup && !isInBulk, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, i: block.blockId,
|
712
|
+
editing: editingGroupBlock === block.blockId,
|
713
|
+
selected: selectedGroupBlock === block.blockId,
|
714
|
+
}), z: zIndex, zOrder: zOrder, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopGroupHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup && !isInBulk, isResizable: !viewOnly && !isEditingGroup && !isInBulk, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, i: block.blockId,
|
705
715
|
// minH={l.minH}
|
706
716
|
// minW={l.minW}
|
707
717
|
// maxH={l.maxH}
|
@@ -712,12 +722,14 @@ var ReactGridLayout = function (_a) {
|
|
712
722
|
// resizeHandle={resizeHandle}
|
713
723
|
isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, onContextGroup: handleClickContextGroup, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.blockId) }));
|
714
724
|
};
|
715
|
-
var currentGroupBlocks = blockStructure
|
716
|
-
|
717
|
-
|
718
|
-
|
719
|
-
|
720
|
-
|
721
|
-
|
725
|
+
var currentGroupBlocks = blockStructure
|
726
|
+
? findGroupBlocks(blockStructure, editingGroupBlock)
|
727
|
+
: [];
|
728
|
+
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: [currentGroupBlocks.map(function (each) { return processGroup(each); }), 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: {
|
729
|
+
marginTop: margin[1] + 'px',
|
730
|
+
marginBottom: margin[1] + 'px',
|
731
|
+
marginLeft: margin[0] + 'px',
|
732
|
+
marginRight: margin[0] + 'px',
|
733
|
+
}, 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)' })] }) }))] }));
|
722
734
|
};
|
723
735
|
export default ReactGridLayout;
|