@noraent/nora-datagrid 0.0.61 → 0.0.63

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.
Files changed (5) hide show
  1. package/lib/cjs/buildPackage.json +1 -1
  2. package/lib/cjs/components/TwoDimensionalVirtualizedList.js +24 -28
  3. package/lib/esm/buildPackage.json +1 -1
  4. package/lib/esm/components/TwoDimensionalVirtualizedList.js +24 -28
  5. package/package.json +1 -1
package/lib/cjs/buildPackage.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.61",
3
+ "version": "0.0.63",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,
package/lib/cjs/components/TwoDimensionalVirtualizedList.js CHANGED
@@ -90,8 +90,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
90
90
  }
91
91
  };
92
92
  }, []);
93
- const { columns } = useSelector((store) => ({
93
+ const { columns, cumulativeHeights } = useSelector((store) => ({
94
94
  columns: store.state.columns,
95
+ cumulativeHeights: store.cumulativeHeights,
95
96
  }));
96
97
  // const { dataSource } = useSelector<DataGridStoreDef, Pick<DataGridBasicPropsModelDef, "dataSource">>((store) => ({
97
98
  // dataSource: store.state.dataSource,
@@ -99,9 +100,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
99
100
  // const { __randomDataSourceKey } = useSelector<DataGridStoreDef, Pick<DataGridStoreDef, "__randomDataSourceKey">>((store) => ({
100
101
  // __randomDataSourceKey: store.__randomDataSourceKey,
101
102
  // }));
102
- const { cumulativeHeights } = useSelector((store) => ({
103
- cumulativeHeights: store.cumulativeHeights,
104
- }));
103
+ // const { cumulativeHeights } = useSelector<DataGridStoreDef, Pick<DataGridStoreDef, "cumulativeHeights">>((store) => ({
104
+ // cumulativeHeights: store.cumulativeHeights,
105
+ // }));
105
106
  // 높이 계산 로직인데 dataSource깊은 복사를 통해 변경을 감지하여 다시 계산하기에는 성능 이슈가 발생할수있어. 수정 필요
106
107
  //
107
108
  // const totalHeight = useDeepCompareMemo(() => dataSource.reduce((sum, item) => sum + item.height!, 0), [dataSource]);
@@ -131,13 +132,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
131
132
  }
132
133
  return Math.max(0, low - 1);
133
134
  }, []);
134
- // const cumulativeHeights = useDeepCompareMemo(() => {
135
- // const heights = [0];
136
- // for (let i = 0; i < dataSource.length; i++) {
137
- // heights.push(heights[i] + dataSource[i].height!);
138
- // }
139
- // return heights;
140
- // }, [dataSource]);
141
135
  const cumulativeWidths = useDeepCompareMemo(() => {
142
136
  const widths = [0];
143
137
  for (let i = 0; i < columns.length || 0; i++) {
@@ -194,25 +188,22 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
194
188
  result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
195
189
  }
196
190
  return result;
197
- }, [
198
- // totalHeight,
199
- // __randomDataSourceKey,
200
- // dataSource,
201
- cumulativeHeights,
202
- start,
203
- end,
204
- ]);
191
+ }, [cumulativeHeights, start, end]);
205
192
  const startColumnIndex = useDeepCompareMemo(() => Math.max(0, binarySearchIndex(cumulativeWidths, scrollLeft) - overscanColumn), [cumulativeWidths, scrollLeft, binarySearchIndex, overscanColumn]);
206
- // const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
207
- // const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
208
193
  const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start], [cumulativeHeights, start]);
209
194
  const offsetLeft = useDeepCompareMemo(() => cumulativeWidths[startColumnIndex] || 0, [cumulativeWidths, startColumnIndex]);
210
195
  const prevScrollTop = useRef(0);
211
196
  const prevScrollLeft = useRef(0);
