@noraent/nora-datagrid 0.0.63 → 0.0.65

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,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.63",
3
+ "version": "0.0.65",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,
@@ -8,6 +8,7 @@
8
8
  "lib/"
9
9
  ],
10
10
  "type": "module",
11
+ "sideEffects": false,
11
12
  "scripts": {
12
13
  "start": "vite --mode on-local",
13
14
  "build:local": "tsc -b && vite build --mode on-local",
@@ -32,8 +33,7 @@
32
33
  "react": "^18.3.1",
33
34
  "react-dom": "^18.3.1",
34
35
  "rimraf": "^6.0.1",
35
- "sass-embedded": "^1.79.4",
36
- "vite-plugin-svgr": "^4.2.0"
36
+ "sass-embedded": "^1.79.4"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@babel/cli": "^7.26.4",
@@ -49,9 +49,11 @@
49
49
  "eslint-plugin-react-hooks": "^5.1.0-rc.0",
50
50
  "eslint-plugin-react-refresh": "^0.4.9",
51
51
  "globals": "^15.9.0",
52
+ "terser": "^5.39.0",
52
53
  "typescript": "^5.5.3",
53
54
  "typescript-eslint": "^8.0.1",
54
- "vite": "^5.4.1"
55
+ "vite": "^5.4.1",
56
+ "vite-plugin-svgr": "^4.2.0"
55
57
  },
56
58
  "babel": {
57
59
  "presets": [
@@ -1 +1,2 @@
1
1
  export * from "./defaultProps";
2
+ export * from "./useEventCallback";
@@ -1 +1,2 @@
1
1
  export * from "./defaultProps";
2
+ export * from "./useEventCallback";
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import * as React from "react";
3
2
  const useEnhancedEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
4
3
  export default useEnhancedEffect;
@@ -1,6 +1,5 @@
1
- "use client";
2
1
  import * as React from "react";
3
- import useEnhancedEffect from "./useEnhancedEffect";
2
+ import useEnhancedEffect from "./useEnhancedEffect/index";
4
3
  function useEventCallback(fn) {
5
4
  const ref = React.useRef(fn);
6
5
  useEnhancedEffect(() => {
@@ -57,33 +57,10 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
57
57
  }
58
58
  }
59
59
  });
60
- // const observer = new ResizeObserver((entries) => {
61
- // // // 감지된 모든 요소에 대해 반복
62
- // // for (let entry of entries) {
63
- // // // 감지된 요소의 현재 너비를 가져옴
64
- // // const parentWidth = entry.contentRect.width;
65
- // // const parentHeight = entry.contentRect.height;
66
- // // // 새로운 자식 요소의 크기 계산
67
- // // const newWidth = parentWidth;
68
- // // const newHeight = parentHeight;
69
- // // if (windowSize.width !== newWidth || windowSize.height !== newHeight) {
70
- // // console.log("!!!!", newHeight, parentElement, entries);
71
- // // // // 자식 요소의 현재 크기와 새 크기가 다른 경우, 크기를 업데이트
72
- // // setWindowSize({
73
- // // width: newWidth,
74
- // // height: newHeight,
75
- // // });
76
- // // }
77
- // // }
78
- // });
79
60
  // 부모 요소에 대한 참조가 있을 경우, 감지 시작
80
61
  if (parentElement) {
81
62
  observer.observe(parentElement);
82
63
  }
83
- // window.addEventListener("focusout", (event) => {
84
- // if ((event.target as Element).nextElementSibling?.className === "nora-data-grid-container") {
85
- // }
86
- // });
87
64
  return () => {
88
65
  if (parentElement) {
89
66
  observer.unobserve(parentElement);
@@ -158,18 +135,7 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
158
135
  }
159
136
  end = Math.min(end + overscanBottomRow, dataSource.length);
160
137
  return { start, end };
161
- }
162
- // , [
163
- // // dataSource,
164
- // // JSON.stringify(dataSource),
165
- // scrollTop,
166
- // cumulativeHeights,
167
- // windowSize.height,
168
- // binarySearchIndex,
169
- // cumulativeHeights,
170
- // // __randomDataSourceKey,
171
- // ]
172
- );
138
+ });
173
139
  const { start, end } = getItemRange();
