publ-echo-test 0.0.60 → 0.0.61

package/dist/lib/Draggable/DraggableCore.js

@@ -260,7 +260,6 @@ var DraggableCore = function (_a) {
         onMouseDown: handleMouseDown,
         onMouseUp: handleMouseUp,
         onTouchEnd: handleTouchEnd,
-        onDoubleClick: props.onDoubleClick,
         ref: (_b = props.nodeRef) !== null && _b !== void 0 ? _b : draggableCoreRef,
     });
 };

package/dist/lib/Draggable/types.d.ts

@@ -23,8 +23,6 @@ export type DraggableCoreDefaultProps = {
     onDrag?: DraggableEventHandler | Function;
     onStop?: DraggableEventHandler | Function;
     onMouseDown?: (e: MouseEvent) => void;
-    onDoubleClick?: () => void;
-    onClick?: () => void;
     scale?: number;
     cancel?: string;
     children: ReactElement<any>;

package/dist/lib/GridItem/GridItem.js

@@ -248,6 +248,7 @@ var GridItem = function (_a) {
                 var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
                 var bottomBoundary = offsetParent.clientHeight -
                     calcGridItemWHPx(h, rowHeightNumber, margin[1]);
+                console.log('bb', bottomBoundary);
                 top = clamp(top, 0, bottomBoundary);
                 var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
                 left = clamp(left, 0, rightBoundary);

package/dist/lib/GridItem/GroupItem.d.ts

@@ -1,9 +1,5 @@
 import React from "react";
 import { GridItemProps } from "./types";
 import { PropsWithChildren } from "../types";
-type GroupItemProp = {
-    onDoubleClick: (id: string) => void;
-    onClick: (id: string) => void;
-};
-declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps & GroupItemProp>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default GroupItem;

package/dist/lib/GridItem/GroupItem.js

@@ -30,7 +30,7 @@ import { Resizable } from "../Resizable";
 var GroupItem = function (_a) {
     var _b;
     var children = _a.children, props = __rest(_a, ["children"]);
-    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;
+    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;
     var _l = useState(), resizing = _l[0], setResizing = _l[1];
     var _m = useState(), dragging = _m[0], setDragging = _m[1];
     var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
@@ -135,12 +135,6 @@ var GroupItem = function (_a) {
     //     });
     //   }
     // };
-    var handleDoubleClick = function () {
-        onDoubleClick(props.i);
-    };
-    var handleClick = function () {
-        onClick(props.i);
-    };
     var getPositionParams = function (prop) {
         if (prop === void 0) { prop = props; }
         return {
@@ -177,7 +171,7 @@ var GroupItem = function (_a) {
      * @return {Element}          Child wrapped in Draggable.
      */
     var mixinDraggable = function (child, isDraggable) {
-        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 }));
+        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 }));
     };
     /**
      * Mix a Resizable instance into a child.
@@ -254,6 +248,7 @@ var GroupItem = function (_a) {
                 var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
                 var bottomBoundary = offsetParent.clientHeight -
                     calcGridItemWHPx(h, rowHeightNumber, margin[1]);
+                console.log('bb', bottomBoundary);
                 top = clamp(top, 0, bottomBoundary);
                 var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
                 left = clamp(left, 0, rightBoundary);
@@ -385,17 +380,13 @@ var GroupItem = function (_a) {
         var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
         handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
     };
-    var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
-        dragging: dragging,
-        resizing: resizing,
-    }, colWidth);
+    var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {}, colWidth);
     var child = React.Children.only(children);
-    // console.log(child, className)
     var newChild = React.cloneElement(child, {
         key: i,
         ref: elementRef,
         'data-grid-id': i,
-        className: classNames("react-grid-item", child.props.className, className, {
+        className: classNames("react-group-item", child.props.className, className, {
             static: props.static,
             isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
             resizing: Boolean(resizing),

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -39,6 +39,7 @@ import GridItem from "../GridItem/GridItem";
 import isEqual from "../../external-lib/lodash.isEqual";
 import { findAllChildrenButGroup, findAllChildrenIds, findChildrenIds, findGroupBlocks, getBlockType } from "./group";
 import GroupItem from "../GridItem/GroupItem";
+import OutsideClickHandler from "../GridItem/OutsideClickHandler";
 var layoutClassName = "react-grid-layout";
 var ReactGridLayout = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
@@ -48,7 +49,7 @@ var ReactGridLayout = function (_a) {
         w: 1,
     } : _w, // TODO fix
     _x = props.resizeHandles, // TODO fix
-    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;
+    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;
     var _1 = useState(), activeDrag = _1[0], setActiveDrag = _1[1];
     var _2 = useState(), oldDragItem = _2[0], setOldDragItem = _2[1];
     var _3 = useState(), oldLayout = _3[0], setOldLayout = _3[1];
@@ -57,7 +58,7 @@ var ReactGridLayout = function (_a) {
     var _6 = useState(), droppingPosition = _6[0], setDroppingPosition = _6[1];
     var _7 = useState(false), isMounted = _7[0], setIsMounted = _7[1];
     // const [selectedGroup, setSelectedGroup] = useState<string>('1');
-    var editableItems = blockStructure ? findChildrenIds(blockStructure, selectedGroupBlock) : [];
+    var editableItems = blockStructure ? findChildrenIds(blockStructure, editingGroupBlock) : [];
     var _8 = useState([]), oldGroupChildren = _8[0], setOldGroupChildren = _8[1];
     var _9 = useState(function () {
         return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
@@ -201,6 +202,7 @@ var ReactGridLayout = function (_a) {
         var _b;
         var e = _a.e, node = _a.node;
         var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
+        console.log(y);
         if (!l)
             return;
         if (!oldDragItem) {
@@ -578,11 +580,11 @@ var ReactGridLayout = function (_a) {
         if (!groupItem) {
             return _jsx(_Fragment, {});
         }
-        var isEditingGroup = block.id === selectedGroupBlock;
+        var isEditingGroup = block.id === editingGroupBlock;
         var type = getBlockType(block.id);
         var z = (function () {
             if (isEditingGroup && type === 'GROUP') {
-                return 1000 + groupItem.z;
+                return 1000;
             }
             if (type === 'GROUP') {
                 return 1000;
@@ -592,16 +594,13 @@ var ReactGridLayout = function (_a) {
             }
             return 1000;
         })();
-        var handleClick = function (id) {
-            onClickGroup && onClickGroup(id);
+        var handleClick = function (e) {
+            onClickGroup && onClickGroup(e, block.id, type);
         };
-        var handleDoubleClick = function (id) {
-            if (type === 'GROUP') {
-                onDoubleClickGroup && onDoubleClickGroup(id);
-            }
+        var handleDoubleClick = function (e) {
+            onDoubleClickGroup && onDoubleClickGroup(e, block.id, type);
         };
-        return (
-        // <OutsideClickHandler  onOutsideClick={() => {
+        // () => {
         //   if (isEditingGroup) {
         //    const parent = findParentGroupByGroupId(blockStructure, block.id)
         //    parent && setSelectedGroup(parent)
@@ -609,24 +608,29 @@ var ReactGridLayout = function (_a) {
         //     setSelectedGroup('1')
         //    }
         //   }
-        // }}>
-        _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(), 
-            // 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: false, children: _jsx("div", {}) }, block.id)
-        // </OutsideClickHandler>
-        );
+        // }
+        var classname = (function () {
+            if (editingGroupBlock === block.id) {
+                return 'group editing';
+            }
+            if (selectedGroupBlock === block.id) {
+                return 'group selected';
+            }
+            return type.toLowerCase();
+        })();
+        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(), 
+                // 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: false, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.id) }));
     };
-    var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, selectedGroupBlock) : [];
+    var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, editingGroupBlock) : [];
     // const groupsParentsGroups = findAllParentGroups(blockStructure, selectedGroup);
-    console.log('bs', blockStructure);
-    console.log('current', currentGroupBlocks);
     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: {
                     marginTop: margin[1] + "px",
                     marginBottom: margin[1] + "px",

package/dist/lib/GridLayoutEditor/group.js

@@ -155,6 +155,9 @@ export var addBulkToTarget = function (blockStructure, targetId, bulkIds) {
     if (bulkBlocks.length !== bulkIds.length) {
         throw new Error("Some bulkIds do not exist as children of the target block.");
     }
+    if (bulkBlocks.length === 0) {
+        return blockStructure;
+    }
     // Remove bulk blocks from target's children
     targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.id); });
     // Create the new bulkBlock

package/dist/lib/GridLayoutEditor/types.d.ts

@@ -74,10 +74,12 @@ export type ReactGridLayoutProps = {
     customColWidth?: number;
     onFitToContent?: OnFitContentCallBack;
     blockStructure?: Block[];
-    onDoubleClickGroup?: (id: string) => void;
-    selectedGroupBlock?: string;
-    onClickGroup?: (id: string) => void;
+    onDoubleClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
+    selectedGroupBlock?: string | null;
+    editingGroupBlock?: string;
+    onClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
     bulkIds?: string[];
+    onDoubleClickOutsideGroup: () => void;
 };
 export type DragOverEvent = MouseEvent & {
     nativeEvent: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "publ-echo-test",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",