212
197
  const handleScroll = useEventCallback((e) => {
198
+ if (isLocked.current) {
199
+ isLocked.current = false;
200
+ return;
201
+ }
213
202
  const rightScroll = rightScrollRef.current;
214
203
  const bottomScroll = bottomScrollRef.current;
215
- const { scrollTop, scrollLeft } = e.currentTarget;
204
+ const container = e.currentTarget;
205
+ const scrollTop = container.scrollTop;
206
+ const scrollLeft = container.scrollLeft;
216
207
  rightScroll.scrollTop = scrollTop;
217
208
  bottomScroll.scrollLeft = scrollLeft;
218
209
  if (prevScrollTop.current !== scrollTop) {
@@ -247,11 +238,12 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
247
238
  const domScroll = domRef.current;
248
239
  const rightScroll = rightScrollRef.current;
249
240
  const currentTarget = e.target;
241
+ const scrollTop = currentTarget.scrollTop;
250
242
  requestAnimationFrame(() => {
251
243
  ReactDOM.flushSync(() => {
252
244
  if (domScroll && rightScroll) {
253
- domScroll.scrollTop = currentTarget.scrollTop;
254
- currentTarget.scrollTop !== undefined && setScrollTop(currentTarget.scrollTop);
245
+ domScroll.scrollTop = scrollTop;
246
+ currentTarget.scrollTop !== undefined && setScrollTop(scrollTop);
255
247
  }
256
248
  });
257
249
  });
@@ -314,10 +306,14 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
314
306
  }), [visibleItems, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex])) }) })] })] }), _jsx(RightScrollBar, { ref: rightScrollRef, style: { height: windowSize.height - 54, right: "0px" }, children: _jsx("div", { style: { width: "14px", height: `${totalHeight}px` } }) }), _jsx(BottomScrollBar, { ref: bottomScrollRef, style: { width: windowSize.width }, children: _jsx("div", { style: { height: "14px", width: `${totalWidth}px` } }) })] }));
315
307
  });
316
308
  const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex, isColIndex, editStatus }) => {
317
- const { columns, dataSource } = useSelector((store) => ({
318
- columns: store.state.columns,
319
- dataSource: store.state.dataSource,
320
- }));
309
+ // 비효율 적임...
310
+ // const { columns, dataSource } = useSelector<DataGridStoreDef, Pick<DataGridBasicPropsModelDef, "columns" | "dataSource">>((store) => ({
311
+ // columns: store.state.columns,
312
+ // dataSource: store.state.dataSource,
313
+ // }));
314
+ const gridRef = useGridApiContext();
315
+ const columns = gridRef.current.store.state.columns;
316
+ const dataSource = gridRef.current.store.state.dataSource;
321
317
  const row = dataSource[item.__dataRowindex];
322
318
  const getItemRange = useCallback(() => {
323
319
  const start = startColumnIndex;
package/lib/esm/buildPackage.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.61",
3
+ "version": "0.0.63",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,
package/lib/esm/components/TwoDimensionalVirtualizedList.js CHANGED
@@ -90,8 +90,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
90
90
  }
91
91
  };
92
92
  }, []);
93
- const { columns } = useSelector((store) => ({
93
+ const { columns, cumulativeHeights } = useSelector((store) => ({
94
94
  columns: store.state.columns,
95
+ cumulativeHeights: store.cumulativeHeights,
95
96
  }));
96
97
  // const { dataSource } = useSelector<DataGridStoreDef, Pick<DataGridBasicPropsModelDef, "dataSource">>((store) => ({
97
98
  // dataSource: store.state.dataSource,
@@ -99,9 +100,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
99
100
  // const { __randomDataSourceKey } = useSelector<DataGridStoreDef, Pick<DataGridStoreDef, "__randomDataSourceKey">>((store) => ({
100
101
  // __randomDataSourceKey: store.__randomDataSourceKey,
101
102
  // }));
102
- const { cumulativeHeights } = useSelector((store) => ({
103
- cumulativeHeights: store.cumulativeHeights,
104
- }));
103
+ // const { cumulativeHeights } = useSelector<DataGridStoreDef, Pick<DataGridStoreDef, "cumulativeHeights">>((store) => ({
104
+ // cumulativeHeights: store.cumulativeHeights,
105
+ // }));
105
106
  // 높이 계산 로직인데 dataSource깊은 복사를 통해 변경을 감지하여 다시 계산하기에는 성능 이슈가 발생할수있어. 수정 필요
106
107
  //
107
108
  // const totalHeight = useDeepCompareMemo(() => dataSource.reduce((sum, item) => sum + item.height!, 0), [dataSource]);
@@ -131,13 +132,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
131
132
  }
132
133
  return Math.max(0, low - 1);
133
134
  }, []);