174
140
  const visibleItems = useDeepCompareMemo(() => {
175
141
  const dataSource = gridRef.current.store.state.dataSource;
@@ -238,9 +204,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
238
204
  const domScroll = domRef.current;
239
205
  const rightScroll = rightScrollRef.current;
240
206
  const currentTarget = e.target;
241
- const scrollTop = currentTarget.scrollTop;
242
207
  requestAnimationFrame(() => {
243
208
  ReactDOM.flushSync(() => {
209
+ const scrollTop = currentTarget.scrollTop;
244
210
  if (domScroll && rightScroll) {
245
211
  domScroll.scrollTop = scrollTop;
246
212
  currentTarget.scrollTop !== undefined && setScrollTop(scrollTop);
@@ -306,11 +272,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
306
272
  }), [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` } }) })] }));
307
273
  });
308
274
  const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex, isColIndex, editStatus }) => {
309
- // 비효율 적임...
310
- // const { columns, dataSource } = useSelector<DataGridStoreDef, Pick<DataGridBasicPropsModelDef, "columns" | "dataSource">>((store) => ({
311
- // columns: store.state.columns,
312
- // dataSource: store.state.dataSource,
313
- // }));
314
275
  const gridRef = useGridApiContext();
315
276
  const columns = gridRef.current.store.state.columns;
316
277
  const dataSource = gridRef.current.store.state.dataSource;
@@ -322,7 +283,8 @@ const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths,
322
283
  }, [startColumnIndex, cumulativeWidths, windowSize, columnEndIndex]);
323
284
  const { start, end } = getItemRange();
324
285
  const visibleColumns = useDeepCompareMemo(() => columns.slice(start, end + 1), [start, end, columns]);
325
- const cellStyle = useMemo(() => ({ height: `${item.height}px` }), [item.height]);
286
+ const columnWidth = useDeepCompareMemo(() => visibleColumns.reduce((sum, item) => sum + Number(item.width), 0), [visibleColumns]);
287
+ const cellStyle = useMemo(() => ({ width: `${columnWidth}px`, height: `${item.height}px` }), [columnWidth, item.height]);
326
288
  return (_jsx(TableRow, { "aria-rowindex": item.__ariaRowindex, style: cellStyle, className: classes.TableClasses.body.row.root, children: visibleColumns.map((column) => (_jsx(VirtualItem, { column: column, row: row, rowIndex: item.__dataRowindex, isFocus: isColIndex === column.__ariaColindex, editStatus: isColIndex === column.__ariaColindex ? editStatus : undefined }, column.__uuid))) }, item.id));
327
289
  });
328
290
  const cellClassName = cx(classes.TableClasses.body.row.cell.root, classes.TableClasses.body.row.cell.classes);
@@ -440,9 +402,6 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
440
402
  return;
441
403
  }
442
404
  if (e.key === "Enter") {
443
- // gridRef.current.setEditStatus(EditStatus.IME_EDITING).then((editState) => {
444
- // store.setState(["state", "editStatus"], editState);
445
- // });
446
405
  const divElement = e.target;
447
406
  const cell = divElement.closest(`.${classes.TableClasses.body.row.cell.root}`);
448
407
  const row = divElement.closest(`.${classes.TableClasses.body.row.root}`);
@@ -10,6 +10,9 @@ const CellMode = (props) => {
10
10
  const gridPublicRef = React.useRef(gridRef.current.getPublicApi());
11
11
  const [inputValue, setInputValue] = React.useState(value);
12
12
  const inputRef = React.useRef(null);
13
+ const store = useStore();
14
+ const RenderEditCell = column.renderEditCell;
15
+ const RenderCell = column.renderCell;
13
16
  React.useEffect(() => {
14
17
  gridPublicRef.current = gridRef.current.getPublicApi();
15
18
  if (editStatus === EditStatus.EDITING || editStatus === EditStatus.EDITABLE) {
@@ -20,18 +23,15 @@ const CellMode = (props) => {
20
23
  return () => clearTimeout(tick);
21
24
  }
22
25
  }, [editStatus]);
23
- const store = useStore();
24
26
  const handleInputChange = React.useCallback((e) => {
25
27
  setInputValue(e.target.value);
26
28
  gridRef.current.cellByRowIndex(rowIndex, column.fieldId, e.target.value).then((dataSource) => {
27
29
  store.setState(["state", "dataSource"], dataSource, false);
28
30
  });
29
31
  }, [rowIndex]);
30
- const RenderEditCell = column.renderEditCell;
31
32
  if (editStatus === EditStatus.EDITING) {
32
33
  return (_jsx(React.Fragment, { children: RenderEditCell ? (_jsx(RenderEditCell, Object.assign({}, props, { gridRef: gridPublicRef, onChange: handleInputChange }))) : (_jsx(Input, { autoFocus: true, ref: inputRef, value: inputValue, onChange: handleInputChange })) }));
33
34
  }
34
- const RenderCell = column.renderCell;
35
35
  if (editStatus === EditStatus.NON_EDITABLE) {
36
36
  return _jsx(React.Fragment, { children: RenderCell ? _jsx(RenderCell, Object.assign({}, props, { gridRef: gridPublicRef })) : value });
37
37
  }
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.63",
3
+ "version": "0.0.65",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,
@@ -8,6 +8,7 @@
8
8
  "lib/"
9
9
  ],
10
10
  "type": "module",
11
+ "sideEffects": false,
11
12
  "scripts": {
12
13
  "start": "vite --mode on-local",
13
14
  "build:local": "tsc -b && vite build --mode on-local",
@@ -32,8 +33,7 @@
32
33
  "react": "^18.3.1",
33
34
  "react-dom": "^18.3.1",
34
35
  "rimraf": "^6.0.1",
35
- "sass-embedded": "^1.79.4",
36
- "vite-plugin-svgr": "^4.2.0"
36
+ "sass-embedded": "^1.79.4"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@babel/cli": "^7.26.4",
@@ -49,9 +49,11 @@
49
49
  "eslint-plugin-react-hooks": "^5.1.0-rc.0",
50
50
  "eslint-plugin-react-refresh": "^0.4.9",
51
51
  "globals": "^15.9.0",
52
+ "terser": "^5.39.0",
52
53
  "typescript": "^5.5.3",
53
54
  "typescript-eslint": "^8.0.1",
54
- "vite": "^5.4.1"
55
+ "vite": "^5.4.1",
56
+ "vite-plugin-svgr": "^4.2.0"
55
57
  },
56
58
  "babel": {
57
59
  "presets": [
@@ -1 +1,2 @@
1
1
  export * from "./defaultProps";
2
+ export * from "./useEventCallback";
@@ -1 +1,2 @@
1
1
  export * from "./defaultProps";
2
+ export * from "./useEventCallback";
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import * as React from "react";
3
2
  const useEnhancedEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
4
3
  export default useEnhancedEffect;
@@ -1,6 +1,5 @@
1
- "use client";
2
1
  import * as React from "react";
3
- import useEnhancedEffect from "./useEnhancedEffect";
2
+ import useEnhancedEffect from "./useEnhancedEffect/index";
4
3
  function useEventCallback(fn) {
5
4
  const ref = React.useRef(fn);
6
5
  useEnhancedEffect(() => {
@@ -57,33 +57,10 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
57
57
  }
58
58
  }
59
59
  });
60
- // const observer = new ResizeObserver((entries) => {
61
- // // // 감지된 모든 요소에 대해 반복
62
- // // for (let entry of entries) {
63
- // // // 감지된 요소의 현재 너비를 가져옴
64
- // // const parentWidth = entry.contentRect.width;
65
- // // const parentHeight = entry.contentRect.height;
66
- // // // 새로운 자식 요소의 크기 계산
67
- // // const newWidth = parentWidth;
68
- // // const newHeight = parentHeight;
69
- // // if (windowSize.width !== newWidth || windowSize.height !== newHeight) {
70
- // // console.log("!!!!", newHeight, parentElement, entries);
71
- // // // // 자식 요소의 현재 크기와 새 크기가 다른 경우, 크기를 업데이트
72
- // // setWindowSize({
73
- // // width: newWidth,
74
- // // height: newHeight,
75
- // // });
76
- // // }
77
- // // }
78
- // });
79
60
  // 부모 요소에 대한 참조가 있을 경우, 감지 시작
80
61
  if (parentElement) {
81
62
  observer.observe(parentElement);
82
63
  }
83
- // window.addEventListener("focusout", (event) => {
84
- // if ((event.target as Element).nextElementSibling?.className === "nora-data-grid-container") {
85
- // }
86
- // });
87
64
  return () => {
88
65
  if (parentElement) {
89
66
  observer.unobserve(parentElement);
@@ -158,18 +135,7 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
158
135
  }
159
136
  end = Math.min(end + overscanBottomRow, dataSource.length);
160
137
  return { start, end };
161
- }
162
- // , [
163
- // // dataSource,
164
- // // JSON.stringify(dataSource),
165
- // scrollTop,
166
- // cumulativeHeights,
167
- // windowSize.height,
168
- // binarySearchIndex,
169
- // cumulativeHeights,
170
- // // __randomDataSourceKey,
171
- // ]
172
- );
138
+ });
173
139
  const { start, end } = getItemRange();
174
140
  const visibleItems = useDeepCompareMemo(() => {
175
141
  const dataSource = gridRef.current.store.state.dataSource;
@@ -238,9 +204,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
238
204
  const domScroll = domRef.current;
239
205
  const rightScroll = rightScrollRef.current;
240
206
  const currentTarget = e.target;
241
- const scrollTop = currentTarget.scrollTop;
242
207
  requestAnimationFrame(() => {
243
208
  ReactDOM.flushSync(() => {
209
+ const scrollTop = currentTarget.scrollTop;
244
210
  if (domScroll && rightScroll) {
245
211
  domScroll.scrollTop = scrollTop;
246
212
  currentTarget.scrollTop !== undefined && setScrollTop(scrollTop);
@@ -306,11 +272,6 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
306
272
  }), [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` } }) })] }));
