publ-echo-test 0.0.21 → 0.0.23

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.
@@ -37,11 +37,10 @@ var GridItem = function (_a) {
37
37
  var _p = useState(false), isDragging = _p[0], setIsDragging = _p[1];
38
38
  var _q = useState(false), isResizing = _q[0], setIsResizing = _q[1];
39
39
  var elementRef = useRef(null);
40
- // const isSelected = className?.includes('react-grid-item-selected');
41
40
  var isSelected = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.classList.contains('react-grid-item-selected');
42
41
  useEffect(function () {
43
42
  var _a;
44
- if (!isSelected) {
43
+ if (!isSelected || !autoResize) {
45
44
  return;
46
45
  }
47
46
  var targetNode = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0].children[0];
@@ -52,11 +51,13 @@ var GridItem = function (_a) {
52
51
  var callback = function (mutationsList, observer) {
53
52
  for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
54
53
  var mutation = mutationsList_1[_i];
55
- var height = mutation.type === 'characterData' ? mutation.target.parentNode.clientHeight : mutation.target.clientHeight;
54
+ var isCharacterChanged = mutation.type === 'characterData';
55
+ var height = isCharacterChanged ? mutation.target.parentNode.clientHeight : mutation.target.clientHeight;
56
+ var width = isCharacterChanged ? elementRef.current.clientHeight : targetNode.clientWidth;
56
57
  var prevW = props.w;
57
58
  var prevH = props.h;
58
59
  var _a = calcWH(getPositionParams(), {
59
- width: targetNode.clientWidth,
60
+ width: width,
60
61
  height: height,
61
62
  }, x, y, 'e', props.w, props.h, true), w_1 = _a.w, h_1 = _a.h;
62
63
  var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
@@ -73,7 +74,7 @@ var GridItem = function (_a) {
73
74
  return function () {
74
75
  observer.disconnect();
75
76
  };
76
- }, [isSelected, isDragging, isResizing, props.w, props.h, x, y]);
77
+ }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
77
78
  // const moveDroppingItem = (prevProps: GridItemProps) => {
78
79
  // const { droppingPosition } = props;
79
80
  // if (!droppingPosition) return;
@@ -166,7 +167,7 @@ var GridItem = function (_a) {
166
167
  ];
167
168
  return (_jsx(Resizable, { draggableOpts: {
168
169
  disabled: !isResizable,
169
- }, 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 }));
170
+ }, 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 }));
170
171
  };
171
172
  /**
172
173
  * onDragStart event handler
@@ -299,7 +300,6 @@ var GridItem = function (_a) {
299
300
  * @param {Object} callbackData an object with node and size information
300
301
  */
301
302
  var onResize = function (e, callbackData) {
302
- console.log('setting resizing true');
303
303
  setIsResizing(true);
304
304
  onResizeHandler(e, callbackData, "onResize");
305
305
  };
@@ -323,7 +323,6 @@ var GridItem = function (_a) {
323
323
  var onResizeHandler = function (e, _a, handlerName) {
324
324
  var node = _a.node, size = _a.size, handle = _a.handle;
325
325
  var handler = props[handlerName];
326
- console.log(handlerName);
327
326
  if (!handler)
328
327
  return;
329
328
  var prevW = props.w, prevH = props.h;
@@ -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, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
5
+ declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, autoResize, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
6
6
  export default Resizable;
@@ -35,7 +35,7 @@ import React, { useEffect, useRef } from "react";
35
35
  import DraggableCore from "../Draggable/DraggableCore";
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, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing"]);
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"]);
39
39
  var handleRefs = useRef({
40
40
  s: useRef(null),
41
41
  n: useRef(null),
@@ -56,6 +56,9 @@ var Resizable = function (_a) {
56
56
  var minWidth = useRef(0);
57
57
  useEffect(function () {
58
58
  var _a;
59
+ if (!autoResize) {
60
+ return;
61
+ }
59
62
  if (!isResizing) {
60
63
  extendedHeightRef.current = null;
61
64
  minWidth.current = 0;
@@ -76,11 +79,10 @@ var Resizable = function (_a) {
76
79
  extendedHeightRef.current = null;
77
80
  }
78
81
  var minWidthStyle = target.computedStyleMap().get('min-width');
79
- console.log('minwidth Style: ', minWidthStyle);
80
82
  if (typeof minWidthStyle.value === 'number') {
81
83
  minWidth.current = minWidthStyle.value;
82
84
  }
83
- }, [isResizing, children]);
85
+ }, [isResizing, autoResize, children, elementRef]);
84
86
  var resetData = function () {
85
87
  lastHandleRect = slack = null;
86
88
  };
@@ -200,8 +202,6 @@ var Resizable = function (_a) {
200
202
  }
201
203
  var width = props.width + (canDragX ? deltaX / transformScale : 0);
202
204
  var height = props.height + (canDragY ? deltaY / transformScale : 0);
203
- // console.log('height from Resize:', height)
204
- // console.log('node', node)
205
205
  var left = (_h = props === null || props === void 0 ? void 0 : props.left) !== null && _h !== void 0 ? _h : 0;
206
206
  var top = (_j = props === null || props === void 0 ? void 0 : props.top) !== null && _j !== void 0 ? _j : 0;
207
207
  if (axisV === "n") {
@@ -241,11 +241,7 @@ var Resizable = function (_a) {
241
241
  var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
242
242
  return React.cloneElement(handle, props);
243
243
  };
244
- // const childRefs = useRef(children.props.children.map(() => React.createRef()));
245
- // console.log(childRefs)
246
- return cloneElement(children, __assign(__assign({}, restProps), {
247
- // ref: null,
248
- className: "".concat(className ? "".concat(className, " ") : "", "react-resizable"), children: __spreadArray([
244
+ return cloneElement(children, __assign(__assign({}, restProps), { className: "".concat(className ? "".concat(className, " ") : "", "react-resizable"), children: __spreadArray([
249
245
  // ...children.props.children,
250
246
  React.Children.map(children.props.children, function (child) { return child; })
251
247
  ], resizeHandles.map(function (handleAxis) {
@@ -60,5 +60,6 @@ export type ResizableProps = {
60
60
  width: number;
61
61
  height: number;
62
62
  isResizing?: boolean;
63
+ autoResize?: boolean;
63
64
  };
64
65
  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.21",
3
+ "version": "0.0.23",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",