publ-echo-test 0.0.60 → 0.0.61

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.
@@ -260,7 +260,6 @@ var DraggableCore = function (_a) {
260
260
  onMouseDown: handleMouseDown,
261
261
  onMouseUp: handleMouseUp,
262
262
  onTouchEnd: handleTouchEnd,
263
- onDoubleClick: props.onDoubleClick,
264
263
  ref: (_b = props.nodeRef) !== null && _b !== void 0 ? _b : draggableCoreRef,
265
264
  });
266
265
  };
@@ -23,8 +23,6 @@ export type DraggableCoreDefaultProps = {
23
23
  onDrag?: DraggableEventHandler | Function;
24
24
  onStop?: DraggableEventHandler | Function;
25
25
  onMouseDown?: (e: MouseEvent) => void;
26
- onDoubleClick?: () => void;
27
- onClick?: () => void;
28
26
  scale?: number;
29
27
  cancel?: string;
30
28
  children: ReactElement<any>;
@@ -248,6 +248,7 @@ var GridItem = function (_a) {
248
248
  var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
249
249
  var bottomBoundary = offsetParent.clientHeight -
250
250
  calcGridItemWHPx(h, rowHeightNumber, margin[1]);
251
+ console.log('bb', bottomBoundary);
251
252
  top = clamp(top, 0, bottomBoundary);
252
253
  var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
253
254
  left = clamp(left, 0, rightBoundary);
@@ -1,9 +1,5 @@
1
1
  import React from "react";
2
2
  import { GridItemProps } from "./types";
3
3
  import { PropsWithChildren } from "../types";
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>>;
4
+ declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
9
5
  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, onClick = props.onClick;
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;
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];
@@ -135,12 +135,6 @@ var GroupItem = function (_a) {
135
135
  // });
136
136
  // }
137
137
  // };
138
- var handleDoubleClick = function () {
139
- onDoubleClick(props.i);
140
- };
141
- var handleClick = function () {
142
- onClick(props.i);
143
- };
144
138
  var getPositionParams = function (prop) {
145
139
  if (prop === void 0) { prop = props; }
146
140
  return {
@@ -177,7 +171,7 @@ var GroupItem = function (_a) {
177
171
  * @return {Element} Child wrapped in Draggable.
178
172
  */
179
173
  var mixinDraggable = function (child, isDraggable) {
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 }));
174
+ 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 }));
181
175
  };
