@noraent/nora-datagrid 0.0.5 → 0.0.7

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 (17) hide show
  1. package/lib/cjs/App.js +14 -16
  2. package/lib/cjs/DataGrid.js +1 -1
  3. package/lib/cjs/buildPackage.json +1 -1
  4. package/lib/cjs/components/TwoDimensionalVirtualizedList.js +7 -2
  5. package/lib/cjs/components/cell/CellMode.js +4 -4
  6. package/lib/cjs/components/ime/IMEComponent.js +2 -53
  7. package/lib/cjs/hooks/internal/useInternalPrivateApi.js +2 -1
  8. package/lib/cjs/types/dataGridProps.d.ts +4 -0
  9. package/lib/esm/App.js +14 -16
  10. package/lib/esm/DataGrid.js +1 -1
  11. package/lib/esm/buildPackage.json +1 -1
  12. package/lib/esm/components/TwoDimensionalVirtualizedList.js +7 -2
  13. package/lib/esm/components/cell/CellMode.js +4 -4
  14. package/lib/esm/components/ime/IMEComponent.js +2 -53
  15. package/lib/esm/hooks/internal/useInternalPrivateApi.js +2 -1
  16. package/lib/esm/types/dataGridProps.d.ts +4 -0
  17. package/package.json +1 -1
package/lib/cjs/App.js CHANGED
@@ -3,7 +3,7 @@ import React from "react";
3
3
  import { DataGrid } from "./DataGrid";
4
4
  function App() {
5
5
  const ref = React.useRef(null);
6
- return (_jsxs(_Fragment, { children: [_jsx("button", { children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "100%", maxHeight: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: [
6
+ return (_jsxs(_Fragment, { children: [_jsx("button", { children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "100%", maxHeight: "600px" }, children: _jsx(DataGrid, { readOnly: true, gridRef: ref, columns: [
7
7
  {
8
8
  fieldId: "firstName",
9
9
  fieldName: "코드",
@@ -113,21 +113,19 @@ function App() {
113
113
  fieldName: "currency21",
114
114
  width: "120",
115
115
  },
116
- ],
117
- // dataSource={Array.from({ length: 100 }, (_, i) => {
118
- // return {
119
- // id: i,
120
- // firstName: `test-${i}`,
121
- // lastName: `lastName-${i}`,
122
- // currency: `currency-${i}`,
123
- // currency14: `currency14-${i}`,
124
- // currency15: `currency15-${i}`,
125
- // __uuid: "",
126
- // // height: 30,
127
- // // height: Math.floor(Math.random() * 20) + 20,
128
- // };
129
- // })}
130
- dataSource: [] }) }), _jsx("button", { children: "dd" })] }));
116
+ ], dataSource: Array.from({ length: 30 }, (_, i) => {
117
+ return {
118
+ id: i,
119
+ firstName: `test-${i}`,
120
+ lastName: `lastName-${i}`,
121
+ currency: `currency-${i}`,
122
+ currency14: `currency14-${i}`,
123
+ currency15: `currency15-${i}`,
124
+ __uuid: "",
125
+ // height: 30,
126
+ // height: Math.floor(Math.random() * 20) + 20,
127
+ };
128
+ }) }) }), _jsx("button", { children: "dd" })] }));
131
129
  }
132
130
  export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
133
131
  return {
package/lib/cjs/DataGrid.js CHANGED
@@ -32,6 +32,6 @@ const DataGridMaster = React.forwardRef((props, _ref) => {
32
32
  // }
33
33
  // return () => clearInterval(id);
34
34
  // }, [count]);
35
- return (_jsx(_Fragment, { children: _jsx(GridApiContext.Provider, { value: apiRef, children: _jsxs(GridStoreContentProvider, { value: apiRef, children: [_jsx("button", { onClick: () => { }, children: "!!" }), _jsxs(NoraDataGrid, { ref: containerRef, children: [_jsx(NoraDataGrid.Title, { children: "\uC624\uBC84\uB77C\uC774\uB4DC \uD588\uC5B4\uC6A9" }), _jsx(NoraDataGrid.Body, { children: !isPending && apiRef.current.store && _jsx(TwoDimensionalVirtualizedList, {}) })] })] }) }) }));
35
+ return (_jsx(_Fragment, { children: _jsx(GridApiContext.Provider, { value: apiRef, children: _jsx(GridStoreContentProvider, { value: apiRef, children: _jsxs(NoraDataGrid, { ref: containerRef, children: [_jsx(NoraDataGrid.Title, {}), _jsx(NoraDataGrid.Body, { children: !isPending && apiRef.current.store && _jsx(TwoDimensionalVirtualizedList, {}) })] }) }) }) }));
36
36
  });
37
37
  export const DataGrid = React.memo(DataGridMaster);
package/lib/cjs/buildPackage.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
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
@@ -130,7 +130,8 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
130
130
  }
