publ-echo-test 0.0.33 → 0.0.35

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,11 +93,6 @@ 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
- };
101
96
  // NOTE - event 발생 시 {x, y} position을 가져오는 함수
102
97
  var getControlPosition = function (e, touchIdentifier) {
103
98
  var _a;
@@ -187,7 +182,6 @@ var DraggableCore = function (_a) {
187
182
  setDraggableCoreState(function (prev) { return (__assign(__assign({}, prev), { dragging: true, lastX: x, lastY: y })); });
188
183
  }
189
184
  function handleDrag(e) {
190
- // console.log(e.currentTarget)
191
185
  var _a;
192
186
  var position = getControlPosition(e, draggableCoreState.touchIdentifier);
193
187
  if (!position)
@@ -204,7 +198,6 @@ var DraggableCore = function (_a) {
204
198
  }
205
199
  var coreEvent = createCoreData(x, y);
206
200
  var thisNode = findDOMNode();
207
- // const children = findChildrenNode()
208
201
  if (!coreEvent || !thisNode)
209
202
  return;
210
203
  var shouldUpdate = onDrag(e, coreEvent, thisNode);
@@ -47,12 +47,17 @@ var GridItem = function (_a) {
47
47
  if (!targetNode || isDragging || isResizing) {
48
48
  return;
49
49
  }
50
+ var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
51
+ var prevPaddingR = parseFloat(getComputedStyle(targetNode).paddingRight);
52
+ var prevPaddingT = parseFloat(getComputedStyle(targetNode).paddingTop);
53
+ var prevPaddingB = parseFloat(getComputedStyle(targetNode).paddingBottom);
50
54
  // MutationObserver 콜백 함수
51
55
  var callback = function (mutationsList) {
52
56
  for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
53
57
  var mutation = mutationsList_1[_i];
54
58
  var isCharacterChanged = mutation.type === 'characterData';
55
59
  var keepWidth = true;
60
+ var hasPaddingChanged = false;
56
61
  var height = isCharacterChanged ? mutation.target.parentNode.clientHeight : mutation.target.clientHeight;
57
62
  var width = targetNode.clientWidth;
58
63
  if (!isCharacterChanged && mutation.target instanceof Element) {
@@ -61,6 +66,14 @@ var GridItem = function (_a) {
61
66
  if (minWidth > width) {
62
67
  keepWidth = false;
63
68
  }
69
+ // NOTE: POC
70
+ var paddingL = parseFloat(styles.paddingLeft);
71
+ var paddingR = parseFloat(styles.paddingRight);
72
+ var paddingT = parseFloat(styles.paddingTop);
73
+ var paddingB = parseFloat(styles.paddingBottom);
74
+ if (prevPaddingL !== paddingL || prevPaddingR !== paddingR || prevPaddingT !== paddingT || prevPaddingB !== paddingB) {
75
+ hasPaddingChanged = true;
76
+ }
64
77
  }
65
78
  var prevW = props.w;
66
79
  var prevH = props.h;
@@ -75,7 +88,10 @@ var GridItem = function (_a) {
75
88
  h_1 = prevH;
76
89
  }
77
90
  var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
78
- props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY);
91
+ if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
92
+ return;
93
+ }
94
+ props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
79
95
  }
80
96
  };
81
97
  // MutationObserver 인스턴스 생성
@@ -315,16 +331,6 @@ var GridItem = function (_a) {
315
331
  */
316
332
  var onResize = function (e, callbackData) {
317
333
  setIsResizing(true);
318
- // let { w, h } = calcWH(
319
- // getPositionParams(),
320
- // callbackData.size,
321
- // x,
322
- // y,
323
- // callbackData.handle,
324
- // undefined,
325
- // undefined,
326
- // callbackData.isOverMin
327
- // );
328
334
  onResizeHandler(e, callbackData, "onResize");
329
335
  };
330
336
  /**
@@ -345,27 +351,31 @@ var GridItem = function (_a) {
345
351
  * @return {Function} Handler function.
346
352
  */
347
353
  var onResizeHandler = function (e, _a, handlerName) {
348
- var node = _a.node, size = _a.size, handle = _a.handle, minWidth = _a.minWidth;
354
+ var node = _a.node, size = _a.size, handle = _a.handle, minWidth = _a.minWidth, minHeight = _a.minHeight;
349
355
  var handler = props[handlerName];
350
356
  if (!handler)
351
357
  return;
352
358
  var prevW = props.w, prevH = props.h;
353
359
  // Get new XY
354
360
  var _b = calcWH(getPositionParams(), size, x, y, handle, prevW, prevH, false), w = _b.w, h = _b.h;
361
+ var tempMinH = minH;
355
362
  if (minWidth) {
356
- var minW_1 = calcWH(getPositionParams(), __assign(__assign({}, size), { width: minWidth }), x, y, handle, prevW, prevH, true).w;
363
+ var _c = calcWH(getPositionParams(), __assign(__assign({}, size), { width: minWidth, height: minHeight !== null && minHeight !== void 0 ? minHeight : 0 }), x, y, handle, prevW, prevH, true), minW_1 = _c.w, newMinH = _c.h;
357
364
  if (minW_1 > w) {
358
365
  w = minW_1;
359
366
  }
367
+ if (minH > 1) {
368
+ tempMinH = Math.max(1, newMinH);
369
+ }
360
370
  }
361
371
  // minW should be at least 1
362
372
  // minW = Math.max(minW, 1);
363
373
  // maxW should be at most (cols - x)
364
374
  // maxW = Math.min(maxW, cols - x);
365
375
  w = clamp(w, minW, maxW);
366
- h = clamp(h, minH, maxH);
376
+ h = clamp(h, tempMinH, maxH);
367
377
  setResizing(handlerName === "onResizeStop" ? undefined : size);
368
- var _c = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _c.newX, newY = _c.newY;
378
+ var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
369
379
  handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
370
380
  };
371
381
  var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
@@ -75,7 +75,9 @@ export type GridItemProps = {
75
75
  onResize?: ResizeGridItemCallback<GridResizeEvent>;
76
76
  onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
77
77
  onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
78
- onFitToContent?: (i: string, w: number, h: number, x: number, y: number) => void;
78
+ onFitToContent?: (i: string, w: number, h: number, x: number, y: number, { hasPaddingChanged }: {
79
+ hasPaddingChanged: boolean;
80
+ }) => void;
79
81
  isHiddenVisibility?: boolean;
80
82
  customColWidth?: number;
81
83
  autoResize: boolean;
@@ -255,7 +255,6 @@ var ReactGridLayout = function (_a) {
255
255
  var l = getLayoutItem(layout, i);
256
256
  if (!l)
257
257
  return;
258
- console.log(l);
259
258
  setOldResizeItem(cloneLayoutItem(l));
260
259
  setOldLayout(layout);
261
260
  props.onResizeStart &&
@@ -334,8 +333,9 @@ var ReactGridLayout = function (_a) {
334
333
  setOldLayout(undefined);
335
334
  onLayoutMaybeChanged(newLayout, oldLayout);
336
335
  };
337
- var onFitToContentHandler = function (i, w, h, x, y) {
338
- var _a = withLayoutItem(layout, i, function (l) {
336
+ var onFitToContentHandler = function (i, w, h, x, y, _a) {
337
+ var hasPaddingChanged = _a.hasPaddingChanged;
338
+ var _b = withLayoutItem(layout, i, function (l) {
339
339
  var hasCollisions;
340
340
  if (preventCollision && !allowOverlap) {
341
341
  var collisions = getAllCollisions(layout, __assign(__assign({}, l), { w: x, h: y })).filter(function (layoutItem) { return layoutItem.i !== l.i; });
@@ -360,9 +360,10 @@ var ReactGridLayout = function (_a) {
360
360
  l.h = h;
361
361
  l.x = x;
362
362
  l.y = y;
363
+ l.minH = h;
363
364
  }
364
365
  return l;
365
- }), newLayout = _a[0], l = _a[1];
366
+ }), newLayout = _b[0], l = _b[1];
366
367
  if (!l)
367
368
  return;
368
369
  props.onFitToContent &&
@@ -370,6 +371,7 @@ var ReactGridLayout = function (_a) {
370
371
  layout: newLayout,
371
372
  prev: oldResizeItem,
372
373
  item: l,
374
+ hasPaddingChanged: hasPaddingChanged
373
375
  });
374
376
  setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
375
377
  };
@@ -71,7 +71,7 @@ export type ReactGridLayoutProps = {
71
71
  innerRef?: RefObject<HTMLDivElement>;
72
72
  minNbRow?: number;
73
73
  customColWidth?: number;
74
- onFitToContent?: EventCallback;
74
+ onFitToContent?: OnFitContentCallBack;
75
75
  };
76
76
  export type DragOverEvent = MouseEvent & {
77
77
  nativeEvent: {
@@ -79,6 +79,15 @@ export type DragOverEvent = MouseEvent & {
79
79
  layerY: number;
80
80
  } & Event;
81
81
  };
82
+ export type OnFitContentCallBack = (properties: {
83
+ layout: Layout;
84
+ prev?: LayoutItem;
85
+ item?: LayoutItem;
86
+ placeholder?: LayoutItem;
87
+ e?: ResizeEventType;
88
+ node?: HTMLElement;
89
+ hasPaddingChanged: boolean;
90
+ }) => void;
82
91
  export type EventCallback = (properties: {
83
92
  layout: Layout;
84
93
  prev?: LayoutItem;
@@ -53,6 +53,7 @@ var Resizable = function (_a) {
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
55
  var extendedHeightRef = useRef(null);
56
+ var shouldShrinkRef = useRef(false);
56
57
  var minWidth = useRef(0);
57
58
  useEffect(function () {
58
59
  var _a;
@@ -62,6 +63,7 @@ var Resizable = function (_a) {
62
63
  if (!isResizing) {
63
64
  extendedHeightRef.current = null;
64
65
  minWidth.current = 0;
66
+ shouldShrinkRef.current = false;
65
67
  return;
66
68
  }
67
69
  if (!elementRef.current) {
@@ -74,10 +76,14 @@ var Resizable = function (_a) {
74
76
  var target = (_a = placeholder.children[0].children[0].children[0]) !== null && _a !== void 0 ? _a : placeholder.children[0].children[0];
75
77
  if (target.clientHeight > elementRef.current.clientHeight) {
76
78
  extendedHeightRef.current = target.clientHeight;
79
+ shouldShrinkRef.current = true;
77
80
  }
78
81
  else {
79
82
  extendedHeightRef.current = null;
80
83
  }
84
+ if (shouldShrinkRef.current && target.clientHeight < elementRef.current.clientHeight) {
85
+ extendedHeightRef.current = target.clientHeight;
86
+ }
81
87
  var minWidthStyle = target.computedStyleMap().get('min-width');
82
88
  if (typeof minWidthStyle.value === 'number') {
83
89
  minWidth.current = minWidthStyle.value;
@@ -161,7 +167,7 @@ var Resizable = function (_a) {
161
167
  var resizeHandler = function (handlerName, handleAxis) {
162
168
  return function (e, _a) {
163
169
  var _b, _c;
164
- var _d, _e, _f, _g, _h, _j;
170
+ var _d, _e, _f, _g, _h, _j, _k;
165
171
  var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
166
172
  if (handlerName === "onResizeStart") {
167
173
  var position = { top: (_d = props.top) !== null && _d !== void 0 ? _d : 0, left: (_e = props.left) !== null && _e !== void 0 ? _e : 0 };
@@ -222,7 +228,7 @@ var Resizable = function (_a) {
222
228
  var cb = typeof props[handlerName] === "function" ? props[handlerName] : null;
223
229
  var isCbSkipped = handlerName === "onResize" && !isDimensionsChanged;
224
230
  if (cb && !isCbSkipped) {
225
- cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis, minWidth: minWidth.current });
231
+ cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis, minWidth: minWidth.current, minHeight: (_k = extendedHeightRef.current) !== null && _k !== void 0 ? _k : 0 });
226
232
  }
227
233
  if (handlerName === "onResizeStop") {
228
234
  startPosition.current = null;
@@ -30,6 +30,7 @@ export type ResizeCallbackData = {
30
30
  };
31
31
  handle: ResizeHandleAxis;
32
32
  minWidth?: number;
33
+ minHeight?: number;
33
34
  };
34
35
  export type ResizableDefaultProps = {
35
36
  axis: Axis;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.33",
3
+ "version": "0.0.35",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",