182
176
  /**
183
177
  * Mix a Resizable instance into a child.
@@ -254,6 +248,7 @@ var GroupItem = function (_a) {
254
248
  var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
255
249
  var bottomBoundary = offsetParent.clientHeight -
256
250
  calcGridItemWHPx(h, rowHeightNumber, margin[1]);
251
+ console.log('bb', bottomBoundary);
257
252
  top = clamp(top, 0, bottomBoundary);
258
253
  var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
259
254
  left = clamp(left, 0, rightBoundary);
@@ -385,17 +380,13 @@ var GroupItem = function (_a) {
385
380
  var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
386
381
  handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
387
382
  };
388
- var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
389
- dragging: dragging,
390
- resizing: resizing,
391
- }, colWidth);
383
+ var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {}, colWidth);
392
384
  var child = React.Children.only(children);
393
- // console.log(child, className)
394
385
  var newChild = React.cloneElement(child, {
395
386
  key: i,
396
387
  ref: elementRef,
397
388
  'data-grid-id': i,
398
- className: classNames("react-grid-item", child.props.className, className, {
389
+ className: classNames("react-group-item", child.props.className, className, {
399
390
  static: props.static,
400
391
  isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
401
392
  resizing: Boolean(resizing),
@@ -39,6 +39,7 @@ import GridItem from "../GridItem/GridItem";
39
39
  import isEqual from "../../external-lib/lodash.isEqual";
40
40
  import { findAllChildrenButGroup, findAllChildrenIds, findChildrenIds, findGroupBlocks, getBlockType } from "./group";
41
41
  import GroupItem from "../GridItem/GroupItem";
42
+ import OutsideClickHandler from "../GridItem/OutsideClickHandler";
42
43
  var layoutClassName = "react-grid-layout";
43
44
  var ReactGridLayout = function (_a) {
44
45
  var children = _a.children, props = __rest(_a, ["children"]);
@@ -48,7 +49,7 @@ var ReactGridLayout = function (_a) {
48
49
  w: 1,
49
50
  } : _w, // TODO fix
50
51
  _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, bulkIds = props.bulkIds;
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 ? '1' : _0, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup, selectedGroupBlock = props.selectedGroupBlock;
52
53
  var _1 = useState(), activeDrag = _1[0], setActiveDrag = _1[1];
53
54
  var _2 = useState(), oldDragItem = _2[0], setOldDragItem = _2[1];
54
55
  var _3 = useState(), oldLayout = _3[0], setOldLayout = _3[1];
@@ -57,7 +58,7 @@ var ReactGridLayout = function (_a) {
57
58
  var _6 = useState(), droppingPosition = _6[0], setDroppingPosition = _6[1];
58
59
  var _7 = useState(false), isMounted = _7[0], setIsMounted = _7[1];
59
60
  // const [selectedGroup, setSelectedGroup] = useState<string>('1');
60
- var editableItems = blockStructure ? findChildrenIds(blockStructure, selectedGroupBlock) : [];
61
+ var editableItems = blockStructure ? findChildrenIds(blockStructure, editingGroupBlock) : [];
61
62
  var _8 = useState([]), oldGroupChildren = _8[0], setOldGroupChildren = _8[1];
62
63
  var _9 = useState(function () {
63
64
  return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
@@ -201,6 +202,7 @@ var ReactGridLayout = function (_a) {
201
202
  var _b;
202
203
  var e = _a.e, node = _a.node;
203
204
  var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
205
+ console.log(y);
204
206
  if (!l)
205
207
  return;
206
208
  if (!oldDragItem) {
@@ -578,11 +580,11 @@ var ReactGridLayout = function (_a) {
578
580
  if (!groupItem) {
579
581
  return _jsx(_Fragment, {});
580
582
  }
581
- var isEditingGroup = block.id === selectedGroupBlock;
583
+ var isEditingGroup = block.id === editingGroupBlock;
582
584
  var type = getBlockType(block.id);
583
585
  var z = (function () {
584
586
  if (isEditingGroup && type === 'GROUP') {
585
- return 1000 + groupItem.z;
587
+ return 1000;
586
588
  }
587
589
  if (type === 'GROUP') {
588
590
  return 1000;
@@ -592,16 +594,13 @@ var ReactGridLayout = function (_a) {
592
594
  }
593
595
  return 1000;
594
596
  })();
595
- var handleClick = function (id) {
596
- onClickGroup && onClickGroup(id);
597
+ var handleClick = function (e) {
598
+ onClickGroup && onClickGroup(e, block.id, type);
597
599
  };
598
- var handleDoubleClick = function (id) {
599
- if (type === 'GROUP') {
600
- onDoubleClickGroup && onDoubleClickGroup(id);
601
- }
600
+ var handleDoubleClick = function (e) {
601
+ onDoubleClickGroup && onDoubleClickGroup(e, block.id, type);
602
602
  };
603
- return (
604
- // <OutsideClickHandler onOutsideClick={() => {
603
+ // () => {
605
604
  // if (isEditingGroup) {
606
605
  // const parent = findParentGroupByGroupId(blockStructure, block.id)
607
606
  // parent && setSelectedGroup(parent)
@@ -609,24 +608,29 @@ var ReactGridLayout = function (_a) {
609
608
  // setSelectedGroup('1')
610
609
  // }
611
610
  // }
612
- // }}>
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(),
614
- // minH={l.minH}
615
- // minW={l.minW}
616
- // maxH={l.maxH}
617
- // maxW={l.maxW}
618
- // static={l.static}
619
- // droppingPosition={isDroppingItem ? droppingPosition : undefined}
620
- // resizeHandles={resizeHandlesOptions}
621
- // resizeHandle={resizeHandle}
622
- isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", {}) }, block.id)
623
- // </OutsideClickHandler>
624
- );
611
+ // }
612
+ var classname = (function () {
613
+ if (editingGroupBlock === block.id) {
614
+ return 'group editing';
615
+ }
616
+ if (selectedGroupBlock === block.id) {
617
+ return 'group selected';
618
+ }
619
+ return type.toLowerCase();
620
+ })();
621
+ return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classname, 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: false, 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(),
622
+ // minH={l.minH}
623
+ // minW={l.minW}
624
+ // maxH={l.maxH}
625
+ // maxW={l.maxW}
626
+ // static={l.static}
627
+ // droppingPosition={isDroppingItem ? droppingPosition : undefined}
628
+ // resizeHandles={resizeHandlesOptions}
629
+ // resizeHandle={resizeHandle}
630
+ isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.id) }));
625
631
  };
626
- var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, selectedGroupBlock) : [];
632
+ var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, editingGroupBlock) : [];
627
633
  // const groupsParentsGroups = findAllParentGroups(blockStructure, selectedGroup);
628
- console.log('bs', blockStructure);
629
- console.log('current', currentGroupBlocks);
630
634
  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: {
631
635
  marginTop: margin[1] + "px",
632
636
  marginBottom: margin[1] + "px",
@@ -155,6 +155,9 @@ export var addBulkToTarget = function (blockStructure, targetId, bulkIds) {
155
155
  if (bulkBlocks.length !== bulkIds.length) {
156
156
  throw new Error("Some bulkIds do not exist as children of the target block.");
157
157
  }
158
+ if (bulkBlocks.length === 0) {
159
+ return blockStructure;
160
+ }
158
161
  // Remove bulk blocks from target's children
159
162
  targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.id); });
160
163
  // Create the new bulkBlock
@@ -74,10 +74,12 @@ export type ReactGridLayoutProps = {
74
74
  customColWidth?: number;
75
75
  onFitToContent?: OnFitContentCallBack;
76
76
  blockStructure?: Block[];
77
- onDoubleClickGroup?: (id: string) => void;
78
- selectedGroupBlock?: string;
79
- onClickGroup?: (id: string) => void;
77
+ onDoubleClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
78
+ selectedGroupBlock?: string | null;
79
+ editingGroupBlock?: string;
80
+ onClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
80
81
  bulkIds?: string[];
82
+ onDoubleClickOutsideGroup: () => void;
81
83
  };
82
84
  export type DragOverEvent = MouseEvent & {
83
85
  nativeEvent: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.60",
3
+ "version": "0.0.61",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",