@noraent/nora-datagrid 0.0.49 → 0.0.50
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.
package/lib/cjs/App.js
CHANGED
|
@@ -166,7 +166,7 @@ function App() {
|
|
|
166
166
|
const ref = useGridApiRef();
|
|
167
167
|
const [dataSource, setDataSource] = useState([]);
|
|
168
168
|
const handleDataSource = () => {
|
|
169
|
-
const data = Array.from({ length:
|
|
169
|
+
const data = Array.from({ length: 200 }, (_, i) => {
|
|
170
170
|
return {
|
|
171
171
|
id: i,
|
|
172
172
|
code: `test-${i}`,
|
|
@@ -189,7 +189,7 @@ function App() {
|
|
|
189
189
|
handleDataSource();
|
|
190
190
|
}, children: "\uB370\uC774\uD130 set" }), _jsx("button", { onClick: () => {
|
|
191
191
|
const data = ref.current.getData();
|
|
192
|
-
}, children: "\uD558" }), _jsx("div", { style: { width: "1200px", height: "
|
|
192
|
+
}, children: "\uD558" }), _jsx("div", { style: { width: "1200px", height: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: columns, dataSource: dataSource }) }), _jsx("button", { children: "dd" })] }));
|
|
193
193
|
}
|
|
194
194
|
export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
|
|
195
195
|
return {
|
|
@@ -36,10 +36,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
|
|
|
36
36
|
var _a;
|
|
37
37
|
const store = gridRef.current.store;
|
|
38
38
|
const parentElement = (_a = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
39
|
+
// const parentElement = store?.gridContainer.current?.parentElement as HTMLDivElement;
|
|
39
40
|
// ResizeObserver 인스턴스 생성: 부모 요소의 크기 변화를 감지함
|
|
40
41
|
const observer = new ResizeObserver((entries) => {
|
|
41
|
-
console.log("!!!!", parentElement, entries);
|
|
42
|
-
// 감지된 모든 요소에 대해 반복
|
|
43
42
|
for (let entry of entries) {
|
|
44
43
|
// 감지된 요소의 현재 너비를 가져옴
|
|
45
44
|
const parentWidth = entry.contentRect.width;
|
|
@@ -47,13 +46,61 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
|
|
|
47
46
|
// 새로운 자식 요소의 크기 계산
|
|
48
47
|
const newWidth = parentWidth;
|
|
49
48
|
const newHeight = parentHeight;
|
|
49
|
+
// if (windowSize.width !== newWidth || windowSize.height !== newHeight) {
|
|
50
50
|
// // 자식 요소의 현재 크기와 새 크기가 다른 경우, 크기를 업데이트
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
51
|
+
if (parentElement.style.height) {
|
|
52
|
+
setWindowSize({
|
|
53
|
+
width: newWidth,
|
|
54
|
+
height: newHeight,
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
setWindowSize({
|
|
59
|
+
width: newWidth,
|
|
60
|
+
height: Math.max(initialWindowHeight, gridRef.current.store.state.dataSource.reduce((sum, item) => sum + item.height, 0) + 54),
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
// }
|
|
55
64
|
}
|
|
65
|
+
// const [entry] = entries;
|
|
66
|
+
// const observedHeight = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
|
|
67
|
+
// const observedWidth = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.width;
|
|
68
|
+
// if (parentElement.style.height) {
|
|
69
|
+
// setWindowSize({
|
|
70
|
+
// width: observedWidth,
|
|
71
|
+
// height: observedHeight,
|
|
72
|
+
// });
|
|
73
|
+
// } else {
|
|
74
|
+
// console.log("@@@", parentElement, parentElement.style.height);
|
|
75
|
+
// // 부모 height 없을 경우
|
|
76
|
+
// setWindowSize({
|
|
77
|
+
// width: observedWidth,
|
|
78
|
+
// height: Math.max(
|
|
79
|
+
// initialWindowHeight,
|
|
80
|
+
// gridRef.current.store.state.dataSource.reduce((sum, item) => sum + item.height!, 0)
|
|
81
|
+
// ),
|
|
82
|
+
// });
|
|
83
|
+
// }
|
|
56
84
|
});
|
|
85
|
+
// const observer = new ResizeObserver((entries) => {
|
|
86
|
+
// // // 감지된 모든 요소에 대해 반복
|
|
87
|
+
// // for (let entry of entries) {
|
|
88
|
+
// // // 감지된 요소의 현재 너비를 가져옴
|
|
89
|
+
// // const parentWidth = entry.contentRect.width;
|
|
90
|
+
// // const parentHeight = entry.contentRect.height;
|
|
91
|
+
// // // 새로운 자식 요소의 크기 계산
|
|
92
|
+
// // const newWidth = parentWidth;
|
|
93
|
+
// // const newHeight = parentHeight;
|
|
94
|
+
// // if (windowSize.width !== newWidth || windowSize.height !== newHeight) {
|
|
95
|
+
// // console.log("!!!!", newHeight, parentElement, entries);
|
|
96
|
+
// // // // 자식 요소의 현재 크기와 새 크기가 다른 경우, 크기를 업데이트
|
|
97
|
+
// // setWindowSize({
|
|
98
|
+
// // width: newWidth,
|
|
99
|
+
// // height: newHeight,
|
|
100
|
+
// // });
|
|
101
|
+
// // }
|
|
102
|
+
// // }
|
|
103
|
+
// });
|
|
57
104
|
// 부모 요소에 대한 참조가 있을 경우, 감지 시작
|
|
58
105
|
if (parentElement) {
|
|
59
106
|
observer.observe(parentElement);
|
package/lib/esm/App.js
CHANGED
|
@@ -166,7 +166,7 @@ function App() {
|
|
|
166
166
|
const ref = useGridApiRef();
|
|
167
167
|
const [dataSource, setDataSource] = useState([]);
|
|
168
168
|
const handleDataSource = () => {
|
|
169
|
-
const data = Array.from({ length:
|
|
169
|
+
const data = Array.from({ length: 200 }, (_, i) => {
|
|
170
170
|
return {
|
|
171
171
|
id: i,
|
|
172
172
|
code: `test-${i}`,
|
|
@@ -189,7 +189,7 @@ function App() {
|
|
|
189
189
|
handleDataSource();
|
|
190
190
|
}, children: "\uB370\uC774\uD130 set" }), _jsx("button", { onClick: () => {
|
|
191
191
|
const data = ref.current.getData();
|
|
192
|
-
}, children: "\uD558" }), _jsx("div", { style: { width: "1200px", height: "
|
|
192
|
+
}, children: "\uD558" }), _jsx("div", { style: { width: "1200px", height: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: columns, dataSource: dataSource }) }), _jsx("button", { children: "dd" })] }));
|
|
193
193
|
}
|
|
194
194
|
export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
|
|
195
195
|
return {
|
|
@@ -36,10 +36,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
|
|
|
36
36
|
var _a;
|
|
37
37
|
const store = gridRef.current.store;
|
|
38
38
|
const parentElement = (_a = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
39
|
+
// const parentElement = store?.gridContainer.current?.parentElement as HTMLDivElement;
|
|
39
40
|
// ResizeObserver 인스턴스 생성: 부모 요소의 크기 변화를 감지함
|
|
40
41
|
const observer = new ResizeObserver((entries) => {
|
|
41
|
-
console.log("!!!!", parentElement, entries);
|
|
42
|
-
// 감지된 모든 요소에 대해 반복
|
|
43
42
|
for (let entry of entries) {
|
|
44
43
|
// 감지된 요소의 현재 너비를 가져옴
|
|
45
44
|
const parentWidth = entry.contentRect.width;
|
|
@@ -47,13 +46,61 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
|
|
|
47
46
|
// 새로운 자식 요소의 크기 계산
|
|
48
47
|
const newWidth = parentWidth;
|
|
49
48
|
const newHeight = parentHeight;
|
|
49
|
+
// if (windowSize.width !== newWidth || windowSize.height !== newHeight) {
|
|
50
50
|
// // 자식 요소의 현재 크기와 새 크기가 다른 경우, 크기를 업데이트
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
51
|
+
if (parentElement.style.height) {
|
|
52
|
+
setWindowSize({
|
|
53
|
+
width: newWidth,
|
|
54
|
+
height: newHeight,
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
setWindowSize({
|
|
59
|
+
width: newWidth,
|
|
60
|
+
height: Math.max(initialWindowHeight, gridRef.current.store.state.dataSource.reduce((sum, item) => sum + item.height, 0) + 54),
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
// }
|
|
55
64
|
}
|
|
65
|
+
// const [entry] = entries;
|
|
66
|
+
// const observedHeight = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
|
|
67
|
+
// const observedWidth = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.width;
|
|
68
|
+
// if (parentElement.style.height) {
|
|
69
|
+
// setWindowSize({
|
|
70
|
+
// width: observedWidth,
|
|
71
|
+
// height: observedHeight,
|
|
72
|
+
// });
|
|
73
|
+
// } else {
|
|
74
|
+
// console.log("@@@", parentElement, parentElement.style.height);
|
|
75
|
+
// // 부모 height 없을 경우
|
|
76
|
+
// setWindowSize({
|
|
77
|
+
// width: observedWidth,
|
|
78
|
+
// height: Math.max(
|
|
79
|
+
// initialWindowHeight,
|
|
80
|
+
// gridRef.current.store.state.dataSource.reduce((sum, item) => sum + item.height!, 0)
|
|
81
|
+
// ),
|
|
82
|
+
// });
|
|
83
|
+
// }
|
|
56
84
|
});
|
|
85
|
+
// const observer = new ResizeObserver((entries) => {
|
|
86
|
+
// // // 감지된 모든 요소에 대해 반복
|
|
87
|
+
// // for (let entry of entries) {
|
|
88
|
+
// // // 감지된 요소의 현재 너비를 가져옴
|
|
89
|
+
// // const parentWidth = entry.contentRect.width;
|
|
90
|
+
// // const parentHeight = entry.contentRect.height;
|
|
91
|
+
// // // 새로운 자식 요소의 크기 계산
|
|
92
|
+
// // const newWidth = parentWidth;
|
|
93
|
+
// // const newHeight = parentHeight;
|
|
94
|
+
// // if (windowSize.width !== newWidth || windowSize.height !== newHeight) {
|
|
95
|
+
// // console.log("!!!!", newHeight, parentElement, entries);
|
|
96
|
+
// // // // 자식 요소의 현재 크기와 새 크기가 다른 경우, 크기를 업데이트
|
|
97
|
+
// // setWindowSize({
|
|
98
|
+
// // width: newWidth,
|
|
99
|
+
// // height: newHeight,
|
|
100
|
+
// // });
|
|
101
|
+
// // }
|
|
102
|
+
// // }
|
|
103
|
+
// });
|
|
57
104
|
// 부모 요소에 대한 참조가 있을 경우, 감지 시작
|
|
58
105
|
if (parentElement) {
|
|
59
106
|
observer.observe(parentElement);
|