publ-echo-test 0.0.172 → 0.0.173
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { GridItemProps } from './types';
|
3
3
|
import { PropsWithChildren } from '../types';
|
4
|
-
declare const
|
5
|
-
export default
|
4
|
+
declare const _default: React.MemoExoticComponent<({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
|
5
|
+
export default _default;
|
@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
21
21
|
return t;
|
22
22
|
};
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
24
|
-
import React, { useEffect, useRef, useState, } from 'react';
|
24
|
+
import React, { useEffect, useRef, useState, useCallback, } from 'react';
|
25
25
|
import { DraggableCore } from '../Draggable';
|
26
26
|
import classNames from '../../external-lib/classnames';
|
27
27
|
import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from './utils/calculateUtils';
|
@@ -154,7 +154,7 @@ var GridItem = function (_a) {
|
|
154
154
|
};
|
155
155
|
};
|
156
156
|
var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(getPositionParams());
|
157
|
-
var createStyle = function (pos) {
|
157
|
+
var createStyle = useCallback(function (pos) {
|
158
158
|
var usePercentages = props.usePercentages, containerWidth = props.containerWidth, useCSSTransforms = props.useCSSTransforms;
|
159
159
|
var style;
|
160
160
|
if (useCSSTransforms) {
|
@@ -170,8 +170,12 @@ var GridItem = function (_a) {
|
|
170
170
|
style.width = perc(pos.width / containerWidth);
|
171
171
|
}
|
172
172
|
}
|
173
|
+
// 드래그나 리사이즈 중일 때만 will-change 추가
|
174
|
+
if (isDragging || isResizing) {
|
175
|
+
style.willChange = 'transform';
|
176
|
+
}
|
173
177
|
return style;
|
174
|
-
};
|
178
|
+
}, [props.usePercentages, props.containerWidth, props.useCSSTransforms, isDragging, isResizing]);
|
175
179
|
/**
|
176
180
|
* Mix a Draggable instance into a child.
|
177
181
|
* @param {Element} child Child element.
|
@@ -415,4 +419,12 @@ var GridItem = function (_a) {
|
|
415
419
|
newChild = mixinDraggable(newChild, isDraggable);
|
416
420
|
return newChild;
|
417
421
|
};
|
418
|
-
export default GridItem
|
422
|
+
export default React.memo(GridItem, function (prevProps, nextProps) {
|
423
|
+
// 필요한 속성만 비교하여 불필요한 리렌더링 방지
|
424
|
+
return (prevProps.x === nextProps.x &&
|
425
|
+
prevProps.y === nextProps.y &&
|
426
|
+
prevProps.w === nextProps.w &&
|
427
|
+
prevProps.h === nextProps.h &&
|
428
|
+
prevProps.isDraggable === nextProps.isDraggable &&
|
429
|
+
prevProps.isResizable === nextProps.isResizable);
|
430
|
+
});
|
@@ -34,7 +34,7 @@ import * as React from 'react';
|
|
34
34
|
import { useState, useRef, useLayoutEffect } from 'react';
|
35
35
|
import classNames from '../../external-lib/classnames';
|
36
36
|
import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from './utils/renderHelpers';
|
37
|
-
import { calcGridColWidth, calcXY, resolveRowHeight, } from '../GridItem/utils/calculateUtils';
|
37
|
+
import { calcGridColWidth, calcGridItemPosition, calcXY, resolveRowHeight, } from '../GridItem/utils/calculateUtils';
|
38
38
|
import GridItem from '../GridItem/GridItem';
|
39
39
|
import isEqual from '../../external-lib/lodash.isEqual';
|
40
40
|
import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, findParentGroupBlock, formatCbIdToBlockId, getBlockSpecificType, zIndexMap, } from './group';
|
@@ -739,7 +739,31 @@ var ReactGridLayout = function (_a) {
|
|
739
739
|
var currentGroupBlocks = blockStructure
|
740
740
|
? findGroupBlocks(blockStructure, editingGroupBlock)
|
741
741
|
: [];
|
742
|
-
|
742
|
+
// 화면에 보이는 아이템만 렌더링
|
743
|
+
var visibleItems = React.useMemo(function () {
|
744
|
+
if (!containerHeight)
|
745
|
+
return layout;
|
746
|
+
// 화면에 보이는 영역 계산
|
747
|
+
var visibleTop = window.scrollY;
|
748
|
+
var visibleBottom = visibleTop + window.innerHeight;
|
749
|
+
// 여유 공간 추가 (스크롤 시 부드러운 전환을 위해)
|
750
|
+
var buffer = resolveRowHeight(rowHeight, colWidth) * 2;
|
751
|
+
return layout.filter(function (item) {
|
752
|
+
var _a;
|
753
|
+
var itemPos = calcGridItemPosition(getPositionParams(), item.x, item.y, (_a = item.z) !== null && _a !== void 0 ? _a : 0, item.w, item.h);
|
754
|
+
return (itemPos.top < visibleBottom + buffer) && (itemPos.top + itemPos.height > visibleTop - buffer);
|
755
|
+
});
|
756
|
+
}, [layout, window.scrollY, window.innerHeight, rowHeight, colWidth]);
|
757
|
+
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) {
|
758
|
+
var _a;
|
759
|
+
var key = (_a = child.key) === null || _a === void 0 ? void 0 : _a.toString();
|
760
|
+
if (!key)
|
761
|
+
return null;
|
762
|
+
var item = visibleItems.find(function (item) { return item.i === key; });
|
763
|
+
if (!item)
|
764
|
+
return null;
|
765
|
+
return processGridItem(child);
|
766
|
+
}), placeholder(), activeDrag && _jsx("div", { className: 'grid-guide-line-center' }), activeDrag && (_jsx("div", { className: 'grid-placeholder', style: {
|
743
767
|
marginTop: margin[1] + 'px',
|
744
768
|
marginBottom: margin[1] + 'px',
|
745
769
|
marginLeft: margin[0] + 'px',
|