publ-echo-test 0.0.171 → 0.0.173

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { GridItemProps } from './types';
 import { PropsWithChildren } from '../types';
-declare const GridItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-export default GridItem;
+declare const _default: React.MemoExoticComponent<({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default _default;

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, { useEffect, useRef, useState, } from 'react';
+import React, { useEffect, useRef, useState, useCallback, } from 'react';
 import { DraggableCore } from '../Draggable';
 import classNames from '../../external-lib/classnames';
 import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from './utils/calculateUtils';
@@ -154,7 +154,7 @@ var GridItem = function (_a) {
         };
     };
     var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(getPositionParams());
-    var createStyle = function (pos) {
+    var createStyle = useCallback(function (pos) {
         var usePercentages = props.usePercentages, containerWidth = props.containerWidth, useCSSTransforms = props.useCSSTransforms;
         var style;
         if (useCSSTransforms) {
@@ -170,8 +170,12 @@ var GridItem = function (_a) {
                 style.width = perc(pos.width / containerWidth);
             }
         }
+        // 드래그나 리사이즈 중일 때만 will-change 추가
+        if (isDragging || isResizing) {
+            style.willChange = 'transform';
+        }
         return style;
-    };
+    }, [props.usePercentages, props.containerWidth, props.useCSSTransforms, isDragging, isResizing]);
     /**
      * Mix a Draggable instance into a child.
      * @param  {Element} child    Child element.
@@ -415,4 +419,12 @@ var GridItem = function (_a) {
     newChild = mixinDraggable(newChild, isDraggable);
     return newChild;
 };
-export default GridItem;
+export default React.memo(GridItem, function (prevProps, nextProps) {
+    // 필요한 속성만 비교하여 불필요한 리렌더링 방지
+    return (prevProps.x === nextProps.x &&
+        prevProps.y === nextProps.y &&
+        prevProps.w === nextProps.w &&
+        prevProps.h === nextProps.h &&
+        prevProps.isDraggable === nextProps.isDraggable &&
+        prevProps.isResizable === nextProps.isResizable);
+});

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -34,7 +34,7 @@ import * as React from 'react';
 import { useState, useRef, useLayoutEffect } from 'react';
 import classNames from '../../external-lib/classnames';
 import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from './utils/renderHelpers';
-import { calcGridColWidth, calcXY, resolveRowHeight, } from '../GridItem/utils/calculateUtils';
+import { calcGridColWidth, calcGridItemPosition, calcXY, resolveRowHeight, } from '../GridItem/utils/calculateUtils';
 import GridItem from '../GridItem/GridItem';
 import isEqual from '../../external-lib/lodash.isEqual';
 import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, findParentGroupBlock, formatCbIdToBlockId, getBlockSpecificType, zIndexMap, } from './group';
@@ -567,8 +567,7 @@ var ReactGridLayout = function (_a) {
         var zOrder = (_a = block[device === 'DESKTOP' ? 'zOrderDesktopInternal' : 'zOrderMobileInternal']) !== null && _a !== void 0 ? _a : 0;
         var editorZIndex = (function () {
             if (isInBulk) {
-                // return zIndexMap.EDITING_GROUP_CHILD + z;
-                return z;
+                return zIndexMap.EDITING_GROUP_CHILD + z;
             }
             if (!isRoot && editable) {
                 return zIndexMap.EDITING_GROUP_CHILD + z;
@@ -740,8 +739,31 @@ var ReactGridLayout = function (_a) {
     var currentGroupBlocks = blockStructure
         ? findGroupBlocks(blockStructure, editingGroupBlock)
         : [];
-    console.log('currentGroupBlocks', currentGroupBlocks);
-    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: 'grid-guide-line-center' }), activeDrag && (_jsx("div", { className: 'grid-placeholder', style: {
+    // 화면에 보이는 아이템만 렌더링
+    var visibleItems = React.useMemo(function () {
+        if (!containerHeight)
+            return layout;
+        // 화면에 보이는 영역 계산
+        var visibleTop = window.scrollY;
+        var visibleBottom = visibleTop + window.innerHeight;
+        // 여유 공간 추가 (스크롤 시 부드러운 전환을 위해)
+        var buffer = resolveRowHeight(rowHeight, colWidth) * 2;
+        return layout.filter(function (item) {
+            var _a;
+            var itemPos = calcGridItemPosition(getPositionParams(), item.x, item.y, (_a = item.z) !== null && _a !== void 0 ? _a : 0, item.w, item.h);
+            return (itemPos.top < visibleBottom + buffer) && (itemPos.top + itemPos.height > visibleTop - buffer);
+        });
+    }, [layout, window.scrollY, window.innerHeight, rowHeight, colWidth]);
+    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) {
+                var _a;
+                var key = (_a = child.key) === null || _a === void 0 ? void 0 : _a.toString();
+                if (!key)
+                    return null;
+                var item = visibleItems.find(function (item) { return item.i === key; });
+                if (!item)
+                    return null;
+                return processGridItem(child);
+            }), placeholder(), activeDrag && _jsx("div", { className: 'grid-guide-line-center' }), activeDrag && (_jsx("div", { className: 'grid-placeholder', style: {
                     marginTop: margin[1] + 'px',
                     marginBottom: margin[1] + 'px',
                     marginLeft: margin[0] + 'px',

package/package.json

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