publ-echo-test 0.0.59 → 0.0.60
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/Draggable/types.d.ts +2 -1
- package/dist/lib/GridItem/GroupItem.d.ts +5 -1
- package/dist/lib/GridItem/GroupItem.js +6 -3
- package/dist/lib/GridItem/types.d.ts +0 -1
- package/dist/lib/GridLayoutEditor/ReactGridLayout.js +29 -5
- package/dist/lib/GridLayoutEditor/group.d.ts +1 -0
- package/dist/lib/GridLayoutEditor/group.js +36 -24
- package/dist/lib/GridLayoutEditor/types.d.ts +1 -0
- package/package.json +1 -1
@@ -23,7 +23,8 @@ export type DraggableCoreDefaultProps = {
|
|
23
23
|
onDrag?: DraggableEventHandler | Function;
|
24
24
|
onStop?: DraggableEventHandler | Function;
|
25
25
|
onMouseDown?: (e: MouseEvent) => void;
|
26
|
-
onDoubleClick?:
|
26
|
+
onDoubleClick?: () => void;
|
27
|
+
onClick?: () => void;
|
27
28
|
scale?: number;
|
28
29
|
cancel?: string;
|
29
30
|
children: ReactElement<any>;
|
@@ -1,5 +1,9 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { GridItemProps } from "./types";
|
3
3
|
import { PropsWithChildren } from "../types";
|
4
|
-
|
4
|
+
type GroupItemProp = {
|
5
|
+
onDoubleClick: (id: string) => void;
|
6
|
+
onClick: (id: string) => void;
|
7
|
+
};
|
8
|
+
declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps & GroupItemProp>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
5
9
|
export default GroupItem;
|
@@ -30,7 +30,7 @@ import { Resizable } from "../Resizable";
|
|
30
30
|
var GroupItem = 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, onDoubleClick = props.onDoubleClick;
|
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, onDoubleClick = props.onDoubleClick, onClick = props.onClick;
|
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];
|
@@ -136,7 +136,10 @@ var GroupItem = function (_a) {
|
|
136
136
|
// }
|
137
137
|
// };
|
138
138
|
var handleDoubleClick = function () {
|
139
|
-
|
139
|
+
onDoubleClick(props.i);
|
140
|
+
};
|
141
|
+
var handleClick = function () {
|
142
|
+
onClick(props.i);
|
140
143
|
};
|
141
144
|
var getPositionParams = function (prop) {
|
142
145
|
if (prop === void 0) { prop = props; }
|
@@ -174,7 +177,7 @@ var GroupItem = function (_a) {
|
|
174
177
|
* @return {Element} Child wrapped in Draggable.
|
175
178
|
*/
|
176
179
|
var mixinDraggable = function (child, isDraggable) {
|
177
|
-
return (_jsx(DraggableCore, { onDoubleClick: handleDoubleClick, disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
|
180
|
+
return (_jsx(DraggableCore, { onClick: handleClick, onDoubleClick: handleDoubleClick, disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
|
178
181
|
};
|
179
182
|
/**
|
180
183
|
* Mix a Resizable instance into a child.
|
@@ -78,7 +78,6 @@ export type GridItemProps = {
|
|
78
78
|
onFitToContent?: (i: string, w: number, h: number, x: number, y: number, { hasPaddingChanged }: {
|
79
79
|
hasPaddingChanged: boolean;
|
80
80
|
}) => void;
|
81
|
-
onDoubleClick?: (id: string) => void;
|
82
81
|
isHiddenVisibility?: boolean;
|
83
82
|
customColWidth?: number;
|
84
83
|
autoResize: boolean;
|
@@ -37,7 +37,7 @@ import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, ge
|
|
37
37
|
import { calcGridColWidth, calcXY, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
|
38
38
|
import GridItem from "../GridItem/GridItem";
|
39
39
|
import isEqual from "../../external-lib/lodash.isEqual";
|
40
|
-
import { findAllChildrenButGroup, findAllChildrenIds, findChildrenIds, findGroupBlocks } from "./group";
|
40
|
+
import { findAllChildrenButGroup, findAllChildrenIds, findChildrenIds, findGroupBlocks, getBlockType } from "./group";
|
41
41
|
import GroupItem from "../GridItem/GroupItem";
|
42
42
|
var layoutClassName = "react-grid-layout";
|
43
43
|
var ReactGridLayout = function (_a) {
|
@@ -48,7 +48,7 @@ var ReactGridLayout = function (_a) {
|
|
48
48
|
w: 1,
|
49
49
|
} : _w, // TODO fix
|
50
50
|
_x = props.resizeHandles, // TODO fix
|
51
|
-
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.selectedGroupBlock, selectedGroupBlock = _0 === void 0 ? '1' : _0, onClickGroup = props.onClickGroup;
|
51
|
+
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.selectedGroupBlock, selectedGroupBlock = _0 === void 0 ? '1' : _0, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds;
|
52
52
|
var _1 = useState(), activeDrag = _1[0], setActiveDrag = _1[1];
|
53
53
|
var _2 = useState(), oldDragItem = _2[0], setOldDragItem = _2[1];
|
54
54
|
var _3 = useState(), oldLayout = _3[0], setOldLayout = _3[1];
|
@@ -490,7 +490,8 @@ var ReactGridLayout = function (_a) {
|
|
490
490
|
var bounded = draggable && isBounded && l.isBounded !== false;
|
491
491
|
var editable = editableItems.includes(l.i);
|
492
492
|
var z = l.z || 0;
|
493
|
-
|
493
|
+
var isInBulk = bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(l.i);
|
494
|
+
return (_jsx(GridItem, { className: editable ? 'editable-grid-item' : isInBulk ? 'bulk-grid-item' : 'not-editable-grid-item', isDraggable: editable, isResizable: editable, 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, z: editable ? 1000 + z : z, 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));
|
494
495
|
};
|
495
496
|
var onDragOverHandler = function (e) {
|
496
497
|
var _a;
|
@@ -578,6 +579,27 @@ var ReactGridLayout = function (_a) {
|
|
578
579
|
return _jsx(_Fragment, {});
|
579
580
|
}
|
580
581
|
var isEditingGroup = block.id === selectedGroupBlock;
|
582
|
+
var type = getBlockType(block.id);
|
583
|
+
var z = (function () {
|
584
|
+
if (isEditingGroup && type === 'GROUP') {
|
585
|
+
return 1000 + groupItem.z;
|
586
|
+
}
|
587
|
+
if (type === 'GROUP') {
|
588
|
+
return 1000;
|
589
|
+
}
|
590
|
+
if (type === 'BULK') {
|
591
|
+
return 9999;
|
592
|
+
}
|
593
|
+
return 1000;
|
594
|
+
})();
|
595
|
+
var handleClick = function (id) {
|
596
|
+
onClickGroup && onClickGroup(id);
|
597
|
+
};
|
598
|
+
var handleDoubleClick = function (id) {
|
599
|
+
if (type === 'GROUP') {
|
600
|
+
onDoubleClickGroup && onDoubleClickGroup(id);
|
601
|
+
}
|
602
|
+
};
|
581
603
|
return (
|
582
604
|
// <OutsideClickHandler onOutsideClick={() => {
|
583
605
|
// if (isEditingGroup) {
|
@@ -588,7 +610,7 @@ var ReactGridLayout = function (_a) {
|
|
588
610
|
// }
|
589
611
|
// }
|
590
612
|
// }}>
|
591
|
-
_jsx(GroupItem, { className: isEditingGroup ? 'group editing' :
|
613
|
+
_jsx(GroupItem, { className: isEditingGroup ? 'group editing' : type.toLocaleLowerCase(), onClick: handleClick, onDoubleClick: handleDoubleClick, 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, isDraggable: !viewOnly || !isEditingGroup, isResizable: !viewOnly || !isEditingGroup, isBounded: true, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, z: z, i: block.id.toString(),
|
592
614
|
// minH={l.minH}
|
593
615
|
// minW={l.minW}
|
594
616
|
// maxH={l.maxH}
|
@@ -597,12 +619,14 @@ var ReactGridLayout = function (_a) {
|
|
597
619
|
// droppingPosition={isDroppingItem ? droppingPosition : undefined}
|
598
620
|
// resizeHandles={resizeHandlesOptions}
|
599
621
|
// resizeHandle={resizeHandle}
|
600
|
-
isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", {
|
622
|
+
isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", {}) }, block.id)
|
601
623
|
// </OutsideClickHandler>
|
602
624
|
);
|
603
625
|
};
|
604
626
|
var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, selectedGroupBlock) : [];
|
605
627
|
// const groupsParentsGroups = findAllParentGroups(blockStructure, selectedGroup);
|
628
|
+
console.log('bs', blockStructure);
|
629
|
+
console.log('current', currentGroupBlocks);
|
606
630
|
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: {
|
607
631
|
marginTop: margin[1] + "px",
|
608
632
|
marginBottom: margin[1] + "px",
|
@@ -13,4 +13,5 @@ export declare const findAllComponentBlockIds: (blockStructure: Block[]) => stri
|
|
13
13
|
export declare const findParentGroupByGroupId: (blockStructure: Block[], targetId: string) => string | null;
|
14
14
|
export declare const addBlockToRoot: (blockStructure: Block[], newBlock: Block) => Block[];
|
15
15
|
export declare const addBulkToTarget: (blockStructure: Block[], targetId: string, bulkIds: string[]) => Block[];
|
16
|
+
export declare const getBlockType: (id: string) => 'GROUP' | 'BULK' | 'COMPONENT_BLOCK' | 'UNKNOWN';
|
16
17
|
export declare const blockStructure: Block[];
|
@@ -92,11 +92,11 @@ export var findGroupBlocks = function (blockStructure, targetId) {
|
|
92
92
|
var targetBlock = findBlockById(blockStructure, targetId);
|
93
93
|
var groupBlocks = [];
|
94
94
|
if (targetBlock) {
|
95
|
-
if (targetBlock.name === 'GroupBlock') {
|
95
|
+
if (targetBlock.name === 'GroupBlock' || targetBlock.name === 'BulkBlock') {
|
96
96
|
groupBlocks.push(targetBlock);
|
97
97
|
}
|
98
98
|
if (targetBlock.children) {
|
99
|
-
groupBlocks.push.apply(groupBlocks, targetBlock.children.filter(function (child) { return child.name === 'GroupBlock'; }));
|
99
|
+
groupBlocks.push.apply(groupBlocks, targetBlock.children.filter(function (child) { return child.name === 'GroupBlock' || child.name === 'BulkBlock'; }));
|
100
100
|
}
|
101
101
|
}
|
102
102
|
return groupBlocks;
|
@@ -149,7 +149,7 @@ export var addBulkToTarget = function (blockStructure, targetId, bulkIds) {
|
|
149
149
|
var structure = deepClone(blockStructure);
|
150
150
|
var targetBlock = findBlockById(structure, targetId);
|
151
151
|
if (!targetBlock || !targetBlock.children) {
|
152
|
-
|
152
|
+
return blockStructure;
|
153
153
|
}
|
154
154
|
var bulkBlocks = targetBlock.children.filter(function (child) { return bulkIds.includes(child.id); });
|
155
155
|
if (bulkBlocks.length !== bulkIds.length) {
|
@@ -159,14 +159,26 @@ export var addBulkToTarget = function (blockStructure, targetId, bulkIds) {
|
|
159
159
|
targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.id); });
|
160
160
|
// Create the new bulkBlock
|
161
161
|
var bulkBlock = {
|
162
|
-
id: "
|
163
|
-
name: '
|
162
|
+
id: "BULK",
|
163
|
+
name: 'BulkBlock',
|
164
164
|
children: bulkBlocks,
|
165
165
|
};
|
166
166
|
// Add the bulkBlock to the target's children
|
167
167
|
targetBlock.children.push(bulkBlock);
|
168
168
|
return structure;
|
169
169
|
};
|
170
|
+
export var getBlockType = function (id) {
|
171
|
+
if (id.startsWith('GB_')) {
|
172
|
+
return 'GROUP';
|
173
|
+
}
|
174
|
+
else if (id.startsWith('CB_')) {
|
175
|
+
return 'COMPONENT_BLOCK';
|
176
|
+
}
|
177
|
+
else if (id === 'BULK') {
|
178
|
+
return 'BULK';
|
179
|
+
}
|
180
|
+
return 'UNKNOWN'; // 잘못된 ID 형식의 경우
|
181
|
+
};
|
170
182
|
// 사용 예시:
|
171
183
|
export var blockStructure = [
|
172
184
|
{
|
@@ -174,43 +186,43 @@ export var blockStructure = [
|
|
174
186
|
name: 'RootBlock',
|
175
187
|
children: [
|
176
188
|
{
|
177
|
-
id: '
|
189
|
+
id: 'GB_2',
|
178
190
|
name: 'GroupBlock',
|
179
191
|
children: [
|
180
192
|
{
|
181
|
-
id: '
|
193
|
+
id: 'GB_3',
|
182
194
|
name: 'GroupBlock',
|
183
195
|
children: [
|
184
196
|
{
|
185
|
-
id: '
|
197
|
+
id: 'CB_4',
|
186
198
|
name: 'ComponentBlock'
|
187
199
|
},
|
188
200
|
{
|
189
|
-
id: '
|
201
|
+
id: 'CB_5',
|
190
202
|
name: 'ComponentBlock'
|
191
203
|
},
|
192
204
|
{
|
193
|
-
id: '
|
205
|
+
id: 'GB_6',
|
194
206
|
name: 'GroupBlock',
|
195
207
|
children: [
|
196
208
|
{
|
197
|
-
id: '
|
209
|
+
id: 'CB_7',
|
198
210
|
name: 'ComponentBlock'
|
199
211
|
},
|
200
212
|
{
|
201
|
-
id: '
|
213
|
+
id: 'CB_8',
|
202
214
|
name: 'ComponentBlock'
|
203
215
|
},
|
204
216
|
{
|
205
|
-
id: '
|
217
|
+
id: 'GB_9',
|
206
218
|
name: 'GroupBlock',
|
207
219
|
children: [
|
208
220
|
{
|
209
|
-
id: '
|
221
|
+
id: 'CB_10',
|
210
222
|
name: 'ComponentBlock'
|
211
223
|
},
|
212
224
|
{
|
213
|
-
id: '
|
225
|
+
id: 'CB_11',
|
214
226
|
name: 'ComponentBlock'
|
215
227
|
}
|
216
228
|
]
|
@@ -220,31 +232,31 @@ export var blockStructure = [
|
|
220
232
|
]
|
221
233
|
},
|
222
234
|
{
|
223
|
-
id: '
|
235
|
+
id: 'GB_12',
|
224
236
|
name: 'GroupBlock',
|
225
237
|
children: [
|
226
238
|
{
|
227
|
-
id: '
|
239
|
+
id: 'CB_13',
|
228
240
|
name: 'ComponentBlock'
|
229
241
|
},
|
230
242
|
{
|
231
|
-
id: '
|
243
|
+
id: 'CB_14',
|
232
244
|
name: 'ComponentBlock'
|
233
245
|
}
|
234
246
|
]
|
235
247
|
},
|
236
248
|
{
|
237
|
-
id: '
|
249
|
+
id: 'CB_15',
|
238
250
|
name: 'ComponentBlock'
|
239
251
|
},
|
240
252
|
{
|
241
|
-
id: '
|
253
|
+
id: 'CB_16',
|
242
254
|
name: 'ComponentBlock'
|
243
255
|
}
|
244
256
|
]
|
245
257
|
},
|
246
258
|
{
|
247
|
-
id: '
|
259
|
+
id: 'GB_17',
|
248
260
|
name: 'GroupBlock',
|
249
261
|
children: [
|
250
262
|
// {
|
@@ -262,17 +274,17 @@ export var blockStructure = [
|
|
262
274
|
// ]
|
263
275
|
// },
|
264
276
|
{
|
265
|
-
id: '
|
277
|
+
id: 'CB_18',
|
266
278
|
name: 'ComponentBlock'
|
267
279
|
}
|
268
280
|
]
|
269
281
|
},
|
270
282
|
{
|
271
|
-
id: '
|
283
|
+
id: 'CB_19',
|
272
284
|
name: 'ComponentBlock'
|
273
285
|
},
|
274
286
|
{
|
275
|
-
id: '
|
287
|
+
id: 'CB_20',
|
276
288
|
name: 'ComponentBlock'
|
277
289
|
}
|
278
290
|
]
|