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.
@@ -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?: any;
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
- declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
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
- (props === null || props === void 0 ? void 0 : props.onDoubleClick) && props.onDoubleClick(props.i);
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
- return (_jsx(GridItem, { className: editable ? 'editable-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 ? 100009 + 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));
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' : 'group', onDoubleClick: onDoubleClickGroup, 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: (isEditingGroup) ? 100009 : 100009 + groupItem.z, i: block.id.toString(),
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", { onClick: function () { onClickGroup && onClickGroup(block.id); } }) }, block.id)
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
- throw new Error("Target block with id ".concat(targetId, " not found or has no children."));
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: "bulk",
163
- name: 'GroupBlock',
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: '2',
189
+ id: 'GB_2',
178
190
  name: 'GroupBlock',
179
191
  children: [
180
192
  {
181
- id: '3',
193
+ id: 'GB_3',
182
194
  name: 'GroupBlock',
183
195
  children: [
184
196
  {
185
- id: '4',
197
+ id: 'CB_4',
186
198
  name: 'ComponentBlock'
187
199
  },
188
200
  {
189
- id: '5',
201
+ id: 'CB_5',
190
202
  name: 'ComponentBlock'
191
203
  },
192
204
  {
193
- id: '6',
205
+ id: 'GB_6',
194
206
  name: 'GroupBlock',
195
207
  children: [
196
208
  {
197
- id: '7',
209
+ id: 'CB_7',
198
210
  name: 'ComponentBlock'
199
211
  },
200
212
  {
201
- id: '8',
213
+ id: 'CB_8',
202
214
  name: 'ComponentBlock'
203
215
  },
204
216
  {
205
- id: '9',
217
+ id: 'GB_9',
206
218
  name: 'GroupBlock',
207
219
  children: [
208
220
  {
209
- id: '10',
221
+ id: 'CB_10',
210
222
  name: 'ComponentBlock'
211
223
  },
212
224
  {
213
- id: '11',
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: '12',
235
+ id: 'GB_12',
224
236
  name: 'GroupBlock',
225
237
  children: [
226
238
  {
227
- id: '13',
239
+ id: 'CB_13',
228
240
  name: 'ComponentBlock'
229
241
  },
230
242
  {
231
- id: '14',
243
+ id: 'CB_14',
232
244
  name: 'ComponentBlock'
233
245
  }
234
246
  ]
235
247
  },
236
248
  {
237
- id: '15',
249
+ id: 'CB_15',
238
250
  name: 'ComponentBlock'
239
251
  },
240
252
  {
241
- id: '16',
253
+ id: 'CB_16',
242
254
  name: 'ComponentBlock'
243
255
  }
244
256
  ]
245
257
  },
246
258
  {
247
- id: '17',
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: '18',
277
+ id: 'CB_18',
266
278
  name: 'ComponentBlock'
267
279
  }
268
280
  ]
269
281
  },
270
282
  {
271
- id: '19',
283
+ id: 'CB_19',
272
284
  name: 'ComponentBlock'
273
285
  },
274
286
  {
275
- id: '20',
287
+ id: 'CB_20',
276
288
  name: 'ComponentBlock'
277
289
  }
278
290
  ]
@@ -77,6 +77,7 @@ export type ReactGridLayoutProps = {
77
77
  onDoubleClickGroup?: (id: string) => void;
78
78
  selectedGroupBlock?: string;
79
79
  onClickGroup?: (id: string) => void;
80
+ bulkIds?: string[];
80
81
  };
81
82
  export type DragOverEvent = MouseEvent & {
82
83
  nativeEvent: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.59",
3
+ "version": "0.0.60",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",