131
131
  // 포함 안되어있으면 추가
132
132
  if (rowIndex && rowIndex >= end) {
133
- result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
133
+ if (result[result.length - 1].__ariaRowindex !== dataSource[rowIndex - 1].__ariaRowindex)
134
+ result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
134
135
  }
135
136
  return result;
136
137
  }, [dataSource, start, end]);
@@ -258,7 +259,7 @@ const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths,
258
259
  const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, }) => {
259
260
  const cellStyle = useMemo(() => ({ width: `${column.width}px` }), [column.width]);
260
261
  const cellClassName = useMemo(() => cx(classes.TableClasses.body.row.cell.root, classes.TableClasses.body.row.cell.classes), [classes.TableClasses.body.row.cell.root, classes.TableClasses.body.row.cell.classes]);
261
- return (_jsx(TableCell, { "aria-colindex": column.__ariaColindex, tabIndex: isFocus ? 0 : -1, style: cellStyle, className: cellClassName, children: _jsx(CellMode, { column: column, value: row[column.fieldId], editStatus: editStatus, rowIndex: rowIndex }) }, column.__uuid));
262
+ return (_jsx(TableCell, { "aria-colindex": column.__ariaColindex, tabIndex: isFocus ? 0 : -1, style: cellStyle, className: cellClassName, children: _jsx(CellMode, { column: column, value: row ? row[column.fieldId] : "", editStatus: editStatus, rowIndex: rowIndex }) }, column.__uuid));
262
263
  });
263
264
  export const TwoDimensionalVirtualizedList = React.memo(() => {
264
265
  // 마우스 다운 시작지점점
@@ -515,9 +516,13 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
515
516
  }, []);
516
517
  const handleKeydown = useCallback((e) => {
517
518
  handleArrowKey(e);
519
+ if (gridRef.current.store.state.readOnly)
520
+ return;
518
521
  handleEditEvent(e);
519
522
  }, []);
