publ-echo-test 0.0.3 → 0.0.4

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.
@@ -130,7 +130,7 @@ var GridItem = function (_a) {
130
130
  ];
131
131
  return (_jsx(Resizable, { draggableOpts: {
132
132
  disabled: !isResizable,
133
- }, 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 }));
133
+ }, 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 }));
134
134
  };
135
135
  /**
136
136
  * onDragStart event handler
@@ -290,7 +290,7 @@ var GridItem = function (_a) {
290
290
  return;
291
291
  var prevW = props.w, prevH = props.h;
292
292
  // Get new XY
293
- var _b = calcWH(getPositionParams(), __assign({}, size), x, y, handle, prevW, prevH), w = _b.w, h = _b.h;
293
+ var _b = calcWH(getPositionParams(), size, x, y, handle, prevW, prevH), w = _b.w, h = _b.h;
294
294
  // minW should be at least 1
295
295
  // minW = Math.max(minW, 1);
296
296
  // maxW should be at most (cols - x)
@@ -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, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
5
+ declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, ...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, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale"]);
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"]);
39
39
  var handleRefs = useRef({
40
40
  s: useRef(null),
41
41
  n: useRef(null),
@@ -52,38 +52,26 @@ var Resizable = function (_a) {
52
52
  var slack = null;
53
53
  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"]);
54
54
  var elementRef = children.ref;
55
+ var extendedHeightRef = useRef(null);
55
56
  useEffect(function () {
56
- // if (!autoResize) {
57
- // return;
58
- // }
57
+ if (!isResizing) {
58
+ return;
59
+ }
59
60
  if (!elementRef.current) {
60
61
  return;
61
62
  }
62
- var target = elementRef.current.children[0].children[0];
63
- console.log(target);
63
+ var placeholder = document.querySelector('.placeholder');
64
+ if (!placeholder) {
65
+ return;
66
+ }
67
+ var target = placeholder.children[0].children[0];
64
68
  if (target.clientHeight > elementRef.current.clientHeight) {
65
- console.log('is overflowing');
66
- elementRef.current.style.height = target.clientHeight + 'px';
67
- console.log('useEffect', elementRef.current.style.height);
68
- // setContentHeight(target.clientHeight);
69
+ extendedHeightRef.current = target.clientHeight;
69
70
  }
70
71
  else {
71
- console.log('NOT overflowing');
72
+ extendedHeightRef.current = null;
72
73
  }
73
- // if (className?.includes('placeholder') || isResizing) {
74
- // const target = elementRef.current.children[0].children[0];
75
- // const rect = target.getBoundingClientRect();
76
- // // setContentHeight(rect.height);
77
- // // setContentWidth(rect.width);
78
- // if (target.clientHeight > elementRef.current.clientHeight) {
79
- // console.log('is overflowing')
80
- // elementRef.current.style.height = target.clientHeight + 'px';
81
- // // setContentHeight(target.clientHeight);
82
- // } else {
83
- // console.log('NOT overflowing')
84
- // }
85
- // }
86
- });
74
+ }, [isResizing, children]);
87
75
  var resetData = function () {
88
76
  lastHandleRect = slack = null;
89
77
  };
@@ -213,8 +201,9 @@ var Resizable = function (_a) {
213
201
  if (axisH === "w") {
214
202
  left = left - deltaX;
215
203
  }
216
- height = elementRef.current.style.height;
217
- console.log(height);
204
+ if (extendedHeightRef.current) {
205
+ height = extendedHeightRef.current;
206
+ }
218
207
  _b = checkConstraints(width, height), width = _b[0], height = _b[1];
219
208
  _c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
220
209
  var isDimensionsChanged = width !== props.width || height !== props.height;
@@ -59,5 +59,6 @@ export type ResizableProps = {
59
59
  style?: CSSProperties;
60
60
  width: number;
61
61
  height: number;
62
+ isResizing?: boolean;
62
63
  };
63
64
  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.3",
3
+ "version": "0.0.4",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",