publ-echo-test 0.0.54 → 0.0.56

package/dist/lib/GridItem/GridItem.js

@@ -198,7 +198,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, autoResize: autoResize, 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, colWidth: colWidth, margin: props.margin, children: child }));
     };
     /**
      * onDragStart event handler

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, autoResize, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, autoResize, colWidth, margin, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default Resizable;

package/dist/lib/Resizable/Resizable.js

@@ -32,10 +32,10 @@ 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, { useEffect, useRef } from "react";
-import DraggableCore from "../Draggable/DraggableCore";
+import { DraggableCore } from "react-draggable";
 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, autoResize = _a.autoResize, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize"]);
+    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, colWidth = _a.colWidth, margin = _a.margin, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize", "colWidth", "margin"]);
     var handleRefs = useRef({
         s: useRef(null),
         n: useRef(null),
@@ -90,8 +90,12 @@ var Resizable = function (_a) {
             minHeight.current = target.clientHeight;
         }
         var minWidthStyle = target.computedStyleMap().get('min-width');
-        if (typeof minWidthStyle.value === 'number') {
-            minWidth.current = minWidthStyle.value;
+        if (typeof minWidthStyle.value === 'number' && margin && colWidth) {
+            var minWidthBase = minWidthStyle.value;
+            var minColWidth = (minWidthBase + margin[0]) / (colWidth + margin[0]);
+            var minW = Math.ceil(minColWidth);
+            var minWidthPx = (minW * colWidth) + ((minW - 1) * margin[0]);
+            minWidth.current = Math.round(minWidthPx);
         }
     }, [isResizing, autoResize, children, elementRef]);
     var resetData = function () {
@@ -137,6 +141,8 @@ var Resizable = function (_a) {
             height = Math.min(maxConstraints[1], height);
         }
         slack.current = [slackW + (oldW - width), slackH + (oldH - height)];
+        console.log(slack.current);
+        console.log(oldW, width);
         return [width, height];
     };
     var checkTopLeft = function (deltaX, deltaY, top, left, width, height, handleAxis) {
@@ -233,6 +239,7 @@ var Resizable = function (_a) {
             if (axisH === "w") {
                 left = left - deltaX;
             }
+            // console.log(width);
             _b = checkConstraints(width, height), width = _b[0], height = _b[1];
             if (autoResize && minHeight.current === height) {
                 handleAxis = removeNorthHandle(handleAxis);

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

@@ -63,5 +63,7 @@ export type ResizableProps = {
     height: number;
     isResizing?: boolean;
     autoResize?: boolean;
+    colWidth?: number;
+    margin?: [number, number];
 };
 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.54",
+  "version": "0.0.56",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",
@@ -52,5 +52,8 @@
     "styled-components": "^5.3.10",
     "typescript": "^5.1.6",
     "web-vitals": "^2.1.4"
+  },
+  "dependencies": {
+    "react-draggable": "^4.4.6"
   }
 }