publ-echo-test 0.0.3 → 0.0.4

package/dist/lib/GridItem/GridItem.js

@@ -130,7 +130,7 @@ var GridItem = function (_a) {
         ];
         return (_jsx(Resizable, { draggableOpts: {
                 disabled: !isResizable,
-            }, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, minConstraints: minConstraints, maxConstraints: maxConstraints, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, transformScale: transformScale, resizeHandles: props.resizeHandles, handle: resizeHandle, children: child }));
+            }, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, minConstraints: minConstraints, maxConstraints: maxConstraints, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, transformScale: transformScale, resizeHandles: props.resizeHandles, handle: resizeHandle, isResizing: isResizing, children: child }));
     };
     /**
      * onDragStart event handler
@@ -290,7 +290,7 @@ var GridItem = function (_a) {
             return;
         var prevW = props.w, prevH = props.h;
         // Get new XY
-        var _b = calcWH(getPositionParams(), __assign({}, size), x, y, handle, prevW, prevH), w = _b.w, h = _b.h;
+        var _b = calcWH(getPositionParams(), 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)

package/dist/lib/Resizable/Resizable.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 import { PropsWithChildren } from "../Draggable/types";
 import { ResizableProps } from "./types";
 type Props = ResizableProps;
-declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default Resizable;

package/dist/lib/Resizable/Resizable.js

@@ -35,7 +35,7 @@ import React, { useEffect, useRef } from "react";
 import DraggableCore from "../Draggable/DraggableCore";
 import { cloneElement } from "./utils/cloneElement";
 var Resizable = function (_a) {
-    var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale"]);
+    var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing"]);
     var handleRefs = useRef({
         s: useRef(null),
         n: useRef(null),
@@ -52,38 +52,26 @@ var Resizable = function (_a) {
     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;
+    var extendedHeightRef = useRef(null);
     useEffect(function () {
-        // if (!autoResize) {
-        //   return;
-        // }
+        if (!isResizing) {
+            return;
+        }
         if (!elementRef.current) {
             return;
         }
-        var target = elementRef.current.children[0].children[0];
-        console.log(target);
+        var placeholder = document.querySelector('.placeholder');
+        if (!placeholder) {
+            return;
+        }
+        var target = placeholder.children[0].children[0];
         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);
+            extendedHeightRef.current = target.clientHeight;
         }
         else {
-            console.log('NOT overflowing');
+            extendedHeightRef.current = null;
         }
-        // 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')
-        // }
-        // }
-    });
+    }, [isResizing, children]);
     var resetData = function () {
         lastHandleRect = slack = null;
     };
@@ -213,8 +201,9 @@ var Resizable = function (_a) {
             if (axisH === "w") {
                 left = left - deltaX;
             }
-            height = elementRef.current.style.height;
-            console.log(height);
+            if (extendedHeightRef.current) {
+                height = extendedHeightRef.current;
+            }
             _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;

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

@@ -59,5 +59,6 @@ export type ResizableProps = {
     style?: CSSProperties;
     width: number;
     height: number;
+    isResizing?: boolean;
 };
 export type ResizeHandleType = ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: Ref<HTMLElement>) => ReactElement<any>);

package/package.json

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