307
273
  });
308
274
  const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex, isColIndex, editStatus }) => {
309
- // 비효율 적임...
310
- // const { columns, dataSource } = useSelector<DataGridStoreDef, Pick<DataGridBasicPropsModelDef, "columns" | "dataSource">>((store) => ({
311
- // columns: store.state.columns,
312
- // dataSource: store.state.dataSource,
313
- // }));
314
275
  const gridRef = useGridApiContext();
315
276
  const columns = gridRef.current.store.state.columns;
316
277
  const dataSource = gridRef.current.store.state.dataSource;
@@ -322,7 +283,8 @@ const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths,
322
283
  }, [startColumnIndex, cumulativeWidths, windowSize, columnEndIndex]);
323
284
  const { start, end } = getItemRange();
324
285
  const visibleColumns = useDeepCompareMemo(() => columns.slice(start, end + 1), [start, end, columns]);
325
- const cellStyle = useMemo(() => ({ height: `${item.height}px` }), [item.height]);
286
+ const columnWidth = useDeepCompareMemo(() => visibleColumns.reduce((sum, item) => sum + Number(item.width), 0), [visibleColumns]);
287
+ const cellStyle = useMemo(() => ({ width: `${columnWidth}px`, height: `${item.height}px` }), [columnWidth, item.height]);
326
288
  return (_jsx(TableRow, { "aria-rowindex": item.__ariaRowindex, style: cellStyle, className: classes.TableClasses.body.row.root, children: visibleColumns.map((column) => (_jsx(VirtualItem, { column: column, row: row, rowIndex: item.__dataRowindex, isFocus: isColIndex === column.__ariaColindex, editStatus: isColIndex === column.__ariaColindex ? editStatus : undefined }, column.__uuid))) }, item.id));
