publ-echo-test 0.0.1 → 0.0.3

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.
@@ -93,6 +93,11 @@ var DraggableCore = function (_a) {
93
93
  var _a, _b;
94
94
  return (_b = (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : draggableCoreRef === null || draggableCoreRef === void 0 ? void 0 : draggableCoreRef.current;
95
95
  };
96
+ var findChildrenNode = function () {
97
+ var _a;
98
+ console.log(props.nodeRef);
99
+ return (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current;
100
+ };
96
101
  // NOTE - event 발생 시 {x, y} position을 가져오는 함수
97
102
  var getControlPosition = function (e, touchIdentifier) {
98
103
  var _a;
@@ -182,6 +187,7 @@ var DraggableCore = function (_a) {
182
187
  setDraggableCoreState(function (prev) { return (__assign(__assign({}, prev), { dragging: true, lastX: x, lastY: y })); });
183
188
  }
184
189
  function handleDrag(e) {
190
+ // console.log(e.currentTarget)
185
191
  var _a;
186
192
  var position = getControlPosition(e, draggableCoreState.touchIdentifier);
187
193
  if (!position)
@@ -198,6 +204,7 @@ var DraggableCore = function (_a) {
198
204
  }
199
205
  var coreEvent = createCoreData(x, y);
200
206
  var thisNode = findDOMNode();
207
+ // const children = findChildrenNode()
201
208
  if (!coreEvent || !thisNode)
202
209
  return;
203
210
  var shouldUpdate = onDrag(e, coreEvent, thisNode);
@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
- import React, { useEffect, useRef, useState } from "react";
24
+ import React, { useRef, useState } from "react";
25
25
  import { DraggableCore } from "../Draggable";
26
26
  import classNames from "../../external-lib/classnames";
27
27
  import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from "./utils/calculateUtils";
@@ -29,7 +29,7 @@ import { perc, setTopLeft, setTransform, } from "../GridLayoutEditor/utils/rende
29
29
  import { Resizable } from "../Resizable";
30
30
  var GridItem = function (_a) {
31
31
  var children = _a.children, props = __rest(_a, ["children"]);
32
- var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _b = props.transformScale, transformScale = _b === void 0 ? 1 : _b, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _c = props.cancel, cancel = _c === void 0 ? "" : _c, _d = props.handle, handle = _d === void 0 ? "" : _d, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _e = props.minH, minH = _e === void 0 ? 1 : _e, _f = props.minW, minW = _f === void 0 ? 1 : _f, _g = props.maxH, maxH = _g === void 0 ? Infinity : _g, _h = props.maxW, maxW = _h === void 0 ? Infinity : _h, i = props.i, _j = props.isHiddenVisibility, isHiddenVisibility = _j === void 0 ? false : _j, containerWidth = props.containerWidth, customColWidth = props.customColWidth;
32
+ var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _b = props.transformScale, transformScale = _b === void 0 ? 1 : _b, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _c = props.cancel, cancel = _c === void 0 ? "" : _c, _d = props.handle, handle = _d === void 0 ? "" : _d, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _e = props.minH, minH = _e === void 0 ? 1 : _e, _f = props.minW, minW = _f === void 0 ? 1 : _f, _g = props.maxH, maxH = _g === void 0 ? Infinity : _g, _h = props.maxW, maxW = _h === void 0 ? Infinity : _h, i = props.i, _j = props.isHiddenVisibility, isHiddenVisibility = _j === void 0 ? false : _j, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize;
33
33
  var _k = useState(0), contentHeight = _k[0], setContentHeight = _k[1];
34
34
  var _l = useState(0), contentWidth = _l[0], setContentWidth = _l[1];
35
35
  var _m = useState(), resizing = _m[0], setResizing = _m[1];
@@ -38,26 +38,6 @@ var GridItem = function (_a) {
38
38
  var _q = useState(false), isDragging = _q[0], setIsDragging = _q[1];
39
39
  var _r = useState(false), isResizing = _r[0], setIsResizing = _r[1];
40
40
  var elementRef = useRef(null);
41
- useEffect(function () {
42
- if (!elementRef.current) {
43
- return;
44
- }
45
- if ((className === null || className === void 0 ? void 0 : className.includes('placeholder')) || isResizing) {
46
- if (i === 'whats-app-8') {
47
- var target = elementRef.current.children[0].children[0];
48
- var rect = target.getBoundingClientRect();
49
- setContentHeight(rect.height);
50
- setContentWidth(rect.width);
51
- if (target.clientHeight > elementRef.current.clientHeight) {
52
- console.log('is overflowing');
53
- elementRef.current.style.height = target.clientHeight + 'px';
54
- }
55
- else {
56
- console.log('NOT overflowing');
57
- }
58
- }
59
- }
60
- }, [children, isResizing]);
61
41
  // const moveDroppingItem = (prevProps: GridItemProps) => {
62
42
  // const { droppingPosition } = props;
63
43
  // if (!droppingPosition) return;
@@ -304,14 +284,13 @@ var GridItem = function (_a) {
304
284
  * @return {Function} Handler function.
305
285
  */
306
286
  var onResizeHandler = function (e, _a, handlerName) {
307
- var _b;
308
287
  var node = _a.node, size = _a.size, handle = _a.handle;
309
288
  var handler = props[handlerName];
310
289
  if (!handler)
311
290
  return;
312
291
  var prevW = props.w, prevH = props.h;
313
292
  // Get new XY
314
- var _c = calcWH(getPositionParams(), __assign(__assign({}, size), { height: (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight }), x, y, handle, prevW, prevH), w = _c.w, h = _c.h;
293
+ var _b = calcWH(getPositionParams(), __assign({}, size), x, y, handle, prevW, prevH), w = _b.w, h = _b.h;
315
294
  // minW should be at least 1
316
295
  // minW = Math.max(minW, 1);
317
296
  // maxW should be at most (cols - x)
@@ -319,7 +298,7 @@ var GridItem = function (_a) {
319
298
  w = clamp(w, minW, maxW);
320
299
  h = clamp(h, minH, maxH);
321
300
  setResizing(handlerName === "onResizeStop" ? undefined : size);
322
- var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
301
+ var _c = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _c.newX, newY = _c.newY;
323
302
  handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
324
303
  };
325
304
  var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
@@ -355,7 +355,7 @@ var ReactGridLayout = function (_a) {
355
355
  if (!item) {
356
356
  return null;
357
357
  }
358
- return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: activeDrag.z || 0, i: activeDrag.i, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, autoResize: true, children: item && item }));
358
+ return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: activeDrag.z || 0, i: activeDrag.i, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, autoResize: !!l.autoResize, children: item && item }));
359
359
  };
360
360
  /**
361
361
  * Given a grid item, set its style attributes & surround in a <Draggable>.
@@ -378,7 +378,7 @@ var ReactGridLayout = function (_a) {
378
378
  : !l.static && isResizable;
379
379
  var resizeHandlesOptions = l.resizeHandles || resizeHandles;
380
380
  var bounded = draggable && isBounded && l.isBounded !== false;
381
- return (_jsx(GridItem, { containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, isDraggable: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: true, children: child }, l.i));
381
+ return (_jsx(GridItem, { containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, isDraggable: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: !!l.autoResize, children: child }, l.i));
382
382
  };
383
383
  var onDragOverHandler = function (e) {
384
384
  var _a;
@@ -20,6 +20,7 @@ export type LayoutItem = {
20
20
  resizeHandles?: ResizeHandleAxis[];
21
21
  isBounded?: boolean;
22
22
  groupLayouts?: LayoutItem[];
23
+ autoResize?: boolean;
23
24
  };
24
25
  export type Layout = LayoutItem[];
25
26
  export type DroppedEvent = {
@@ -31,7 +31,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
31
31
  };
32
32
  import { createElement as _createElement } from "react";
33
33
  import { jsx as _jsx } from "react/jsx-runtime";
34
- import React, { useRef } from "react";
34
+ 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) {
@@ -51,6 +51,39 @@ var Resizable = function (_a) {
51
51
  var lastHandleRect = null;
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
+ var elementRef = children.ref;
55
+ useEffect(function () {
56
+ // if (!autoResize) {
57
+ // return;
58
+ // }
59
+ if (!elementRef.current) {
60
+ return;
61
+ }
62
+ var target = elementRef.current.children[0].children[0];
63
+ console.log(target);
64
+ 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
+ }
70
+ else {
71
+ console.log('NOT overflowing');
72
+ }
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
+ });
54
87
  var resetData = function () {
55
88
  lastHandleRect = slack = null;
56
89
  };
@@ -170,6 +203,8 @@ var Resizable = function (_a) {
170
203
  }
171
204
  var width = props.width + (canDragX ? deltaX / transformScale : 0);
172
205
  var height = props.height + (canDragY ? deltaY / transformScale : 0);
206
+ // console.log('height from Resize:', height)
207
+ // console.log('node', node)
173
208
  var left = (_h = props === null || props === void 0 ? void 0 : props.left) !== null && _h !== void 0 ? _h : 0;
174
209
  var top = (_j = props === null || props === void 0 ? void 0 : props.top) !== null && _j !== void 0 ? _j : 0;
175
210
  if (axisV === "n") {
@@ -178,6 +213,8 @@ var Resizable = function (_a) {
178
213
  if (axisH === "w") {
179
214
  left = left - deltaX;
180
215
  }
216
+ height = elementRef.current.style.height;
217
+ console.log(height);
181
218
  _b = checkConstraints(width, height), width = _b[0], height = _b[1];
182
219
  _c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
183
220
  var isDimensionsChanged = width !== props.width || height !== props.height;
@@ -204,7 +241,11 @@ var Resizable = function (_a) {
204
241
  var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
205
242
  return React.cloneElement(handle, props);
206
243
  };
207
- return cloneElement(children, __assign(__assign({}, restProps), { className: "".concat(className ? "".concat(className, " ") : "", "react-resizable"), children: __spreadArray([
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([
208
249
  // ...children.props.children,
209
250
  React.Children.map(children.props.children, function (child) { return child; })
210
251
  ], resizeHandles.map(function (handleAxis) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",