publ-echo-test 0.0.54 → 0.0.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -198,7 +198,7 @@ var GridItem = function (_a) {
198
198
  ];
199
199
  return (_jsx(Resizable, { draggableOpts: {
200
200
  disabled: !isResizable,
201
- }, 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 }));
201
+ }, 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 }));
202
202
  };
203
203
  /**
204
204
  * onDragStart event handler
@@ -2,5 +2,5 @@ import React from "react";
2
2
  import { PropsWithChildren } from "../Draggable/types";
3
3
  import { ResizableProps } from "./types";
4
4
  type Props = ResizableProps;
5
- declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, autoResize, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
5
+ 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>>;
6
6
  export default Resizable;
@@ -32,10 +32,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
32
32
  import { createElement as _createElement } from "react";
33
33
  import { jsx as _jsx } from "react/jsx-runtime";
34
34
  import React, { useEffect, useRef } from "react";
35
- import DraggableCore from "../Draggable/DraggableCore";
35
+ import { DraggableCore } from "react-draggable";
36
36
  import { cloneElement } from "./utils/cloneElement";
37
37
  var Resizable = function (_a) {
38
- 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"]);
38
+ 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"]);
39
39
  var handleRefs = useRef({
40
40
  s: useRef(null),
41
41
  n: useRef(null),
@@ -90,8 +90,12 @@ var Resizable = function (_a) {
90
90
  minHeight.current = target.clientHeight;
91
91
  }
92
92
  var minWidthStyle = target.computedStyleMap().get('min-width');
93
- if (typeof minWidthStyle.value === 'number') {
94
- minWidth.current = minWidthStyle.value;
93
+ if (typeof minWidthStyle.value === 'number' && margin && colWidth) {
94
+ var minWidthBase = minWidthStyle.value;
95
+ var minColWidth = (minWidthBase + margin[0]) / (colWidth + margin[0]);
96
+ var minW = Math.ceil(minColWidth);
97
+ var minWidthPx = (minW * colWidth) + ((minW - 1) * margin[0]);
98
+ minWidth.current = Math.round(minWidthPx);
95
99
  }
96
100
  }, [isResizing, autoResize, children, elementRef]);
97
101
  var resetData = function () {
@@ -137,6 +141,8 @@ var Resizable = function (_a) {
137
141
  height = Math.min(maxConstraints[1], height);
138
142
  }
139
143
  slack.current = [slackW + (oldW - width), slackH + (oldH - height)];
144
+ console.log(slack.current);
145
+ console.log(oldW, width);
140
146
  return [width, height];
141
147
  };
142
148
  var checkTopLeft = function (deltaX, deltaY, top, left, width, height, handleAxis) {
@@ -233,6 +239,7 @@ var Resizable = function (_a) {
233
239
  if (axisH === "w") {
234
240
  left = left - deltaX;
235
241
  }
242
+ // console.log(width);
236
243
  _b = checkConstraints(width, height), width = _b[0], height = _b[1];
237
244
  if (autoResize && minHeight.current === height) {
238
245
  handleAxis = removeNorthHandle(handleAxis);
@@ -63,5 +63,7 @@ export type ResizableProps = {
63
63
  height: number;
64
64
  isResizing?: boolean;
65
65
  autoResize?: boolean;
66
+ colWidth?: number;
67
+ margin?: [number, number];
66
68
  };
67
69
  export type ResizeHandleType = ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: Ref<HTMLElement>) => ReactElement<any>);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.54",
3
+ "version": "0.0.56",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",
@@ -52,5 +52,8 @@
52
52
  "styled-components": "^5.3.10",
53
53
  "typescript": "^5.1.6",
54
54
  "web-vitals": "^2.1.4"
55
+ },
56
+ "dependencies": {
57
+ "react-draggable": "^4.4.6"
55
58
  }
56
59
  }