327
289
  });
328
290
  const cellClassName = cx(classes.TableClasses.body.row.cell.root, classes.TableClasses.body.row.cell.classes);
@@ -440,9 +402,6 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
440
402
  return;
441
403
  }
442
404
  if (e.key === "Enter") {
443
- // gridRef.current.setEditStatus(EditStatus.IME_EDITING).then((editState) => {
444
- // store.setState(["state", "editStatus"], editState);
445
- // });
446
405
  const divElement = e.target;
447
406
  const cell = divElement.closest(`.${classes.TableClasses.body.row.cell.root}`);
448
407
  const row = divElement.closest(`.${classes.TableClasses.body.row.root}`);
@@ -10,6 +10,9 @@ const CellMode = (props) => {
10
10
  const gridPublicRef = React.useRef(gridRef.current.getPublicApi());
11
11
  const [inputValue, setInputValue] = React.useState(value);
12
12
  const inputRef = React.useRef(null);
13
+ const store = useStore();
14
+ const RenderEditCell = column.renderEditCell;
15
+ const RenderCell = column.renderCell;
13
16
  React.useEffect(() => {
14
17
  gridPublicRef.current = gridRef.current.getPublicApi();
15
18
  if (editStatus === EditStatus.EDITING || editStatus === EditStatus.EDITABLE) {
@@ -20,18 +23,15 @@ const CellMode = (props) => {
20
23
  return () => clearTimeout(tick);
21
24
  }
22
25
  }, [editStatus]);
23
- const store = useStore();
24
26
  const handleInputChange = React.useCallback((e) => {
25
27
  setInputValue(e.target.value);
26
28
  gridRef.current.cellByRowIndex(rowIndex, column.fieldId, e.target.value).then((dataSource) => {
27
29
  store.setState(["state", "dataSource"], dataSource, false);
28
30
  });
29
31
  }, [rowIndex]);
30
- const RenderEditCell = column.renderEditCell;
31
32
  if (editStatus === EditStatus.EDITING) {
32
33
  return (_jsx(React.Fragment, { children: RenderEditCell ? (_jsx(RenderEditCell, Object.assign({}, props, { gridRef: gridPublicRef, onChange: handleInputChange }))) : (_jsx(Input, { autoFocus: true, ref: inputRef, value: inputValue, onChange: handleInputChange })) }));
33
34
  }
34
- const RenderCell = column.renderCell;
35
35
  if (editStatus === EditStatus.NON_EDITABLE) {
36
36
  return _jsx(React.Fragment, { children: RenderCell ? _jsx(RenderCell, Object.assign({}, props, { gridRef: gridPublicRef })) : value });
37
37
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.63",
3
+ "version": "0.0.65",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,
@@ -8,6 +8,7 @@
8
8
  "lib/"
9
9
  ],
10
10
  "type": "module",
11
+ "sideEffects": false,
11
12
  "scripts": {
12
13
  "start": "vite --mode on-local",
13
14
  "build:local": "tsc -b && vite build --mode on-local",
@@ -32,8 +33,7 @@
32
33
  "react": "^18.3.1",
33
34
  "react-dom": "^18.3.1",
34
35
  "rimraf": "^6.0.1",
35
- "sass-embedded": "^1.79.4",
36
- "vite-plugin-svgr": "^4.2.0"
36
+ "sass-embedded": "^1.79.4"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@babel/cli": "^7.26.4",
@@ -49,9 +49,11 @@
49
49
  "eslint-plugin-react-hooks": "^5.1.0-rc.0",
50
50
  "eslint-plugin-react-refresh": "^0.4.9",
51
51
  "globals": "^15.9.0",
52
+ "terser": "^5.39.0",
52
53
  "typescript": "^5.5.3",
53
54
  "typescript-eslint": "^8.0.1",
54
- "vite": "^5.4.1"
55
+ "vite": "^5.4.1",
56
+ "vite-plugin-svgr": "^4.2.0"
55
57
  },
56
58
  "babel": {
57
59
  "presets": [