134
- // const cumulativeHeights = useDeepCompareMemo(() => {
135
- // const heights = [0];
136
- // for (let i = 0; i < dataSource.length; i++) {
137
- // heights.push(heights[i] + dataSource[i].height!);
138
- // }
139
- // return heights;
140
- // }, [dataSource]);
141
135
  const cumulativeWidths = useDeepCompareMemo(() => {
142
136
  const widths = [0];
143
137
  for (let i = 0; i < columns.length || 0; i++) {
@@ -194,25 +188,22 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
194
188
  result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
195
189
  }
196
190
  return result;
197
- }, [
198
- // totalHeight,
199
- // __randomDataSourceKey,
200
- // dataSource,
201
- cumulativeHeights,
202
- start,
203
- end,
204
- ]);
191
+ }, [cumulativeHeights, start, end]);
205
192
  const startColumnIndex = useDeepCompareMemo(() => Math.max(0, binarySearchIndex(cumulativeWidths, scrollLeft) - overscanColumn), [cumulativeWidths, scrollLeft, binarySearchIndex, overscanColumn]);
206
- // const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
207
- // const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
208
193
  const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start], [cumulativeHeights, start]);
209
194
  const offsetLeft = useDeepCompareMemo(() => cumulativeWidths[startColumnIndex] || 0, [cumulativeWidths, startColumnIndex]);
210
195
  const prevScrollTop = useRef(0);
211
196
  const prevScrollLeft = useRef(0);
212
197
  const handleScroll = useEventCallback((e) => {
198
+ if (isLocked.current) {
199
+ isLocked.current = false;
200
+ return;
201
+ }
213
202
  const rightScroll = rightScrollRef.current;
214
203
  const bottomScroll = bottomScrollRef.current;
215
- const { scrollTop, scrollLeft } = e.currentTarget;
204
+ const container = e.currentTarget;
205
+ const scrollTop = container.scrollTop;
206
+ const scrollLeft = container.scrollLeft;
216
207
  rightScroll.scrollTop = scrollTop;
217
208
  bottomScroll.scrollLeft = scrollLeft;
218
209
  if (prevScrollTop.current !== scrollTop) {
@@ -247,11 +238,12 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
247
238
  const domScroll = domRef.current;
248
239
  const rightScroll = rightScrollRef.current;
249
240
  const currentTarget = e.target;
241
+ const scrollTop = currentTarget.scrollTop;
250
242
  requestAnimationFrame(() => {
251
243
  ReactDOM.flushSync(() => {
252
244
  if (domScroll && rightScroll) {
253
- domScroll.scrollTop = currentTarget.scrollTop;
254
- currentTarget.scrollTop !== undefined && setScrollTop(currentTarget.scrollTop);
245
+ domScroll.scrollTop = scrollTop;
246
+ currentTarget.scrollTop !== undefined && setScrollTop(scrollTop);
255
247
  }
256
248
  });
257
249
  });
@@ -314,10 +306,14 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
314
306
  }), [visibleItems, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex])) }) })] })] }), _jsx(RightScrollBar, { ref: rightScrollRef, style: { height: windowSize.height - 54, right: "0px" }, children: _jsx("div", { style: { width: "14px", height: `${totalHeight}px` } }) }), _jsx(BottomScrollBar, { ref: bottomScrollRef, style: { width: windowSize.width }, children: _jsx("div", { style: { height: "14px", width: `${totalWidth}px` } }) })] }));
315
307
  });
316
308
  const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex, isColIndex, editStatus }) => {
317
- const { columns, dataSource } = useSelector((store) => ({
318
- columns: store.state.columns,
319
- dataSource: store.state.dataSource,
320
- }));
309
+ // 비효율 적임...
310
+ // const { columns, dataSource } = useSelector<DataGridStoreDef, Pick<DataGridBasicPropsModelDef, "columns" | "dataSource">>((store) => ({
311
+ // columns: store.state.columns,
312
+ // dataSource: store.state.dataSource,
313
+ // }));
314
+ const gridRef = useGridApiContext();
315
+ const columns = gridRef.current.store.state.columns;
316
+ const dataSource = gridRef.current.store.state.dataSource;
321
317
  const row = dataSource[item.__dataRowindex];
322
318
  const getItemRange = useCallback(() => {
323
319
  const start = startColumnIndex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.61",
3
+ "version": "0.0.63",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,