publ-echo-test 0.0.106 → 0.0.108

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { GridItemProps } from "./types";
 import { PropsWithChildren } from "../types";
-declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps & {
+    onContextGroup: (e: React.MouseEvent) => void;
+}>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default GroupItem;

package/dist/lib/GridItem/GroupItem.js

@@ -26,11 +26,10 @@ import { DraggableCore } from "../Draggable";
 import classNames from "../../external-lib/classnames";
 import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from "./utils/calculateUtils";
 import { perc, setTopLeft, setTransform, } from "../GridLayoutEditor/utils/renderHelpers";
-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;
+    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, onContextGroup = props.onContextGroup;
     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];
@@ -173,33 +172,58 @@ var GroupItem = function (_a) {
     var mixinDraggable = function (child, isDraggable) {
         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.
-     * @param  {Element} child    Child element.
-     * @param  {Object} position  Position object (pixel values)
-     * @return {Element}          Child wrapped in Resizable.
-     */
-    var mixinResizable = function (child, position, isResizable) {
-        var positionParams = getPositionParams();
-        // const maxWidth = calcGridItemPosition(
-        //   positionParams,
-        //   x,
-        //   y,
-        //   z,
-        //   cols - x, // TODO - 수정 필요
-        //   h
-        // ).width;
-        var mins = calcGridItemPosition(positionParams, x, y, z, minW, minH);
-        var maxes = calcGridItemPosition(positionParams, x, y, z, maxW, maxH);
-        var minConstraints = [mins.width, mins.height];
-        var maxConstraints = [
-            Math.min(maxes.width, containerWidth),
-            Math.min(maxes.height, Infinity),
-        ];
-        return (_jsx(Resizable, { draggableOpts: {
-                disabled: !isResizable,
-            }, className: "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, isResizing: isResizing, autoResize: autoResize, colWidth: colWidth, margin: props.margin, children: child }));
-    };
+    // /**
+    //  * Mix a Resizable instance into a child.
+    //  * @param  {Element} child    Child element.
+    //  * @param  {Object} position  Position object (pixel values)
+    //  * @return {Element}          Child wrapped in Resizable.
+    //  */
+    // const mixinResizable = (
+    //   child: ReactElement<any>,
+    //   position: Position,
+    //   isResizable: boolean
+    // ): ReactElement<any> => {
+    //   const positionParams = getPositionParams();
+    //   // const maxWidth = calcGridItemPosition(
+    //   //   positionParams,
+    //   //   x,
+    //   //   y,
+    //   //   z,
+    //   //   cols - x, // TODO - 수정 필요
+    //   //   h
+    //   // ).width;
+    //   const mins = calcGridItemPosition(positionParams, x, y, z, minW, minH);
+    //   const maxes = calcGridItemPosition(positionParams, x, y, z, maxW, maxH);
+    //   const minConstraints = [mins.width, mins.height] as [number, number];
+    //   const maxConstraints = [
+    //     Math.min(maxes.width, containerWidth),
+    //     Math.min(maxes.height, Infinity),
+    //   ] as [number, number];
+    //   return (
+    //     <Resizable
+    //       draggableOpts={{
+    //         disabled: !isResizable,
+    //       }}
+    //       className={"react-resizable-hide"}
+    //       width={position.width}
+    //       height={position.height}
+    //       top={position.top}
+    //       left={position.left}
+    //       onResizeStop={onResizeStop}
+    //       onResizeStart={onResizeStart}
+    //       onResize={onResize}
+    //       minConstraints={minConstraints}
+    //       maxConstraints={maxConstraints}
+    //       transformScale={transformScale}
+    //       isResizing={isResizing}
+    //       autoResize={autoResize}
+    //       colWidth={colWidth}
+    //       margin={props.margin}
+    //     >
+    //       {child}
+    //     </Resizable>
+    //   );
+    // };
     /**
      * onDragStart event handler
      * @param  {Event}  e             event data
@@ -397,8 +421,11 @@ var GroupItem = function (_a) {
             cssTransforms: useCSSTransforms,
         }),
         style: __assign(__assign(__assign({}, props.style), child.props.style), createStyle(pos)),
+        onContextMenu: function (e) {
+            onContextGroup(e);
+        },
     });
-    newChild = mixinResizable(newChild, pos, isResizable);
+    // newChild = mixinResizable(newChild, pos, isResizable);
     newChild = mixinDraggable(newChild, isDraggable);
     return newChild;
 };

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -679,6 +679,9 @@ var ReactGridLayout = function (_a) {
         var handleDoubleClick = function (e) {
             onDoubleClickGroup && onDoubleClickGroup(e, block.blockId, type);
         };
+        var handleClickContextGroup = function (e) {
+            (props === null || props === void 0 ? void 0 : props.onContextGroup) && props.onContextGroup(e, block.blockId, isEditingGroup);
+        };
         return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classNames({
                     'bulk-child-item': isInBulk,
                     'grid-bulk-block': block.blockId === 'BULK',
@@ -693,7 +696,7 @@ var ReactGridLayout = function (_a) {
                 // droppingPosition={isDroppingItem ? droppingPosition : undefined}
                 // resizeHandles={resizeHandlesOptions}
                 // resizeHandle={resizeHandle}
-                isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.blockId) }));
+                isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, onContextGroup: handleClickContextGroup, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.blockId) }));
     };
     var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, editingGroupBlock) : [];
     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: {

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

@@ -86,6 +86,7 @@ export type ReactGridLayoutProps = {
     onClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
     bulkIds?: string[];
     onDoubleClickOutsideGroup: () => void;
+    onContextGroup?: (e: React.MouseEvent, blockId: string, isEditingGroup: boolean) => void;
 };
 export type DragOverEvent = MouseEvent & {
     nativeEvent: {

package/package.json

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