publ-echo-test 0.0.142 → 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.
@@ -30,7 +30,7 @@ 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 ? '' : _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;
|
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];
|
@@ -396,6 +396,7 @@ var GridItem = function (_a) {
|
|
396
396
|
ref: elementRef,
|
397
397
|
'data-grid-id': i,
|
398
398
|
'data-z-index': z,
|
399
|
+
'data-z-order': zOrder,
|
399
400
|
className: classNames('react-grid-item', child.props.className, className, {
|
400
401
|
static: props.static,
|
401
402
|
isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
|
@@ -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 {};
|
@@ -711,7 +711,7 @@ var ReactGridLayout = function (_a) {
|
|
711
711
|
'grid-bulk-block': block.blockId === 'BULK',
|
712
712
|
editing: editingGroupBlock === block.blockId,
|
713
713
|
selected: selectedGroupBlock === block.blockId,
|
714
|
-
}), 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,
|
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,
|
715
715
|
// minH={l.minH}
|
716
716
|
// minW={l.minW}
|
717
717
|
// maxH={l.maxH}
|