publ-echo-test 0.0.1 → 0.0.3

package/dist/lib/Draggable/DraggableCore.js

@@ -93,6 +93,11 @@ var DraggableCore = function (_a) {
         var _a, _b;
         return (_b = (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : draggableCoreRef === null || draggableCoreRef === void 0 ? void 0 : draggableCoreRef.current;
     };
+    var findChildrenNode = function () {
+        var _a;
+        console.log(props.nodeRef);
+        return (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current;
+    };
     // NOTE - event 발생 시 {x, y} position을 가져오는 함수
     var getControlPosition = function (e, touchIdentifier) {
         var _a;
@@ -182,6 +187,7 @@ var DraggableCore = function (_a) {
         setDraggableCoreState(function (prev) { return (__assign(__assign({}, prev), { dragging: true, lastX: x, lastY: y })); });
     }
     function handleDrag(e) {
+        // console.log(e.currentTarget)
         var _a;
         var position = getControlPosition(e, draggableCoreState.touchIdentifier);
         if (!position)
@@ -198,6 +204,7 @@ var DraggableCore = function (_a) {
         }
         var coreEvent = createCoreData(x, y);
         var thisNode = findDOMNode();
+        // const children = findChildrenNode()
         if (!coreEvent || !thisNode)
             return;
         var shouldUpdate = onDrag(e, coreEvent, thisNode);

package/dist/lib/GridItem/GridItem.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { DraggableCore } from "../Draggable";
 import classNames from "../../external-lib/classnames";
 import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from "./utils/calculateUtils";
@@ -29,7 +29,7 @@ import { perc, setTopLeft, setTransform, } from "../GridLayoutEditor/utils/rende
 import { Resizable } from "../Resizable";
 var GridItem = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _b = props.transformScale, transformScale = _b === void 0 ? 1 : _b, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _c = props.cancel, cancel = _c === void 0 ? "" : _c, _d = props.handle, handle = _d === void 0 ? "" : _d, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _e = props.minH, minH = _e === void 0 ? 1 : _e, _f = props.minW, minW = _f === void 0 ? 1 : _f, _g = props.maxH, maxH = _g === void 0 ? Infinity : _g, _h = props.maxW, maxW = _h === void 0 ? Infinity : _h, i = props.i, _j = props.isHiddenVisibility, isHiddenVisibility = _j === void 0 ? false : _j, containerWidth = props.containerWidth, customColWidth = props.customColWidth;
+    var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _b = props.transformScale, transformScale = _b === void 0 ? 1 : _b, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _c = props.cancel, cancel = _c === void 0 ? "" : _c, _d = props.handle, handle = _d === void 0 ? "" : _d, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _e = props.minH, minH = _e === void 0 ? 1 : _e, _f = props.minW, minW = _f === void 0 ? 1 : _f, _g = props.maxH, maxH = _g === void 0 ? Infinity : _g, _h = props.maxW, maxW = _h === void 0 ? Infinity : _h, i = props.i, _j = props.isHiddenVisibility, isHiddenVisibility = _j === void 0 ? false : _j, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize;
     var _k = useState(0), contentHeight = _k[0], setContentHeight = _k[1];
     var _l = useState(0), contentWidth = _l[0], setContentWidth = _l[1];
     var _m = useState(), resizing = _m[0], setResizing = _m[1];
@@ -38,26 +38,6 @@ var GridItem = function (_a) {
     var _q = useState(false), isDragging = _q[0], setIsDragging = _q[1];
     var _r = useState(false), isResizing = _r[0], setIsResizing = _r[1];
     var elementRef = useRef(null);
-    useEffect(function () {
-        if (!elementRef.current) {
-            return;
-        }
-        if ((className === null || className === void 0 ? void 0 : className.includes('placeholder')) || isResizing) {
-            if (i === 'whats-app-8') {
-                var target = elementRef.current.children[0].children[0];
-                var rect = target.getBoundingClientRect();
-                setContentHeight(rect.height);
-                setContentWidth(rect.width);
-                if (target.clientHeight > elementRef.current.clientHeight) {
-                    console.log('is overflowing');
-                    elementRef.current.style.height = target.clientHeight + 'px';
-                }
-                else {
-                    console.log('NOT overflowing');
-                }
-            }
-        }
-    }, [children, isResizing]);
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -304,14 +284,13 @@ var GridItem = function (_a) {
      * @return {Function}           Handler function.
      */
     var onResizeHandler = function (e, _a, handlerName) {
-        var _b;
         var node = _a.node, size = _a.size, handle = _a.handle;
         var handler = props[handlerName];
         if (!handler)
             return;
         var prevW = props.w, prevH = props.h;
         // Get new XY
-        var _c = calcWH(getPositionParams(), __assign(__assign({}, size), { height: (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight }), x, y, handle, prevW, prevH), w = _c.w, h = _c.h;
+        var _b = calcWH(getPositionParams(), __assign({}, size), x, y, handle, prevW, prevH), w = _b.w, h = _b.h;
         // minW should be at least 1
         // minW = Math.max(minW, 1);
         // maxW should be at most (cols - x)
@@ -319,7 +298,7 @@ var GridItem = function (_a) {
         w = clamp(w, minW, maxW);
         h = clamp(h, minH, maxH);
         setResizing(handlerName === "onResizeStop" ? undefined : size);
-        var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
+        var _c = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _c.newX, newY = _c.newY;
         handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
     };
     var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -355,7 +355,7 @@ var ReactGridLayout = function (_a) {
         if (!item) {
             return null;
         }
-        return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: activeDrag.z || 0, i: activeDrag.i, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, autoResize: true, children: item && item }));
+        return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: activeDrag.z || 0, i: activeDrag.i, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, autoResize: !!l.autoResize, children: item && item }));
     };
     /**
      * Given a grid item, set its style attributes & surround in a <Draggable>.
@@ -378,7 +378,7 @@ var ReactGridLayout = function (_a) {
             : !l.static && isResizable;
         var resizeHandlesOptions = l.resizeHandles || resizeHandles;
         var bounded = draggable && isBounded && l.isBounded !== false;
-        return (_jsx(GridItem, { 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, isDraggable: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, 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: true, children: child }, l.i));
+        return (_jsx(GridItem, { 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, isDraggable: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, 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));
     };
     var onDragOverHandler = function (e) {
         var _a;

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

@@ -20,6 +20,7 @@ export type LayoutItem = {
     resizeHandles?: ResizeHandleAxis[];
     isBounded?: boolean;
     groupLayouts?: LayoutItem[];
+    autoResize?: boolean;
 };
 export type Layout = LayoutItem[];
 export type DroppedEvent = {

package/dist/lib/Resizable/Resizable.js

@@ -31,7 +31,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import DraggableCore from "../Draggable/DraggableCore";
 import { cloneElement } from "./utils/cloneElement";
 var Resizable = function (_a) {
@@ -51,6 +51,39 @@ var Resizable = function (_a) {
     var lastHandleRect = null;
     var slack = null;
     var className = props.className, draggableOpts = props.draggableOpts, width = props.width, height = props.height, handle = props.handle, onResize = props.onResize, onResizeStop = props.onResizeStop, onResizeStart = props.onResizeStart, restProps = __rest(props, ["className", "draggableOpts", "width", "height", "handle", "onResize", "onResizeStop", "onResizeStart"]);
+    var elementRef = children.ref;
+    useEffect(function () {
+        // if (!autoResize) {
+        //   return;
+        // }
+        if (!elementRef.current) {
+            return;
+        }
+        var target = elementRef.current.children[0].children[0];
+        console.log(target);
+        if (target.clientHeight > elementRef.current.clientHeight) {
+            console.log('is overflowing');
+            elementRef.current.style.height = target.clientHeight + 'px';
+            console.log('useEffect', elementRef.current.style.height);
+            // setContentHeight(target.clientHeight);
+        }
+        else {
+            console.log('NOT overflowing');
+        }
+        // if (className?.includes('placeholder') || isResizing) {
+        //     const target  = elementRef.current.children[0].children[0];
+        //     const rect = target.getBoundingClientRect();
+        //     // setContentHeight(rect.height);
+        //     // setContentWidth(rect.width);
+        // if (target.clientHeight > elementRef.current.clientHeight) {
+        //   console.log('is overflowing')
+        //   elementRef.current.style.height = target.clientHeight + 'px';
+        //   // setContentHeight(target.clientHeight);
+        // } else {
+        //   console.log('NOT overflowing')
+        // }
+        // }
+    });
     var resetData = function () {
         lastHandleRect = slack = null;
     };
@@ -170,6 +203,8 @@ var Resizable = function (_a) {
             }
             var width = props.width + (canDragX ? deltaX / transformScale : 0);
             var height = props.height + (canDragY ? deltaY / transformScale : 0);
+            // console.log('height from Resize:', height)
+            // console.log('node', node)
             var left = (_h = props === null || props === void 0 ? void 0 : props.left) !== null && _h !== void 0 ? _h : 0;
             var top = (_j = props === null || props === void 0 ? void 0 : props.top) !== null && _j !== void 0 ? _j : 0;
             if (axisV === "n") {
@@ -178,6 +213,8 @@ var Resizable = function (_a) {
             if (axisH === "w") {
                 left = left - deltaX;
             }
+            height = elementRef.current.style.height;
+            console.log(height);
             _b = checkConstraints(width, height), width = _b[0], height = _b[1];
             _c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
             var isDimensionsChanged = width !== props.width || height !== props.height;
@@ -204,7 +241,11 @@ var Resizable = function (_a) {
         var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
         return React.cloneElement(handle, props);
     };
-    return cloneElement(children, __assign(__assign({}, restProps), { className: "".concat(className ? "".concat(className, " ") : "", "react-resizable"), children: __spreadArray([
+    // const childRefs = useRef(children.props.children.map(() => React.createRef()));
+    // console.log(childRefs)
+    return cloneElement(children, __assign(__assign({}, restProps), { 
+        // ref: null,
+        className: "".concat(className ? "".concat(className, " ") : "", "react-resizable"), children: __spreadArray([
             // ...children.props.children,
             React.Children.map(children.props.children, function (child) { return child; })
         ], resizeHandles.map(function (handleAxis) {

package/package.json

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