publ-echo 0.0.63 → 0.0.65

package/dist/lib/GridItem/GridItem.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { DraggableCore } from "../Draggable";
 import classNames from "../../external-lib/classnames";
 import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, calculateCharacterWidthInDiv, clamp, resolveRowHeight, } from "./utils/calculateUtils";
@@ -32,6 +32,7 @@ import { shouldAutoResize, shouldBlockResize } from "./utils/autoResizeUtils";
 var GridItem = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     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, rowHeight = props.rowHeight;
+    var child = React.Children.only(children);
     var shouldAutoShrink = useRef({ shouldAutoShrink: false, initialHeight: 0 });
     var _k = useState(), resizing = _k[0], setResizing = _k[1];
     var _l = useState(), dragging = _l[0], setDragging = _l[1];
@@ -43,6 +44,34 @@ var GridItem = function (_a) {
         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.contentHeight;
+    useEffect(function () {
+        var _a;
+        if (!((_a = child.props.className) === null || _a === void 0 ? void 0 : _a.includes('react-grid-item-selected'))) {
+            return;
+        }
+        if (!elementRef.current || !props.onContentSizeChange) {
+            return;
+        }
+        console.log(elementRef.current);
+        var observer = new ResizeObserver(function (_a) {
+            var _b, _c, _d, _e;
+            var entry = _a[0];
+            var newClientHeight = entry.target.clientHeight;
+            var newClientWidth = entry.target.clientWidth;
+            var _f = entry.target, clientTop = _f.clientTop, clientLeft = _f.clientLeft;
+            var containerHeight = (_c = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) !== null && _c !== void 0 ? _c : 0;
+            var containerWidth = (_e = (_d = elementRef.current) === null || _d === void 0 ? void 0 : _d.clientWidth) !== null && _e !== void 0 ? _e : 0;
+            if (newClientHeight < containerHeight && newClientWidth < containerWidth) {
+                return;
+            }
+            var _g = calcWH(getPositionParams(), { width: newClientWidth, height: newClientHeight }, x, y, 'se', props.w, props.h), w = _g.w, h = _g.h;
+            props.onContentSizeChange(props.i, { x: x, y: y, w: w, h: h });
+        });
+        observer.observe(elementRef.current.children[0].children[0].children[0], { box: 'border-box' });
+        return function () {
+            observer.disconnect();
+        };
+    }, [scrollHeight, props.i, props.w, props.h, x, y, child.props.className]);
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -133,8 +162,6 @@ 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 }));
@@ -365,7 +392,6 @@ var GridItem = function (_a) {
         if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK-HEIGHT') {
             callbackData.size.height = contentSize === null || contentSize === void 0 ? void 0 : contentSize.height;
         }
-        console.log(shouldBlock);
         if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK-WIDTH') {
             callbackData.size.width = contentSize === null || contentSize === void 0 ? void 0 : contentSize.width;
         }
@@ -440,7 +466,6 @@ var GridItem = function (_a) {
         dragging: dragging,
         resizing: resizing,
     }, colWidth);
-    var child = React.Children.only(children);
     var newChild = React.cloneElement(child, {
         key: i,
         ref: elementRef,

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

@@ -75,6 +75,7 @@ export type GridItemProps = {
     onResize?: ResizeGridItemCallback<GridResizeEvent>;
     onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
     onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
+    onContentSizeChange?: any;
     isHiddenVisibility?: boolean;
     customColWidth?: number;
 };

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -266,6 +266,20 @@ var ReactGridLayout = function (_a) {
                 node: node,
             });
     };
+    // NOTE: 임시
+    var onContentSizeChange = function (i, pos) {
+        var _a = withLayoutItem(layout, i, function (l) {
+            l.w = pos.w;
+            l.h = pos.h;
+            l.x = pos.x;
+            l.y = pos.y;
+            return l;
+        }), newLayout = _a[0], l = _a[1];
+        if (!l) {
+            return;
+        }
+        setLayout(newLayout);
+    };
     var onResizeHandler = function (i, w, h, _a, x, y) {
         var e = _a.e, node = _a.node;
         var _b = withLayoutItem(layout, i, function (l) {
@@ -378,7 +392,7 @@ var ReactGridLayout = function (_a) {
             : !l.static && isResizable;
         var resizeHandlesOptions = l.resizeHandles || resizeHandles;
         var bounded = draggable && isBounded && l.isBounded !== false;
-        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));
+        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, onContentSizeChange: onContentSizeChange, 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/package.json

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