publ-echo-test 0.0.20 → 0.0.22

package/dist/lib/GridItem/GridItem.js

@@ -31,19 +31,16 @@ var GridItem = 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 _l = useState(0), contentHeight = _l[0], setContentHeight = _l[1];
-    var _m = useState(0), contentWidth = _m[0], setContentWidth = _m[1];
-    var _o = useState(), resizing = _o[0], setResizing = _o[1];
-    var _p = useState(), dragging = _p[0], setDragging = _p[1];
-    var _q = useState(), dragStart = _q[0], setDragStart = _q[1];
-    var _r = useState(false), isDragging = _r[0], setIsDragging = _r[1];
-    var _s = useState(false), isResizing = _s[0], setIsResizing = _s[1];
+    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];
+    var _p = useState(false), isDragging = _p[0], setIsDragging = _p[1];
+    var _q = useState(false), isResizing = _q[0], setIsResizing = _q[1];
     var elementRef = useRef(null);
-    // const isSelected = className?.includes('react-grid-item-selected');
     var isSelected = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.classList.contains('react-grid-item-selected');
     useEffect(function () {
         var _a;
-        if (!isSelected) {
+        if (!isSelected || !autoResize) {
             return;
         }
         var targetNode = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0].children[0];
@@ -60,7 +57,7 @@ var GridItem = function (_a) {
                 var _a = calcWH(getPositionParams(), {
                     width: targetNode.clientWidth,
                     height: height,
-                }, x, y, 'e', props.w, props.h), w_1 = _a.w, h_1 = _a.h;
+                }, x, y, 'e', props.w, props.h, true), w_1 = _a.w, h_1 = _a.h;
                 var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
                 props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY);
             }
@@ -75,7 +72,7 @@ var GridItem = function (_a) {
         return function () {
             observer.disconnect();
         };
-    }, [isSelected, isDragging, isResizing, props.w, props.h, x, y]);
+    }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -168,7 +165,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, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, children: child }));
+            }, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, autoResize: autoResize, children: child }));
     };
     /**
      * onDragStart event handler
@@ -301,7 +298,6 @@ var GridItem = function (_a) {
      * @param  {Object} callbackData  an object with node and size information
      */
     var onResize = function (e, callbackData) {
-        console.log('setting resizing true');
         setIsResizing(true);
         onResizeHandler(e, callbackData, "onResize");
     };
@@ -325,7 +321,6 @@ var GridItem = function (_a) {
     var onResizeHandler = function (e, _a, handlerName) {
         var node = _a.node, size = _a.size, handle = _a.handle;
         var handler = props[handlerName];
-        console.log(handlerName);
         if (!handler)
             return;
         var prevW = props.w, prevH = props.h;

package/dist/lib/GridItem/utils/calculateUtils.d.ts

@@ -23,7 +23,7 @@ export declare function calcXY(positionParams: PositionParams, top: number, left
 export declare function calcWH(positionParams: PositionParams, { width, height }: {
     width: number;
     height: number;
-}, x: number, y: number, handleAxis?: ResizeHandleAxis, prevW?: number, prevH?: number): {
+}, x: number, y: number, handleAxis?: ResizeHandleAxis, prevW?: number, prevH?: number, shouldCeil?: boolean): {
     w: number;
     h: number;
 };

package/dist/lib/GridItem/utils/calculateUtils.js

@@ -52,13 +52,14 @@ export function calcXY(positionParams, top, left, w, h) {
     y = clamp(y, 0, maxRows - h);
     return { x: x, y: y };
 }
-export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH) {
+export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH, shouldCeil) {
     var width = _a.width, height = _a.height;
     var margin = positionParams.margin, maxRows = positionParams.maxRows, cols = positionParams.cols, rowHeight = positionParams.rowHeight;
     var colWidth = calcGridColWidth(positionParams);
     var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
-    var w = Math.round((width + margin[0]) / (colWidth + margin[0]));
-    var h = Math.round((height + margin[1]) / (rowHeightNumber + margin[1]));
+    var roundOrCeil = shouldCeil ? Math.ceil : Math.round;
+    var w = roundOrCeil((width + margin[0]) / (colWidth + margin[0]));
+    var h = roundOrCeil((height + margin[1]) / (rowHeightNumber + margin[1]));
     // // Capping
     // w = clamp(w, 0, cols - x);
     // h = clamp(h, 0, maxRows - y);

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, isResizing, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, autoResize, ...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, isResizing = _a.isResizing, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing"]);
+    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, autoResize = _a.autoResize, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize"]);
     var handleRefs = useRef({
         s: useRef(null),
         n: useRef(null),
@@ -56,6 +56,9 @@ var Resizable = function (_a) {
     var minWidth = useRef(0);
     useEffect(function () {
         var _a;
+        if (!autoResize) {
+            return;
+        }
         if (!isResizing) {
             extendedHeightRef.current = null;
             minWidth.current = 0;
@@ -76,11 +79,10 @@ var Resizable = function (_a) {
             extendedHeightRef.current = null;
         }
         var minWidthStyle = target.computedStyleMap().get('min-width');
-        console.log('minwidth Style: ', minWidthStyle);
         if (typeof minWidthStyle.value === 'number') {
             minWidth.current = minWidthStyle.value;
         }
-    }, [isResizing, children]);
+    }, [isResizing, autoResize, children, elementRef]);
     var resetData = function () {
         lastHandleRect = slack = null;
     };
@@ -200,8 +202,6 @@ 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") {
@@ -241,11 +241,7 @@ var Resizable = function (_a) {
         var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
         return React.cloneElement(handle, props);
     };
-    // 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([
+    return cloneElement(children, __assign(__assign({}, restProps), { 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/dist/lib/Resizable/types.d.ts

@@ -60,5 +60,6 @@ export type ResizableProps = {
     width: number;
     height: number;
     isResizing?: boolean;
+    autoResize?: 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.20",
+  "version": "0.0.22",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",