publ-echo 0.0.59 → 0.0.61

package/dist/lib/GridItem/GridItem.js

@@ -42,7 +42,7 @@ var GridItem = function (_a) {
     var _q = useResizeObserver({
         ref: elementRef,
         box: 'border-box',
-    }, [isDragging, isResizing]), _r = _q.width, width = _r === void 0 ? 0 : _r, _s = _q.height, height = _s === void 0 ? 0 : _s, _t = _q.clientHeight, clientHeight = _t === void 0 ? 0 : _t, _u = _q.scrollHeight, scrollHeight = _u === void 0 ? 0 : _u, textContentHeight = _q.textContentHeight, myHeightRef = _q.myHeightRef;
+    }, [isDragging, isResizing]), _r = _q.width, width = _r === void 0 ? 0 : _r, _s = _q.height, height = _s === void 0 ? 0 : _s, _t = _q.clientHeight, clientHeight = _t === void 0 ? 0 : _t, _u = _q.scrollHeight, scrollHeight = _u === void 0 ? 0 : _u, textContentHeight = _q.textContentHeight;
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -133,7 +133,7 @@ var GridItem = function (_a) {
             Math.min(maxes.width, containerWidth),
             Math.min(maxes.height, Infinity),
         ];
-        console.log('from mixin: ', textContentHeight);
+        console.log("from mixin: ".concat(className), textContentHeight);
         console.log('prop value: ', placeholderHeight);
         return (_jsx(Resizable, { draggableOpts: {
                 disabled: !isResizable,
@@ -331,16 +331,13 @@ var GridItem = function (_a) {
     //   }
     //   onResizeHandler(e, callbackData, "onResize");
     // }, [textContentHeight])
-    var onResize = function (e, callbackData) {
-        var _a;
+    var onResize = function (e, callbackData, gridItemHeight) {
         setIsResizing(true);
-        var _b = getDirectionOfMouseEvent(e), dirX = _b.dirX, dirY = _b.dirY;
-        var myh = (_a = myHeightRef.current) === null || _a === void 0 ? void 0 : _a.myHeight;
-        console.log('myh: ', myh);
+        var _a = getDirectionOfMouseEvent(e), dirX = _a.dirX, dirY = _a.dirY;
         var shouldBlock = shouldBlockResize({
             handle: callbackData.handle,
             direction: dirY,
-            contentHeight: myh,
+            contentHeight: gridItemHeight,
             gridItemHeight: callbackData.size.height,
             shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
             initialHeight: shouldAutoShrink.current.initialHeight,
@@ -353,17 +350,17 @@ var GridItem = function (_a) {
             handle: callbackData.handle,
             dirX: dirX,
             dirY: dirY,
-            contentHeight: myh,
+            contentHeight: gridItemHeight,
             gridItemHeight: callbackData.size.height,
             shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
             initialHeight: shouldAutoShrink.current.initialHeight
         });
         console.log(shouldResize);
         if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK') {
-            callbackData.size.height = myh;
+            callbackData.size.height = gridItemHeight;
         }
         if (shouldResize === 'EXPAND') {
-            callbackData.size.height = myh;
+            callbackData.size.height = gridItemHeight;
             shouldAutoShrink.current.shouldAutoShrink = true;
             // NOTE: 배포전에 무조건 변경
             if (callbackData.handle === 'nw') {
@@ -374,7 +371,7 @@ var GridItem = function (_a) {
             }
         }
         if (shouldResize === 'SHRINK') {
-            callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, myh);
+            callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, gridItemHeight);
             // NOTE: 배포전에 무조건 변경
             if (callbackData.handle === 'nw') {
                 callbackData.handle = 'sw';
@@ -450,6 +447,9 @@ var GridItem = function (_a) {
         }),
         style: __assign(__assign(__assign({}, props.style), child.props.style), createStyle(pos)),
     });
+    if (className === 'placeholder') {
+        return newChild;
+    }
     newChild = mixinResizable(newChild, pos, isResizable, textContentHeight !== null && textContentHeight !== void 0 ? textContentHeight : 0);
     newChild = mixinDraggable(newChild, isDraggable);
     return newChild;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -357,26 +357,6 @@ var ReactGridLayout = function (_a) {
         }
         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, children: item && item }));
     };
-    var placeholder2 = function () {
-        if (!activeDrag)
-            return;
-        // {...activeDrag} is pretty slow, actually
-        var l = getLayoutItem(props.layout, String(activeDrag.i));
-        if (!l) {
-            return null;
-        }
-        // NOTE: toChildren changes key
-        // LINK: https://legacy.reactjs.org/docs/react-api.html
-        var items = React.Children.toArray(children);
-        var item = items.find(function (child) {
-            var originalKey = String(child.key).split(".$");
-            return originalKey[1] === l.i;
-        });
-        if (!item) {
-            return null;
-        }
-        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, children: item && item }));
-    };
     /**
      * Given a grid item, set its style attributes & surround in a <Draggable>.
      * @param  {Element} child React element.
@@ -398,7 +378,7 @@ var ReactGridLayout = function (_a) {
             : !l.static && isResizable;
         var resizeHandlesOptions = l.resizeHandles || resizeHandles;
         var bounded = draggable && isBounded && l.isBounded !== false;
-        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, children: child }, l.i));
+        return (_jsx(GridItem, { className: "i-am-grid-item", 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, children: child }, l.i));
     };
     var onDragOverHandler = function (e) {
         var _a;

package/dist/lib/Resizable/Resizable.js

@@ -34,6 +34,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useRef } from "react";
 import DraggableCore from "../Draggable/DraggableCore";
 import { cloneElement } from "./utils/cloneElement";
+import { useResizeObserver } from "../hooks/useResizeobserver";
 var Resizable = function (_a) {
     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"]);
     var handleRefs = useRef({
@@ -46,11 +47,12 @@ var Resizable = function (_a) {
         ne: useRef(null),
         nw: useRef(null),
     });
-    // const elementRef = useRef<HTMLDivElement>(null);
-    // const { textContentHeight, myHeightRef } = useResizeObserver({
-    //   ref: elementRef,
-    //   box: 'border-box',
-    // } ,[])
+    var elementRef = useRef({ isOkay: true });
+    var _j = useResizeObserver({
+        ref: elementRef,
+        box: 'border-box',
+    }, [props.onResize]), textContentHeight = _j.textContentHeight, myHeightRef = _j.myHeightRef;
+    console.log("%c ".concat(textContentHeight), 'background: #ff0000; color: #ffffff');
     var startPosition = useRef(null);
     var startSize = useRef(null);
     var lastHandleRect = null;
@@ -131,8 +133,8 @@ var Resizable = function (_a) {
         }
         return [newTop, newLeft];
     };
-    var resizeHandler = function (handlerName, handleAxis) {
-        return function (e, _a) {
+    var resizeHandler = function (handlerName, handleAxis, textContentHeight) {
+        return function (e, _a, textContent) {
             var _b, _c;
             var _d, _e, _f, _g, _h, _j;
             var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
@@ -189,7 +191,7 @@ var Resizable = function (_a) {
             var cb = typeof props[handlerName] === "function" ? props[handlerName] : null;
             var isCbSkipped = handlerName === "onResize" && !isDimensionsChanged;
             if (cb && !isCbSkipped) {
-                cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis });
+                cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis }, textContentHeight !== null && textContentHeight !== void 0 ? textContentHeight : -1);
             }
             if (handlerName === "onResizeStop") {
                 startPosition.current = null;
@@ -214,7 +216,7 @@ var Resizable = function (_a) {
             React.Children.map(children.props.children, function (child) { return child; })
         ], resizeHandles.map(function (handleAxis) {
             var ref = (handleRefs === null || handleRefs === void 0 ? void 0 : handleRefs.current) && handleRefs.current[handleAxis];
-            return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler("onResizeStop", handleAxis), onStart: resizeHandler("onResizeStart", handleAxis), onDrag: resizeHandler("onResize", handleAxis) }), renderResizeHandle(handleAxis, ref)));
+            return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler("onResizeStop", handleAxis), onStart: resizeHandler("onResizeStart", handleAxis), onDrag: resizeHandler("onResize", handleAxis, textContentHeight) }), renderResizeHandle(handleAxis, ref)));
         }), true) }));
 };
 export default Resizable;

package/dist/lib/Resizable/types.d.ts

@@ -49,7 +49,7 @@ export type ResizableProps = {
     handle?: ResizeHandleType;
     onResizeStop?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
     onResizeStart?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
-    onResize?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
+    onResize?: (e: SyntheticEvent<any>, data: ResizeCallbackData, gridItemHeight?: number) => any;
     handleSize?: [number, number];
     lockAspectRatio?: boolean;
     minConstraints?: [number, number];

package/dist/lib/hooks/useResizeobserver.js

@@ -79,24 +79,27 @@ export function useResizeObserver(options, deps) {
             var newClientHeight = entry.target.clientHeight;
             var newTextContentHeight = (_d = (_c = (_b = entry.target.children[0]) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
             refvalue.current.myHeight = newTextContentHeight;
-            var hasChanged = previousSize.current.width !== newWidth ||
-                previousSize.current.height !== newHeight ||
-                previousSize.current.scrollHeight !== newScrollHeight ||
-                previousSize.current.clientHeight !== newClientHeight ||
-                previousSize.current.textContentHeight !== newTextContentHeight;
-            if (hasChanged) {
-                var newSize = { width: newWidth, height: newHeight, scrollHeight: newScrollHeight, clientHeight: newClientHeight, textContentHeight: newTextContentHeight };
-                previousSize.current = newSize;
-                if (onResize === null || onResize === void 0 ? void 0 : onResize.current) {
-                    onResize.current(newSize);
-                }
-                else {
-                    if (isMounted()) {
-                        console.log('set- new -size');
-                        setSize(newSize);
-                    }
-                }
-            }
+            // const hasChanged =
+            //   previousSize.current.width !== newWidth ||
+            //   previousSize.current.height !== newHeight ||
+            //   previousSize.current.scrollHeight !== newScrollHeight ||
+            //   previousSize.current.clientHeight !== newClientHeight ||
+            //   previousSize.current.textContentHeight !== newTextContentHeight
+            var newSize = { width: newWidth, height: newHeight, scrollHeight: newScrollHeight, clientHeight: newClientHeight, textContentHeight: newTextContentHeight };
+            previousSize.current = newSize;
+            setSize(newSize);
+            // if (hasChanged) {
+            // const newSize: Size = { width: newWidth, height: newHeight, scrollHeight: newScrollHeight, clientHeight: newClientHeight, textContentHeight: newTextContentHeight }
+            // previousSize.current = newSize;
+            //   if (onResize?.current) {
+            //     onResize.current(newSize)
+            //   } else {
+            //     if (isMounted()) {
+            //       console.log('set- new -size')
+            //       setSize(newSize)
+            //     }
+            //   }
+            // }
         });
         observer.observe(placeholder.children[0], { box: box });
         return function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "publ-echo",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",