publ-echo 0.0.58 → 0.0.60

package/dist/lib/GridItem/GridItem.js

@@ -116,7 +116,7 @@ var GridItem = function (_a) {
      * @param  {Object} position  Position object (pixel values)
      * @return {Element}          Child wrapped in Resizable.
      */
-    var mixinResizable = function (child, position, isResizable) {
+    var mixinResizable = function (child, position, isResizable, placeholderHeight) {
         var positionParams = getPositionParams();
         // const maxWidth = calcGridItemPosition(
         //   positionParams,
@@ -133,6 +133,8 @@ var GridItem = function (_a) {
             Math.min(maxes.width, containerWidth),
             Math.min(maxes.height, Infinity),
         ];
+        console.log("from mixin: ".concat(className), textContentHeight);
+        console.log('prop value: ', placeholderHeight);
         return (_jsx(Resizable, { draggableOpts: {
                 disabled: !isResizable,
             }, 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 }));
@@ -329,10 +331,11 @@ var GridItem = function (_a) {
     //   }
     //   onResizeHandler(e, callbackData, "onResize");
     // }, [textContentHeight])
-    var onResize = function (e, callbackData) {
+    var onResize = function (e, callbackData, gridItemHeight) {
         var _a;
         setIsResizing(true);
         var _b = getDirectionOfMouseEvent(e), dirX = _b.dirX, dirY = _b.dirY;
+        console.log("%c ".concat(gridItemHeight), 'background: #222; color: #bada55');
         var myh = (_a = myHeightRef.current) === null || _a === void 0 ? void 0 : _a.myHeight;
         console.log('myh: ', myh);
         var shouldBlock = shouldBlockResize({
@@ -448,7 +451,10 @@ var GridItem = function (_a) {
         }),
         style: __assign(__assign(__assign({}, props.style), child.props.style), createStyle(pos)),
     });
-    newChild = mixinResizable(newChild, pos, isResizable);
+    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,6 +47,12 @@ var Resizable = function (_a) {
         ne: useRef(null),
         nw: useRef(null),
     });
+    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;
@@ -126,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;
@@ -184,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;
@@ -209,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,30 +79,34 @@ 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 () {
             observer.disconnect();
         };
     }, __spreadArray([box, ref, isMounted], deps, true));
+    console.log('--SIZE FROM OBSERVER--', size.textContentHeight);
     return __assign(__assign({}, size), { myHeightRef: refvalue });
 }
 function extractSize(entry, box, sizeType) {

package/package.json

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