publ-echo-test 0.0.254 → 0.0.255
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.
@@ -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,27 +30,27 @@ 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, findParentGroupBlock, 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, findParentGroupBlock, 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 sectionId = props.sectionId, _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 sectionId = props.sectionId, _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 ? [
|
53
|
-
var device = cols === 24 ?
|
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
|
+
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];
|
56
56
|
var _4 = useState(), oldLayout = _4[0], setOldLayout = _4[1];
|
@@ -58,7 +58,7 @@ var ReactGridLayout = function (_a) {
|
|
58
58
|
var _6 = useState(), droppingDOMNode = _6[0], setDroppingDOMNode = _6[1];
|
59
59
|
var _7 = useState(), droppingPosition = _7[0], setDroppingPosition = _7[1];
|
60
60
|
var _8 = useState(false), isMounted = _8[0], setIsMounted = _8[1];
|
61
|
-
var editorMode = props.isDraggable && props.isResizable ?
|
61
|
+
var editorMode = props.isDraggable && props.isResizable ? "EDIT" : "VIEW";
|
62
62
|
var editableBlockIds = blockStructure
|
63
63
|
? findDirectChildrenCbIds(blockStructure, editingGroupBlock)
|
64
64
|
: [];
|
@@ -78,12 +78,12 @@ var ReactGridLayout = function (_a) {
|
|
78
78
|
}, []);
|
79
79
|
useLayoutEffect(function () {
|
80
80
|
if (props.layout && !Array.isArray(props.layout)) {
|
81
|
-
console.error(
|
81
|
+
console.error("Expecting layout to be an Array but got: ", props.layout);
|
82
82
|
}
|
83
83
|
setLayout(synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap));
|
84
84
|
}, [props.layout]);
|
85
85
|
useLayoutEffect(function () {
|
86
|
-
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);
|
87
87
|
setLayout(newLayout);
|
88
88
|
}, [children]);
|
89
89
|
var getPositionParams = function () {
|
@@ -112,7 +112,7 @@ var ReactGridLayout = function (_a) {
|
|
112
112
|
return (biggerNbRow * resolveRowHeight(rowHeight, colWidth) +
|
113
113
|
(biggerNbRow - 1) * margin[1] +
|
114
114
|
containerPaddingY * 2 +
|
115
|
-
|
115
|
+
"px");
|
116
116
|
};
|
117
117
|
var getBackgroundHeight = function () {
|
118
118
|
if (!autoSize)
|
@@ -126,12 +126,12 @@ var ReactGridLayout = function (_a) {
|
|
126
126
|
(biggerNbRow - 1) * margin[1] +
|
127
127
|
containerPaddingY * 2 -
|
128
128
|
2 * margin[1] +
|
129
|
-
|
129
|
+
"px");
|
130
130
|
};
|
131
131
|
var getBackgroundWidth = function () {
|
132
132
|
if (!autoSize)
|
133
133
|
return;
|
134
|
-
return width - margin[0] * 2 +
|
134
|
+
return width - margin[0] * 2 + "px";
|
135
135
|
};
|
136
136
|
/**
|
137
137
|
* When dragging starts
|
@@ -520,7 +520,7 @@ var ReactGridLayout = function (_a) {
|
|
520
520
|
// LINK: https://legacy.reactjs.org/docs/react-api.html
|
521
521
|
var items = React.Children.toArray(children);
|
522
522
|
var item = items.find(function (child) {
|
523
|
-
var originalKey = String(child.key).split(
|
523
|
+
var originalKey = String(child.key).split(".$");
|
524
524
|
return originalKey[1] === l.i;
|
525
525
|
});
|
526
526
|
var isInBulk = blockStructure &&
|
@@ -528,7 +528,7 @@ var ReactGridLayout = function (_a) {
|
|
528
528
|
if (!item) {
|
529
529
|
return null;
|
530
530
|
}
|
531
|
-
return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: zIndexMap.ISDRAGGING, i: activeDrag.i, className:
|
531
|
+
return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: zIndexMap.ISDRAGGING, 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: !!l.autoResize, minH: l.minH, minW: l.minW, children: item && item }));
|
532
532
|
};
|
533
533
|
/**
|
534
534
|
* Given a grid item, set its style attributes & surround in a <Draggable>.
|
@@ -543,10 +543,10 @@ var ReactGridLayout = function (_a) {
|
|
543
543
|
if (!l) {
|
544
544
|
return;
|
545
545
|
}
|
546
|
-
var draggable = typeof l.isDraggable ===
|
546
|
+
var draggable = typeof l.isDraggable === "boolean"
|
547
547
|
? l.isDraggable
|
548
548
|
: !l.static && isDraggable;
|
549
|
-
var resizable = typeof l.isResizable ===
|
549
|
+
var resizable = typeof l.isResizable === "boolean"
|
550
550
|
? l.isResizable
|
551
551
|
: !l.static && isResizable;
|
552
552
|
var resizeHandlesOptions = l.resizeHandles || resizeHandles;
|
@@ -554,7 +554,7 @@ var ReactGridLayout = function (_a) {
|
|
554
554
|
var editable = editableBlockIds.includes(Number(l.i));
|
555
555
|
var z = l.z || 0;
|
556
556
|
var isInBulk = blockStructure && (bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(l.i))));
|
557
|
-
var isRoot = editingGroupBlock ===
|
557
|
+
var isRoot = editingGroupBlock === "ROOT";
|
558
558
|
var block = blockStructure
|
559
559
|
? findBlockByBlockId(blockStructure, formatCbIdToBlockId(Number(l.i)))
|
560
560
|
: undefined;
|
@@ -564,7 +564,7 @@ var ReactGridLayout = function (_a) {
|
|
564
564
|
if (!block) {
|
565
565
|
return _jsx(_Fragment, { children: "NO-BLOCK-FOUND" });
|
566
566
|
}
|
567
|
-
var zOrder = (_a = block[device ===
|
567
|
+
var zOrder = (_a = block[device === "DESKTOP" ? "zOrderDesktopInternal" : "zOrderMobileInternal"]) !== null && _a !== void 0 ? _a : 0;
|
568
568
|
var isInsideOfEditingGroup = editingGroupAllChildren.includes(l.i);
|
569
569
|
var editorZIndex = (function () {
|
570
570
|
if (isRoot && isInBulk) {
|
@@ -584,16 +584,16 @@ var ReactGridLayout = function (_a) {
|
|
584
584
|
}
|
585
585
|
return z;
|
586
586
|
})();
|
587
|
-
var zIndex = editorMode ===
|
587
|
+
var zIndex = editorMode === "EDIT" ? editorZIndex : z;
|
588
588
|
return (_jsx(GridItem, { className: classNames({
|
589
|
-
|
590
|
-
|
591
|
-
|
592
|
-
|
589
|
+
"editable-grid-item": !isRoot && editable,
|
590
|
+
"not-editable-grid-item": !isRoot && !editable,
|
591
|
+
"bulk-child-item": isInBulk,
|
592
|
+
"outside-of-editing-group": !isInsideOfEditingGroup,
|
593
593
|
}), z: zIndex, zOrder: l.z, zOrderInternal: parent
|
594
|
-
? "".concat(parent[device ===
|
595
|
-
?
|
596
|
-
:
|
594
|
+
? "".concat(parent[device === "DESKTOP"
|
595
|
+
? "zOrderDesktopInternal"
|
596
|
+
: "zOrderMobileInternal"], " > ").concat(zOrder)
|
597
597
|
: zOrder.toString(), 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));
|
598
598
|
};
|
599
599
|
var onDragOverHandler = function (e) {
|
@@ -632,10 +632,10 @@ var ReactGridLayout = function (_a) {
|
|
632
632
|
};
|
633
633
|
var removeDroppingPlaceholder = function () {
|
634
634
|
var newLayout = compact(layout.filter(function (l) { return l.i !== droppingItem.i; }), compactType, cols, allowOverlap);
|
635
|
-
setLayout(newLayout);
|
636
|
-
setDroppingDOMNode(undefined);
|
637
|
-
setActiveDrag(undefined);
|
638
|
-
setDroppingPosition(undefined);
|
635
|
+
// setLayout(newLayout);
|
636
|
+
// setDroppingDOMNode(undefined);
|
637
|
+
// setActiveDrag(undefined);
|
638
|
+
// setDroppingPosition(undefined);
|
639
639
|
};
|
640
640
|
var onDragLeaveHandler = function (e) {
|
641
641
|
e.preventDefault();
|
@@ -672,12 +672,12 @@ var ReactGridLayout = function (_a) {
|
|
672
672
|
if (!groupItem) {
|
673
673
|
return _jsx(_Fragment, {});
|
674
674
|
}
|
675
|
-
var internalZOrder = (_a = block[device ===
|
675
|
+
var internalZOrder = (_a = block[device === "DESKTOP" ? "zOrderDesktopInternal" : "zOrderMobileInternal"]) !== null && _a !== void 0 ? _a : 0;
|
676
676
|
var isEditingGroup = block.blockId === editingGroupBlock;
|
677
677
|
var type = getBlockSpecificType(block);
|
678
|
-
var isRoot = editingGroupBlock ===
|
678
|
+
var isRoot = editingGroupBlock === "ROOT";
|
679
679
|
var isInBulk = bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(block.blockId);
|
680
|
-
var isBulk = block.blockId ===
|
680
|
+
var isBulk = block.blockId === "BULK";
|
681
681
|
var baseZ = (function () {
|
682
682
|
if (isBulk) {
|
683
683
|
// groupItem.z : 그룹 내 CB중 가장 큰 zorder
|
@@ -692,15 +692,15 @@ var ReactGridLayout = function (_a) {
|
|
692
692
|
if (isEditingGroup) {
|
693
693
|
return zIndexMap.EDITING_GROUP;
|
694
694
|
}
|
695
|
-
if (!isRoot && type ===
|
695
|
+
if (!isRoot && type === "GROUP_BLOCK") {
|
696
696
|
return zIndexMap.EDITABLE_GROUP + internalZOrder;
|
697
697
|
}
|
698
|
-
if (type ===
|
698
|
+
if (type === "GROUP_BLOCK") {
|
699
699
|
return zIndexMap.GROUP;
|
700
700
|
}
|
701
701
|
return -1; // NOTE: ERROR
|
702
702
|
})();
|
703
|
-
var zIndex = editorMode ===
|
703
|
+
var zIndex = editorMode === "EDIT" ? baseZ : internalZOrder;
|
704
704
|
var handleClick = function (e) {
|
705
705
|
onClickGroup && onClickGroup(e, block.blockId, type);
|
706
706
|
};
|
@@ -715,14 +715,14 @@ var ReactGridLayout = function (_a) {
|
|
715
715
|
? findParentGroupBlock(blockStructure, block.blockId)
|
716
716
|
: null;
|
717
717
|
return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classNames({
|
718
|
-
|
719
|
-
|
718
|
+
"bulk-child-item": isInBulk,
|
719
|
+
"grid-bulk-block": block.blockId === "BULK",
|
720
720
|
editing: editingGroupBlock === block.blockId,
|
721
721
|
selected: selectedGroupBlock === block.blockId,
|
722
722
|
}), z: zIndex, minZ: groupItem.minZ, zOrder: internalZOrder, zOrderInternal: parent
|
723
|
-
? "".concat(parent[device ===
|
724
|
-
?
|
725
|
-
:
|
723
|
+
? "".concat(parent[device === "DESKTOP"
|
724
|
+
? "zOrderDesktopInternal"
|
725
|
+
: "zOrderMobileInternal"], " > ").concat(internalZOrder)
|
726
726
|
: internalZOrder.toString(), 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,
|
727
727
|
// minH={l.minH}
|
728
728
|
// minW={l.minW}
|
@@ -737,11 +737,11 @@ var ReactGridLayout = function (_a) {
|
|
737
737
|
var currentGroupBlocks = blockStructure
|
738
738
|
? findGroupBlocks(blockStructure, editingGroupBlock)
|
739
739
|
: [];
|
740
|
-
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, "data-grid-row-height": rowHeight, "data-grid-cols": cols, "data-section-id": sectionId, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className:
|
741
|
-
marginTop: margin[1] +
|
742
|
-
marginBottom: margin[1] +
|
743
|
-
marginLeft: margin[0] +
|
744
|
-
marginRight: margin[0] +
|
745
|
-
}, children: _jsxs("svg", { xmlns:
|
740
|
+
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, "data-grid-row-height": rowHeight, "data-grid-cols": cols, "data-section-id": sectionId, 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: {
|
741
|
+
marginTop: margin[1] + "px",
|
742
|
+
marginBottom: margin[1] + "px",
|
743
|
+
marginLeft: margin[0] + "px",
|
744
|
+
marginRight: margin[0] + "px",
|
745
|
+
}, 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)" })] }) }))] }));
|
746
746
|
};
|
747
747
|
export default ReactGridLayout;
|
@@ -89,7 +89,6 @@ var Resizable = function (_a) {
|
|
89
89
|
// NOTE: 이건 좀 확인 필요. 근데 지금스팩엔 이게 맞아보임 (gap때문)
|
90
90
|
var minCellWidth = 10;
|
91
91
|
var minColHeight = 11;
|
92
|
-
console.log("one composition", oneComposition);
|
93
92
|
var numberOfItems = Number(target.getAttribute("data-number-of-items"));
|
94
93
|
var numberOfColumns = Number(target.getAttribute("data-number-of-columns"));
|
95
94
|
var rowGap = Number(target.getAttribute("data-row-gap"));
|