520
523
  const handleDbClick = useCallback(() => {
524
+ if (gridRef.current.store.state.readOnly)
525
+ return;
521
526
  gridRef.current.setEditStatus(EditStatus.EDITING).then((editState) => {
522
527
  store.setState(["state", "editStatus"], editState);
523
528
  });
package/lib/cjs/components/cell/CellMode.js CHANGED
@@ -19,13 +19,13 @@ const CellMode = ({ column, value, editStatus, rowIndex, }) => {
19
19
  }, [editStatus]);
20
20
  const store = useStore();
21
21
  const handleInputChange = React.useCallback((e) => {
22
- console.log("handleInputChange", rowIndex, e, e.target.value);
23
22
  setInputValue(e.target.value);
24
- const dataSource = gridRef.current.cellByRowIndex(rowIndex, column.fieldId, e.target.value);
25
- store.setState(["state", "dataSource"], dataSource, false);
23
+ gridRef.current.cellByRowIndex(rowIndex, column.fieldId, e.target.value).then((dataSource) => {
24
+ store.setState(["state", "dataSource"], dataSource, false);
25
+ });
26
26
  }, [rowIndex]);
27
27
  if (editStatus === EditStatus.EDITING)
28
- return _jsx(Input, { autoFocus: true, ref: inputRef, value: inputValue, onChange: handleInputChange }, 1);
28
+ return _jsx(Input, { autoFocus: true, ref: inputRef, value: inputValue, onChange: handleInputChange });
29
29
  if (editStatus === EditStatus.NON_EDITABLE)
30
30
  return _jsx(React.Fragment, { children: value });
31
31
  return _jsx(React.Fragment, { children: value });
package/lib/cjs/components/ime/IMEComponent.js CHANGED
@@ -14,48 +14,13 @@ const IMEComponent = React.forwardRef((props, ref) => {
14
14
  const { cellFocus } = useSelector((store) => ({
15
15
  cellFocus: store.state.cellFocus,
16
16
  }));
17
- // React.useEffect(() => {
18
- // const currentRef = ref as React.MutableRefObject<HTMLTextAreaElement | null>;
19
- // if (currentRef.current) {
20
- // currentRef.current.addEventListener("keydown", handleTextAreaInput);
21
- // }
22
- // return () => {
23
- // if (currentRef.current) {
24
- // currentRef.current.removeEventListener("keydown", handleTextAreaInput);
25
- // }
26
- // };
27
- // }, []);
28
17
  const handleValueChange = useCallback((e) => {
29
18
  setImeValue(e.target.value);
30
19
  }, []);
31
- const handleTextAreaInput = React.useCallback((e) => {
32
- var _a, _b;
33
- const cellFocus = gridRef.current.store.state.cellFocus;
34
- const rowIndex = cellFocus[0];
35
- const colIndex = cellFocus[1];
36
- const event = e.target;
37
- const currentRef = ref;
38
- // 셀위치 가져오기
39
- const containerElement = gridRef.current.store.gridContainer.current;
40
- if (containerElement) {
41
- const rowElement = containerElement.querySelector(`.${classes.TableClasses.body.row.root}[aria-rowindex="${rowIndex}"]`);
42
- if (rowElement) {
43
- const cellElement = rowElement.querySelector(`.${classes.TableClasses.body.row.cell.root}[aria-colindex="${colIndex}"]`);
44
- if (cellElement) {
45
- const top = (_a = cellElement.getBoundingClientRect().top) !== null && _a !== void 0 ? _a : 0;
46
- const left = (_b = cellElement.getBoundingClientRect().left) !== null && _b !== void 0 ? _b : 0;
47
- if (!currentRef.current)
48
- return;
49
- currentRef.current.style.top = `${top}px`;
50
- currentRef.current.style.left = `${left}px`;
51
- }
52
- }
53
- }
54
- if (currentRef.current)
55
- currentRef.current.value = event.value;
56
- }, [cellFocus]);
57
20
  const handleKeyDown = React.useCallback((e) => {
58
21
  var _a, _b, _c;
22
+ if (gridRef.current.store.state.readOnly)
23
+ return;
59
24
  if (e.nativeEvent.isComposing)
60
25
  return;
61
26
  if (e.key === "Enter") {
@@ -95,22 +60,6 @@ const IMEComponent = React.forwardRef((props, ref) => {
95
60
  return;
96
61
  if (!colIndex)
97
62
  return;
98
- // if (e.key === "ArrowLeft") {
99
- // colIndex = colIndex - 1;
100
- // setImeValue("");
101
- // }
102
- // if (e.key === "ArrowRight") {
103
- // colIndex = colIndex + 1;
104
- // setImeValue("");
105
- // }
106
- // if (e.key === "ArrowDown") {
107
- // rowIndex = rowIndex + 1;
108
- // setImeValue("");
109
- // }
110
- // if (e.key === "ArrowUp") {
111
- // rowIndex = rowIndex - 1;
112
- // setImeValue("");
113
- // }
114
63
  const event = e.target;
115
64
  const currentRef = ref;
116
65
  // 셀위치 가져오기
package/lib/cjs/hooks/internal/useInternalPrivateApi.js CHANGED
@@ -36,7 +36,7 @@ export default function useInternalPrivateApi(apiRef) {
36
36
  return apiRef.current;
37
37
  }, []);
38
38
  const setBasicStore = React.useCallback((props) => {
39
- const myFilterTypeKeys = ["columns", "dataSource", "cellFocus"];
39
+ const myFilterTypeKeys = ["columns", "dataSource", "cellFocus", "editStatus", "readOnly"];
40
40
  return myFilterTypeKeys.reduce((acc, key) => {
41
41
  if (key in props) {
42
42
  if (key === "dataSource") {
@@ -71,6 +71,7 @@ export default function useInternalPrivateApi(apiRef) {
71
71
  gridRef: undefined,
72
72
  renderedRowStartEnd: undefined,
73
73
  editStatus: undefined,
74
+ readOnly: false,
74
75
  };
75
76
  return defaultValues[key];
76
77
  }
package/lib/cjs/types/dataGridProps.d.ts CHANGED
@@ -42,6 +42,10 @@ export interface DataGridOptionPropsModel {
42
42
  * 현재 포커스된 셀의 수정 상태를 담고 있습니다.
43
43
  */
44
44
  editStatus: EditStatus;
45
+ /**
46
+ * 수정할 수 없는 상태
47
+ */
48
+ readOnly: boolean;
45
49
  }
46
50
  /**
47
51
  * 데이터 그리드 내부에서 사용되는 속성을 관리합니다
package/lib/esm/App.js CHANGED
@@ -3,7 +3,7 @@ import React from "react";
3
3
  import { DataGrid } from "./DataGrid";
4
4
  function App() {
5
5
  const ref = React.useRef(null);
6
- return (_jsxs(_Fragment, { children: [_jsx("button", { children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "100%", maxHeight: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: [
6
+ return (_jsxs(_Fragment, { children: [_jsx("button", { children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "100%", maxHeight: "600px" }, children: _jsx(DataGrid, { readOnly: true, gridRef: ref, columns: [
7
7
  {
8
8
  fieldId: "firstName",
9
9
  fieldName: "코드",
@@ -113,21 +113,19 @@ function App() {
113
113
  fieldName: "currency21",
114
114
  width: "120",
115
115
  },
116
- ],
117
- // dataSource={Array.from({ length: 100 }, (_, i) => {
118
- // return {
119
- // id: i,
120
- // firstName: `test-${i}`,
121
- // lastName: `lastName-${i}`,
122
- // currency: `currency-${i}`,
123
- // currency14: `currency14-${i}`,
124
- // currency15: `currency15-${i}`,
125
- // __uuid: "",
126
- // // height: 30,
127
- // // height: Math.floor(Math.random() * 20) + 20,
128
- // };
129
- // })}
130
- dataSource: [] }) }), _jsx("button", { children: "dd" })] }));
116
+ ], dataSource: Array.from({ length: 30 }, (_, i) => {
117
+ return {
118
+ id: i,
119
+ firstName: `test-${i}`,
120
+ lastName: `lastName-${i}`,
121
+ currency: `currency-${i}`,
122
+ currency14: `currency14-${i}`,
123
+ currency15: `currency15-${i}`,
124
+ __uuid: "",
125
+ // height: 30,
126
+ // height: Math.floor(Math.random() * 20) + 20,
127
+ };
128
+ }) }) }), _jsx("button", { children: "dd" })] }));
131
129
  }
132
130
  export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
133
131
  return {
package/lib/esm/DataGrid.js CHANGED
@@ -32,6 +32,6 @@ const DataGridMaster = React.forwardRef((props, _ref) => {
32
32
  // }
33
33
  // return () => clearInterval(id);
34
34
  // }, [count]);
35
- return (_jsx(_Fragment, { children: _jsx(GridApiContext.Provider, { value: apiRef, children: _jsxs(GridStoreContentProvider, { value: apiRef, children: [_jsx("button", { onClick: () => { }, children: "!!" }), _jsxs(NoraDataGrid, { ref: containerRef, children: [_jsx(NoraDataGrid.Title, { children: "\uC624\uBC84\uB77C\uC774\uB4DC \uD588\uC5B4\uC6A9" }), _jsx(NoraDataGrid.Body, { children: !isPending && apiRef.current.store && _jsx(TwoDimensionalVirtualizedList, {}) })] })] }) }) }));
35
+ return (_jsx(_Fragment, { children: _jsx(GridApiContext.Provider, { value: apiRef, children: _jsx(GridStoreContentProvider, { value: apiRef, children: _jsxs(NoraDataGrid, { ref: containerRef, children: [_jsx(NoraDataGrid.Title, {}), _jsx(NoraDataGrid.Body, { children: !isPending && apiRef.current.store && _jsx(TwoDimensionalVirtualizedList, {}) })] }) }) }) }));
36
36
  });
37
37
  export const DataGrid = React.memo(DataGridMaster);
package/lib/esm/buildPackage.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
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
@@ -130,7 +130,8 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
130
130
  }
131
131
  // 포함 안되어있으면 추가
132
132
  if (rowIndex && rowIndex >= end) {
133
- result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
133
+ if (result[result.length - 1].__ariaRowindex !== dataSource[rowIndex - 1].__ariaRowindex)
134
+ result.push(dataSource[rowIndex - 1]); // fixedIndex가 범위에 포함되지 않으면 첫 번째에 추가
134
135
  }
135
136
  return result;
136
137
  }, [dataSource, start, end]);
@@ -258,7 +259,7 @@ const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths,
258
259
  const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, }) => {
259
260
  const cellStyle = useMemo(() => ({ width: `${column.width}px` }), [column.width]);
260
261
  const cellClassName = useMemo(() => cx(classes.TableClasses.body.row.cell.root, classes.TableClasses.body.row.cell.classes), [classes.TableClasses.body.row.cell.root, classes.TableClasses.body.row.cell.classes]);
261
- return (_jsx(TableCell, { "aria-colindex": column.__ariaColindex, tabIndex: isFocus ? 0 : -1, style: cellStyle, className: cellClassName, children: _jsx(CellMode, { column: column, value: row[column.fieldId], editStatus: editStatus, rowIndex: rowIndex }) }, column.__uuid));
262
+ return (_jsx(TableCell, { "aria-colindex": column.__ariaColindex, tabIndex: isFocus ? 0 : -1, style: cellStyle, className: cellClassName, children: _jsx(CellMode, { column: column, value: row ? row[column.fieldId] : "", editStatus: editStatus, rowIndex: rowIndex }) }, column.__uuid));
262
263
  });
263
264
  export const TwoDimensionalVirtualizedList = React.memo(() => {
264
265
  // 마우스 다운 시작지점점
@@ -515,9 +516,13 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
515
516
  }, []);
516
517
  const handleKeydown = useCallback((e) => {
517
518
  handleArrowKey(e);
519
+ if (gridRef.current.store.state.readOnly)
520
+ return;
518
521
  handleEditEvent(e);
519
522
  }, []);
520
523
  const handleDbClick = useCallback(() => {
524
+ if (gridRef.current.store.state.readOnly)
525
+ return;
521
526
  gridRef.current.setEditStatus(EditStatus.EDITING).then((editState) => {
522
527
  store.setState(["state", "editStatus"], editState);
523
528
  });
package/lib/esm/components/cell/CellMode.js CHANGED
@@ -19,13 +19,13 @@ const CellMode = ({ column, value, editStatus, rowIndex, }) => {
19
19
  }, [editStatus]);
20
20
  const store = useStore();
21
21
  const handleInputChange = React.useCallback((e) => {
22
- console.log("handleInputChange", rowIndex, e, e.target.value);
23
22
  setInputValue(e.target.value);
24
- const dataSource = gridRef.current.cellByRowIndex(rowIndex, column.fieldId, e.target.value);
25
- store.setState(["state", "dataSource"], dataSource, false);
23
+ gridRef.current.cellByRowIndex(rowIndex, column.fieldId, e.target.value).then((dataSource) => {
24
+ store.setState(["state", "dataSource"], dataSource, false);
25
+ });
26
26
  }, [rowIndex]);
27
27
  if (editStatus === EditStatus.EDITING)
28
- return _jsx(Input, { autoFocus: true, ref: inputRef, value: inputValue, onChange: handleInputChange }, 1);
28
+ return _jsx(Input, { autoFocus: true, ref: inputRef, value: inputValue, onChange: handleInputChange });
29
29
  if (editStatus === EditStatus.NON_EDITABLE)
30
30
  return _jsx(React.Fragment, { children: value });
31
31
  return _jsx(React.Fragment, { children: value });
package/lib/esm/components/ime/IMEComponent.js CHANGED
@@ -14,48 +14,13 @@ const IMEComponent = React.forwardRef((props, ref) => {
14
14
  const { cellFocus } = useSelector((store) => ({
15
15
  cellFocus: store.state.cellFocus,
16
16
  }));
17
- // React.useEffect(() => {
18
- // const currentRef = ref as React.MutableRefObject<HTMLTextAreaElement | null>;
19
- // if (currentRef.current) {
20
- // currentRef.current.addEventListener("keydown", handleTextAreaInput);
21
- // }
22
- // return () => {
23
- // if (currentRef.current) {
24
- // currentRef.current.removeEventListener("keydown", handleTextAreaInput);
25
- // }
26
- // };
27
- // }, []);
28
17
  const handleValueChange = useCallback((e) => {
29
18
  setImeValue(e.target.value);
30
19
  }, []);
31
- const handleTextAreaInput = React.useCallback((e) => {
32
- var _a, _b;
33
- const cellFocus = gridRef.current.store.state.cellFocus;
34
- const rowIndex = cellFocus[0];
35
- const colIndex = cellFocus[1];
36
- const event = e.target;
37
- const currentRef = ref;
38
- // 셀위치 가져오기
39
- const containerElement = gridRef.current.store.gridContainer.current;
40
- if (containerElement) {
41
- const rowElement = containerElement.querySelector(`.${classes.TableClasses.body.row.root}[aria-rowindex="${rowIndex}"]`);
42
- if (rowElement) {
43
- const cellElement = rowElement.querySelector(`.${classes.TableClasses.body.row.cell.root}[aria-colindex="${colIndex}"]`);
44
- if (cellElement) {
45
- const top = (_a = cellElement.getBoundingClientRect().top) !== null && _a !== void 0 ? _a : 0;
46
- const left = (_b = cellElement.getBoundingClientRect().left) !== null && _b !== void 0 ? _b : 0;
47
- if (!currentRef.current)
48
- return;
49
- currentRef.current.style.top = `${top}px`;
50
- currentRef.current.style.left = `${left}px`;
51
- }
52
- }
53
- }
54
- if (currentRef.current)
55
- currentRef.current.value = event.value;
56
- }, [cellFocus]);
57
20
  const handleKeyDown = React.useCallback((e) => {
58
21
  var _a, _b, _c;
22
+ if (gridRef.current.store.state.readOnly)
23
+ return;
59
24
  if (e.nativeEvent.isComposing)
60
25
  return;
61
26
  if (e.key === "Enter") {
@@ -95,22 +60,6 @@ const IMEComponent = React.forwardRef((props, ref) => {
95
60
  return;
96
61
  if (!colIndex)
97
62
  return;
98
- // if (e.key === "ArrowLeft") {
99
- // colIndex = colIndex - 1;
100
- // setImeValue("");
101
- // }
102
- // if (e.key === "ArrowRight") {
103
- // colIndex = colIndex + 1;
104
- // setImeValue("");
105
- // }
106
- // if (e.key === "ArrowDown") {
107
- // rowIndex = rowIndex + 1;
108
- // setImeValue("");
109
- // }
110
- // if (e.key === "ArrowUp") {
111
- // rowIndex = rowIndex - 1;
112
- // setImeValue("");
113
- // }
114
63
  const event = e.target;
115
64
  const currentRef = ref;
116
65
  // 셀위치 가져오기
package/lib/esm/hooks/internal/useInternalPrivateApi.js CHANGED
@@ -36,7 +36,7 @@ export default function useInternalPrivateApi(apiRef) {
36
36
  return apiRef.current;
37
37
  }, []);
38
38
  const setBasicStore = React.useCallback((props) => {
39
- const myFilterTypeKeys = ["columns", "dataSource", "cellFocus"];
39
+ const myFilterTypeKeys = ["columns", "dataSource", "cellFocus", "editStatus", "readOnly"];
40
40
  return myFilterTypeKeys.reduce((acc, key) => {
41
41
  if (key in props) {
42
42
  if (key === "dataSource") {
@@ -71,6 +71,7 @@ export default function useInternalPrivateApi(apiRef) {
71
71
  gridRef: undefined,
72
72
  renderedRowStartEnd: undefined,
73
73
  editStatus: undefined,
74
+ readOnly: false,
74
75
  };
75
76
  return defaultValues[key];
76
77
  }
package/lib/esm/types/dataGridProps.d.ts CHANGED
@@ -42,6 +42,10 @@ export interface DataGridOptionPropsModel {
42
42
  * 현재 포커스된 셀의 수정 상태를 담고 있습니다.
43
43
  */
44
44
  editStatus: EditStatus;
45
+ /**
46
+ * 수정할 수 없는 상태
47
+ */
48
+ readOnly: boolean;
45
49
  }
46
50
  /**
47
51
  * 데이터 그리드 내부에서 사용되는 속성을 관리합니다
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,