@noraent/nora-datagrid 0.0.57 → 0.0.58

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 (7) hide show
  1. package/lib/cjs/App.js +1 -1
  2. package/lib/cjs/buildPackage.json +1 -1
  3. package/lib/cjs/components/TwoDimensionalVirtualizedList.js +8 -34
  4. package/lib/esm/App.js +1 -1
  5. package/lib/esm/buildPackage.json +1 -1
  6. package/lib/esm/components/TwoDimensionalVirtualizedList.js +8 -34
  7. package/package.json +1 -1
package/lib/cjs/App.js CHANGED
@@ -193,7 +193,7 @@ function App() {
193
193
  }, children: "1000000 \uC774\uB3D9" }), _jsx("button", { onClick: () => {
194
194
  handleDataSource();
195
195
  }, children: "\uB370\uC774\uD130 set" }), _jsx("button", { onClick: () => {
196
- const data = ref.current.getData();
196
+ // const data = ref.current.getData();
197
197
  }, children: "\uD558" }), _jsx("div", { style: { width: "1200px", height: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: columns, dataSource: dataSource }) }), _jsx("button", { children: "dd" })] }));
198
198
  }
199
199
  export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
package/lib/cjs/buildPackage.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.57",
3
+ "version": "0.0.58",
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
@@ -19,11 +19,7 @@ export const initialWindowHeight = 500;
19
19
  const overscanTopRow = 4;
20
20
  const overscanBottomRow = 10;
21
21
  const overscanColumn = 1;
22
- const targetFPS = 60;
23
- const frameInterval = 1000 / targetFPS;
24
22
  const DynamicVirtualScroll = React.memo(({ children }) => {
25
- const prevScrollTop = useRef(0);
26
- const prevScrollLeft = useRef(0);
27
23
  const [_scrollTop, setScrollTop] = useState(0);
28
24
  const [scrollLeft, setScrollLeft] = useState(0);
29
25
  const [windowSize, setWindowSize] = useState({
@@ -149,18 +145,16 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
149
145
  }
150
146
  return widths;
151
147
  }, [columns]);
152
- const prevRightScrollRef = useRef(0);
153
- const prevStartRef = useRef(0);
154
- const prevEndRef = useRef(0);
148
+ const domRef = React.useRef(null);
155
149
  const getItemRange = useEventCallback(() => {
156
150
  var _a, _b;
157
- const rightScrollTop = Math.round((_b = (_a = rightScrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0);
158
- if (prevRightScrollRef.current !== 0 && prevRightScrollRef.current === rightScrollTop) {
151
+ if (!domRef) {
159
152
  return {
160
- start: prevStartRef.current,
161
- end: prevEndRef.current,
153
+ start: 0,
154
+ end: 0,
162
155
  };
163
156
  }
157
+ const rightScrollTop = Math.round((_b = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0);
164
158
  const dataSource = gridRef.current.store.state.dataSource;
165
159
  const start = Math.max(0, binarySearchIndex(cumulativeHeights, rightScrollTop) - overscanTopRow);
166
160
  let end = Math.min(start + overscanBottomRow, dataSource.length);
@@ -169,9 +163,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
169
163
  end++;
170
164
  }
171
165
  end = Math.min(end + overscanBottomRow, dataSource.length);
172
- prevRightScrollRef.current = rightScrollTop;
173
- prevStartRef.current = start;
174
- prevEndRef.current = end;
175
166
  return { start, end };
176
167
  }
177
168
  // , [
@@ -212,7 +203,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
212
203
  end,
213
204
  ]);
214
205
  const startColumnIndex = useDeepCompareMemo(() => Math.max(0, binarySearchIndex(cumulativeWidths, scrollLeft) - overscanColumn), [cumulativeWidths, scrollLeft, binarySearchIndex, overscanColumn]);
215
- const domRef = React.useRef(null);
216
206
  // const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
217
207
  // const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
218
208
  const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start], [cumulativeHeights, start]);
@@ -245,7 +235,7 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
245
235
  }
