publ-echo 0.0.57 → 0.0.59

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;
+    }, [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;
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -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: ', 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 }));
@@ -330,12 +332,15 @@ var GridItem = function (_a) {
     //   onResizeHandler(e, callbackData, "onResize");
     // }, [textContentHeight])
     var onResize = function (e, callbackData) {
+        var _a;
         setIsResizing(true);
-        var _a = getDirectionOfMouseEvent(e), dirX = _a.dirX, dirY = _a.dirY;
+        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 shouldBlock = shouldBlockResize({
             handle: callbackData.handle,
             direction: dirY,
-            contentHeight: textContentHeight,
+            contentHeight: myh,
             gridItemHeight: callbackData.size.height,
             shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
             initialHeight: shouldAutoShrink.current.initialHeight,
@@ -348,17 +353,17 @@ var GridItem = function (_a) {
             handle: callbackData.handle,
             dirX: dirX,
             dirY: dirY,
-            contentHeight: textContentHeight,
+            contentHeight: myh,
             gridItemHeight: callbackData.size.height,
             shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
             initialHeight: shouldAutoShrink.current.initialHeight
         });
         console.log(shouldResize);
         if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK') {
-            callbackData.size.height = textContentHeight;
+            callbackData.size.height = myh;
         }
         if (shouldResize === 'EXPAND') {
-            callbackData.size.height = textContentHeight;
+            callbackData.size.height = myh;
             shouldAutoShrink.current.shouldAutoShrink = true;
             // NOTE: 배포전에 무조건 변경
             if (callbackData.handle === 'nw') {
@@ -369,7 +374,7 @@ var GridItem = function (_a) {
             }
         }
         if (shouldResize === 'SHRINK') {
-            callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, textContentHeight);
+            callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, myh);
             // NOTE: 배포전에 무조건 변경
             if (callbackData.handle === 'nw') {
                 callbackData.handle = 'sw';
@@ -445,7 +450,7 @@ var GridItem = function (_a) {
         }),
         style: __assign(__assign(__assign({}, props.style), child.props.style), createStyle(pos)),
     });
-    newChild = mixinResizable(newChild, pos, isResizable);
+    newChild = mixinResizable(newChild, pos, isResizable, textContentHeight !== null && textContentHeight !== void 0 ? textContentHeight : 0);
     newChild = mixinDraggable(newChild, isDraggable);
     return newChild;
 };

package/dist/lib/Resizable/Resizable.js

@@ -46,6 +46,11 @@ 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 startPosition = useRef(null);
     var startSize = useRef(null);
     var lastHandleRect = null;

package/dist/lib/hooks/useResizeobserver.d.ts

@@ -13,7 +13,11 @@ type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
     onResize?: ResizeHandler;
     box?: BoxOptions;
 };
-type UseResizeObserverResult = Size;
+type UseResizeObserverResult = Size & {
+    myHeightRef: RefObject<{
+        myHeight: number;
+    }>;
+};
 /**
  * Custom hook for observing the size of an element using the ResizeObserver API.
  *

package/dist/lib/hooks/useResizeobserver.js

@@ -50,6 +50,7 @@ var initialSize = {
 export function useResizeObserver(options, deps) {
     var ref = options.ref, _a = options.box, box = _a === void 0 ? 'content-box' : _a;
     var _b = useState(initialSize), size = _b[0], setSize = _b[1];
+    var refvalue = useRef({ myHeight: 0 });
     var isMounted = useIsMounted();
     var previousSize = useRef(__assign({}, initialSize));
     var onResize = useRef(undefined);
@@ -77,6 +78,7 @@ export function useResizeObserver(options, deps) {
             var newScrollHeight = entry.target.scrollHeight;
             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 ||
@@ -101,7 +103,8 @@ export function useResizeObserver(options, deps) {
             observer.disconnect();
         };
     }, __spreadArray([box, ref, isMounted], deps, true));
-    return size;
+    console.log('--SIZE FROM OBSERVER--', size.textContentHeight);
+    return __assign(__assign({}, size), { myHeightRef: refvalue });
 }
 function extractSize(entry, box, sizeType) {
     if (!entry[box]) {

package/package.json

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