246
236
  // ,[updateScroll, frameInterval]
247
237
  );
248
- const binarySearchColumnIndex = useEventCallback((items, start, scrollLeft, windowWidth) => {
238
+ const binarySearchColumnIndex = useCallback((items, start, scrollLeft, windowWidth) => {
249
239
  let high = items.length - 1;
250
240
  let target = windowWidth;
251
241
  let end = start;
@@ -256,12 +246,8 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
256
246
  }
257
247
  }
258
248
  return items.length - 1;
259
- });
260
- const columnEndIndex = binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width);
261
- // const columnEndIndex = useDeepCompareMemo(
262
- // () => binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft),
263
- // [cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width]
264
- // );
249
+ }, []);
250
+ const columnEndIndex = useDeepCompareMemo(() => binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width), [cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width]);
265
251
  const isSyncingRef = useRef(false);
266
252
  const isLocked = React.useRef(false);
267
253
  const handleScrollController = useCallback((e) => {
@@ -402,18 +388,6 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
402
388
  // e.preventDefault();
403
389
  const colIndex = Number(cell.getAttribute("aria-colindex"));
404
390
  const rowIndex = Number(row.getAttribute("aria-rowindex"));
405
- // const currentColIndex = gridRef.current.store.state.cellFocus[0];
406
- // const currentRowIndex = gridRef.current.store.state.cellFocus[1];
407
- // if (!(currentColIndex === rowIndex && currentRowIndex === colIndex)) {
408
- // // IME 문제가 있어 EditStatus.EDITING으로 변경
409
- // gridRef.current.setEditStatus(EditStatus.EDITABLE).then((editState) => {
410
- // store.setState(["state", "editStatus"], editState);
411
- // });
412
- // } else {
413
- // gridRef.current.setEditStatus(EditStatus.EDITING).then((editState) => {
414
- // store.setState(["state", "editStatus"], editState);
415
- // });
416
- // }
417
391
  if (clickTimer.current) {
418
392
  clearTimeout(clickTimer.current); // 더블 클릭 발생 시 실행 취소
419
393
  }
package/lib/esm/App.js CHANGED
@@ -193,7 +193,7 @@ function App() {
193
193
  }, children: "1000000 \uC774\uB3D9" }), _jsx("button", { onClick: () => {
194
194
  handleDataSource();
195
195
  }, children: "\uB370\uC774\uD130 set" }), _jsx("button", { onClick: () => {
196
- const data = ref.current.getData();
196
+ // const data = ref.current.getData();
197
197
  }, children: "\uD558" }), _jsx("div", { style: { width: "1200px", height: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: columns, dataSource: dataSource }) }), _jsx("button", { children: "dd" })] }));
198
198
  }
199
199
  export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
package/lib/esm/buildPackage.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.57",
3
+ "version": "0.0.58",
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
@@ -19,11 +19,7 @@ export const initialWindowHeight = 500;
19
19
  const overscanTopRow = 4;
20
20
  const overscanBottomRow = 10;
21
21
  const overscanColumn = 1;
22
- const targetFPS = 60;
23
- const frameInterval = 1000 / targetFPS;
24
22
  const DynamicVirtualScroll = React.memo(({ children }) => {
25
- const prevScrollTop = useRef(0);
26
- const prevScrollLeft = useRef(0);
27
23
  const [_scrollTop, setScrollTop] = useState(0);
28
24
  const [scrollLeft, setScrollLeft] = useState(0);
29
25
  const [windowSize, setWindowSize] = useState({
@@ -149,18 +145,16 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
149
145
  }
150
146
  return widths;
151
147
  }, [columns]);
152
- const prevRightScrollRef = useRef(0);
153
- const prevStartRef = useRef(0);
154
- const prevEndRef = useRef(0);
148
+ const domRef = React.useRef(null);
155
149
  const getItemRange = useEventCallback(() => {
156
150
  var _a, _b;
157
- const rightScrollTop = Math.round((_b = (_a = rightScrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0);
158
- if (prevRightScrollRef.current !== 0 && prevRightScrollRef.current === rightScrollTop) {
151
+ if (!domRef) {
159
152
  return {
160
- start: prevStartRef.current,
161
- end: prevEndRef.current,
153
+ start: 0,
154
+ end: 0,
162
155
  };
163
156
  }
157
+ const rightScrollTop = Math.round((_b = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0);
164
158
  const dataSource = gridRef.current.store.state.dataSource;
165
159
  const start = Math.max(0, binarySearchIndex(cumulativeHeights, rightScrollTop) - overscanTopRow);
166
160
  let end = Math.min(start + overscanBottomRow, dataSource.length);
@@ -169,9 +163,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
169
163
  end++;
170
164
  }
171
165
  end = Math.min(end + overscanBottomRow, dataSource.length);
172
- prevRightScrollRef.current = rightScrollTop;
173
- prevStartRef.current = start;
174
- prevEndRef.current = end;
175
166
  return { start, end };
176
167
  }
177
168
  // , [
@@ -212,7 +203,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
212
203
  end,
213
204
  ]);
214
205
  const startColumnIndex = useDeepCompareMemo(() => Math.max(0, binarySearchIndex(cumulativeWidths, scrollLeft) - overscanColumn), [cumulativeWidths, scrollLeft, binarySearchIndex, overscanColumn]);
215
- const domRef = React.useRef(null);
216
206
  // const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
217
207
  // const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
218
208
  const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start], [cumulativeHeights, start]);
@@ -245,7 +235,7 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
245
235
  }
246
236
  // ,[updateScroll, frameInterval]
247
237
  );
248
- const binarySearchColumnIndex = useEventCallback((items, start, scrollLeft, windowWidth) => {
238
+ const binarySearchColumnIndex = useCallback((items, start, scrollLeft, windowWidth) => {
249
239
  let high = items.length - 1;
250
240
  let target = windowWidth;
251
241
  let end = start;
@@ -256,12 +246,8 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
256
246
  }
257
247
  }
258
248
  return items.length - 1;
259
- });
260
- const columnEndIndex = binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width);
261
- // const columnEndIndex = useDeepCompareMemo(
262
- // () => binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft),
263
- // [cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width]
264
- // );
249
+ }, []);
250
+ const columnEndIndex = useDeepCompareMemo(() => binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width), [cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width]);
265
251
  const isSyncingRef = useRef(false);
266
252
  const isLocked = React.useRef(false);
267
253
  const handleScrollController = useCallback((e) => {
@@ -402,18 +388,6 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
402
388
  // e.preventDefault();
403
389
  const colIndex = Number(cell.getAttribute("aria-colindex"));
404
390
  const rowIndex = Number(row.getAttribute("aria-rowindex"));
405
- // const currentColIndex = gridRef.current.store.state.cellFocus[0];
406
- // const currentRowIndex = gridRef.current.store.state.cellFocus[1];
407
- // if (!(currentColIndex === rowIndex && currentRowIndex === colIndex)) {
408
- // // IME 문제가 있어 EditStatus.EDITING으로 변경
409
- // gridRef.current.setEditStatus(EditStatus.EDITABLE).then((editState) => {
410
- // store.setState(["state", "editStatus"], editState);
411
- // });
412
- // } else {
413
- // gridRef.current.setEditStatus(EditStatus.EDITING).then((editState) => {
414
- // store.setState(["state", "editStatus"], editState);
415
- // });
416
- // }
417
391
  if (clickTimer.current) {
418
392
  clearTimeout(clickTimer.current); // 더블 클릭 발생 시 실행 취소
419
393
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.57",
3
+ "version": "0.0.58",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,