@noraent/nora-datagrid 0.0.9 → 0.0.11

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 (13) hide show
  1. package/lib/cjs/App.js +4 -1
  2. package/lib/cjs/buildPackage.json +1 -1
  3. package/lib/cjs/components/TwoDimensionalVirtualizedList.js +75 -68
  4. package/lib/cjs/components/ime/IMEComponent.js +17 -7
  5. package/lib/cjs/hooks/external/usePublicTest.js +4 -1
  6. package/lib/cjs/types/dataGridProps.d.ts +2 -1
  7. package/lib/esm/App.js +4 -1
  8. package/lib/esm/buildPackage.json +1 -1
  9. package/lib/esm/components/TwoDimensionalVirtualizedList.js +75 -68
  10. package/lib/esm/components/ime/IMEComponent.js +17 -7
  11. package/lib/esm/hooks/external/usePublicTest.js +4 -1
  12. package/lib/esm/types/dataGridProps.d.ts +2 -1
  13. package/package.json +1 -1
package/lib/cjs/App.js CHANGED
@@ -3,7 +3,10 @@ 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", { onClick: () => {
7
+ var _a;
8
+ console.log("!!!!!", (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.getData());
9
+ }, children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "100%", maxHeight: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: [
7
10
  {
8
11
  fieldId: "firstName",
9
12
  fieldName: "코드",
package/lib/cjs/buildPackage.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.9",
3
+ "version": "0.0.11",
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
@@ -318,7 +318,7 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
318
318
  if (gridRef.current.store.state.editStatus !== EditStatus.EDITING) {
319
319
  gridRef.current.setCellFocus(rowIndex, colIndex).then((res) => {
320
320
  store.setState(["state", "cellFocus"], res);
321
- gridRef.current.setEditStatus(EditStatus.IME_EDITING).then(() => {
321
+ gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then(() => {
322
322
  var _a;
323
323
  (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // ime 활성화
324
324
  });
@@ -376,9 +376,9 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
376
376
  return;
377
377
  }
378
378
  if (e.key === "Enter") {
379
- gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
380
- store.setState(["state", "editStatus"], editState);
381
- });
379
+ // gridRef.current.setEditStatus(EditStatus.IME_EDITING).then((editState) => {
380
+ // store.setState(["state", "editStatus"], editState);
381
+ // });
382
382
  const divElement = e.target;
383
383
  const cell = divElement.closest(`.${classes.TableClasses.body.row.cell.root}`);
384
384
  const row = divElement.closest(`.${classes.TableClasses.body.row.root}`);
@@ -391,42 +391,42 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
391
391
  }
392
392
  return;
393
393
  }
394
- if (e.key === "Escape") {
395
- gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
396
- store.setState(["state", "editStatus"], editState);
397
- // gridRef.current.scrollToRowIndex(
398
- // gridRef.current.store.state.cellFocus[0]
399
- // );
400
- //
401
- // const parent = gridRef.current.store.gridContainer.current;
402
- // const test = gridRef.current.store.gridContainer.current
403
- // ?.querySelector(`.${classes.TableClasses.body.scroll.root}`)
404
- // ?.querySelector(
405
- // `[aria-rowindex="${gridRef.current.store.state.cellFocus[0]}"]`
406
- // );
407
- // const observer = new IntersectionObserver(
408
- // (entries) => {
409
- // const visible = entries;
410
- // entries.forEach((entry) => {
411
- // if (!entry.isIntersecting) {
412
- // // gridRef.current.scrollToRowIndex(
413
- // // gridRef.current.store.state.cellFocus[0]
414
- // // );
415
- // e.preventDefault();
416
- // }
417
- // });
418
- // },
419
- // {
420
- // root: parent,
421
- // threshold: 0.1, // 요소가 10% 이상 보일 때 트리거
422
- // }
423
- // );
424
- // if (test) observer.observe(test);
425
- //
426
- // e.preventDefault();
427
- });
428
- return;
429
- }
394
+ // if (e.key === "Escape") {
395
+ // gridRef.current.setEditStatus(EditStatus.IME_EDITING).then((editState) => {
396
+ // store.setState(["state", "editStatus"], editState);
397
+ // // gridRef.current.scrollToRowIndex(
398
+ // // gridRef.current.store.state.cellFocus[0]
399
+ // // );
400
+ // //
401
+ // // const parent = gridRef.current.store.gridContainer.current;
402
+ // // const test = gridRef.current.store.gridContainer.current
403
+ // // ?.querySelector(`.${classes.TableClasses.body.scroll.root}`)
404
+ // // ?.querySelector(
405
+ // // `[aria-rowindex="${gridRef.current.store.state.cellFocus[0]}"]`
406
+ // // );
407
+ // // const observer = new IntersectionObserver(
408
+ // // (entries) => {
409
+ // // const visible = entries;
410
+ // // entries.forEach((entry) => {
411
+ // // if (!entry.isIntersecting) {
412
+ // // // gridRef.current.scrollToRowIndex(
413
+ // // // gridRef.current.store.state.cellFocus[0]
414
+ // // // );
415
+ // // e.preventDefault();
416
+ // // }
417
+ // // });
418
+ // // },
419
+ // // {
420
+ // // root: parent,
421
+ // // threshold: 0.1, // 요소가 10% 이상 보일 때 트리거
422
+ // // }
423
+ // // );
424
+ // // if (test) observer.observe(test);
425
+ // //
426
+ // // e.preventDefault();
427
+ // });
428
+ // return;
429
+ // }
430
430
  // if (gridRef.current.store.state.editStatus === EditStatus.EDITING) return;
431
431
  // gridRef.current.setEditStatus(EditStatus.EDITING).then((editState) => {
432
432
  // store.setState(["state", "editStatus"], editState);
@@ -435,6 +435,7 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
435
435
  const handleArrowKey = React.useCallback((e) => {
436
436
  var _a;
437
437
  const { key } = e;
438
+ console.log("!!!!", gridRef.current.store.state.editStatus);
438
439
  if (gridRef.current.store.state.editStatus === EditStatus.EDITING) {
439
440
  if (!(key === "Tab" || e.ctrlKey)) {
440
441
  return;
@@ -445,9 +446,8 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
445
446
  const { cellFocus, columns, dataSource, renderedRowStartEnd } = gridRef.current.store.state;
446
447
  if (!cellFocus || (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "ArrowDown" && key !== "ArrowUp" && key !== "Tab"))
447
448
  return;
448
- e.preventDefault();
449
+ // e.preventDefault();
449
450
  const direction = (key === "Tab" && !e.shiftKey) || ["ArrowRight", "ArrowDown"].includes(key) ? 1 : -1;
450
- // const direction = ["ArrowRight", "ArrowDown", "Tab"].includes(key) ? 1 : -1;
451
451
  if (!cellFocus[1])
452
452
  return;
453
453
  if (!cellFocus[0])
@@ -481,38 +481,45 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
481
481
  case "ArrowUp":
482
482
  isRowIndex = true;
483
483
  }
484
- const bodyElement = (_a = gridContainer.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${classes.TableClasses.body.scroll.root}`);
485
484
  const rowIndex = isRowIndex ? newRowIndex : newRowIndex - direction;
486
485
  const colIndex = isColIndex ? newColumnIndex : newColumnIndex - direction;
487
- setCellFocus(rowIndex, colIndex).then((res) => {
488
- ReactDOM.flushSync(() => {
489
- store.setState(["state", "cellFocus"], res);
490
- if (bodyElement) {
491
- const scrollThreshold = Math.max(0, sumWidths[newColumnIndex - 1] - 1200);
492
- const scrollRowThreshold = Math.max(0, sumHeights[newRowIndex - 1] - 450);
493
- if (key === "ArrowRight" || (!e.shiftKey && key === "Tab" && bodyElement.scrollLeft < scrollThreshold)) {
494
- bodyElement.scrollLeft = scrollThreshold;
495
- }
496
- if (key === "ArrowLeft" || (e.shiftKey && key === "Tab" && bodyElement)) {
497
- const targetStart = sumWidths[newColumnIndex - 1];
498
- const scrollStart = bodyElement.scrollLeft;
499
- if (scrollStart >= targetStart) {
500
- bodyElement.scrollLeft = targetStart - widths[newColumnIndex - 1];
486
+ const maxColIndex = gridRef.current.store.state.columns.length;
487
+ const bodyElement = (_a = gridContainer.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${classes.TableClasses.body.scroll.root}`);
488
+ if (gridRef.current.store.state.editStatus === EditStatus.IME_EDITING) {
489
+ // IME 입력중일때 Tab 비활성화 (입력중인 내용이 다음 텝에 반영 되는 문제 방지)
490
+ return;
491
+ }
492
+ if (rowIndex > 0 && colIndex > 0 && colIndex <= maxColIndex) {
493
+ setCellFocus(rowIndex, colIndex).then((res) => {
494
+ ReactDOM.flushSync(() => {
495
+ store.setState(["state", "cellFocus"], res);
496
+ if (bodyElement) {
497
+ const scrollThreshold = Math.max(0, sumWidths[newColumnIndex] - bodyElement.clientWidth);
498
+ const scrollRowThreshold = Math.max(0, sumHeights[newRowIndex] - (bodyElement.clientHeight - 40));
499
+ if (key === "ArrowRight" || (!e.shiftKey && key === "Tab" && bodyElement.scrollLeft < scrollThreshold)) {
500
+ bodyElement.scrollLeft = scrollThreshold;
501
501
  }
502
- }
503
- if (key === "ArrowDown" && bodyElement.scrollTop < scrollRowThreshold) {
504
- bodyElement.scrollTop = scrollRowThreshold;
505
- }
506
- if (key === "ArrowUp" && bodyElement) {
507
- const targetStart = sumHeights[newRowIndex];
508
- const scrollStart = bodyElement.scrollTop;
509
- if (scrollStart >= targetStart) {
510
- bodyElement.scrollTop = targetStart - heights[newRowIndex];
502
+ if (key === "ArrowLeft" || (e.shiftKey && key === "Tab" && bodyElement)) {
503
+ const targetStart = sumWidths[newColumnIndex];
504
+ const scrollStart = bodyElement.scrollLeft;
505
+ if (scrollStart >= targetStart) {
506
+ bodyElement.scrollLeft = targetStart - widths[newColumnIndex];
507
+ }
508
+ }
509
+ if (key === "ArrowDown" && bodyElement.scrollTop < scrollRowThreshold) {
510
+ bodyElement.scrollTop = scrollRowThreshold;
511
+ }
512
+ if (key === "ArrowUp" && bodyElement) {
513
+ const targetStart = sumHeights[newRowIndex];
514
+ const scrollStart = bodyElement.scrollTop;
515
+ if (scrollStart >= targetStart) {
516
+ bodyElement.scrollTop = targetStart - heights[newRowIndex];
517
+ }
511
518
  }
512
519
  }
513
- }
520
+ });
514
521
  });
515
- });
522
+ }
516
523
  }, []);
517
524
  const handleKeydown = useCallback((e) => {
518
525
  handleArrowKey(e);
package/lib/cjs/components/ime/IMEComponent.js CHANGED
@@ -19,22 +19,26 @@ const IMEComponent = React.forwardRef((props, ref) => {
19
19
  }, []);
20
20
  const handleKeyDown = React.useCallback((e) => {
21
21
  var _a, _b, _c;
22
- console.log("!!!!", e.key);
23
22
  if (gridRef.current.store.state.readOnly)
24
23
  return;
25
- if (e.key === "Meta" || e.key === "Alt" || e.key === "Control" || e.key === "Shift" || e.key === "Tab")
24
+ if (e.key === "Meta" || e.key === "Alt" || e.key === "Control" || e.key === "Shift") {
25
+ e.preventDefault();
26
+ e.stopPropagation();
26
27
  return;
28
+ }
27
29
  if (e.nativeEvent.isComposing)
28
30
  return;
29
- if (e.key === "Enter") {
31
+ if (e.key === "Enter" || e.key === "Tab") {
30
32
  e.preventDefault();
31
- e.stopPropagation();
33
+ if (gridRef.current.store.state.editStatus === EditStatus.NON_EDITABLE) {
34
+ return;
35
+ }
32
36
  const row = cellFocus[0];
33
37
  const cell = cellFocus[1];
34
38
  const rowIndex = row ? row - 1 : undefined;
35
39
  const colIndex = cell ? cell - 1 : undefined;
36
40
  const fieldId = (_a = gridRef.current.store.state.columns.find((column) => column.__dataColindex === colIndex)) === null || _a === void 0 ? void 0 : _a.fieldId;
37
- if (fieldId && rowIndex) {
41
+ if (fieldId && rowIndex !== undefined) {
38
42
  gridRef.current.cellByRowIndex(rowIndex, fieldId, imeValue).then((dataSource) => {
39
43
  store.setState(["state", "dataSource"], dataSource, false);
40
44
  });
@@ -55,7 +59,10 @@ const IMEComponent = React.forwardRef((props, ref) => {
55
59
  setImeValue("");
56
60
  }
57
61
  }
58
- else {
62
+ if (!(e.key === "Enter" || e.key === "Tab" || e.key === "ArrowRight" || e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "ArrowDown")) {
63
+ gridRef.current.setEditStatus(EditStatus.IME_EDITING).then((editState) => {
64
+ store.setState(["state", "editStatus"], editState);
65
+ });
59
66
  const cellFocus = gridRef.current.store.state.cellFocus;
60
67
  let rowIndex = cellFocus[0];
61
68
  let colIndex = cellFocus[1];
@@ -96,6 +103,9 @@ const IMEComponent = React.forwardRef((props, ref) => {
96
103
  currentRef.current.value = event.value;
97
104
  }
98
105
  }, [cellFocus, imeValue]);
99
- return (_jsx("textarea", { className: "ime-input", ref: ref, style: { position: "absolute", resize: "none", overflow: "hidden", background: "red", top: `-${32000}px`, left: `-${32000}px` }, value: imeValue, onChange: handleValueChange, onKeyDown: handleKeyDown }));
106
+ React.useEffect(() => {
107
+ setImeValue("");
108
+ }, [cellFocus]);
109
+ return (_jsx("textarea", { autoFocus: true, className: "ime-input", ref: ref, style: { position: "absolute", resize: "none", overflow: "hidden", background: "red", top: `-${32000}px`, left: `-${32000}px` }, value: imeValue, onChange: handleValueChange, onKeyDown: handleKeyDown }));
100
110
  });
101
111
  export default React.memo(IMEComponent);
package/lib/cjs/hooks/external/usePublicTest.js CHANGED
@@ -6,6 +6,9 @@ import React from "react";
6
6
  // } from "@/core/types/dataGridProps";
7
7
  import { useGridApiMethod } from "../useGridApiMethod";
8
8
  export default function usePublicTest(apiRef) {
9
+ const getData = React.useCallback(() => {
10
+ return apiRef.current.store.state.dataSource;
11
+ }, []);
9
12
  const setTextPublic = React.useCallback((_data) => {
10
13
  alert("dd");
11
14
  console.log("!!!! public");
@@ -15,6 +18,6 @@ export default function usePublicTest(apiRef) {
15
18
  updatedCellRange.push(cellRange);
16
19
  apiRef.current = Object.assign(Object.assign({}, apiRef.current), { store: Object.assign(Object.assign({}, apiRef.current.store), { __cellRange: updatedCellRange }) });
17
20
  }, []);
18
- const apiMethods = { setTextPublic, addCellRange };
21
+ const apiMethods = { setTextPublic, addCellRange, getData };
19
22
  useGridApiMethod(apiRef, apiMethods, "public");
20
23
  }
package/lib/cjs/types/dataGridProps.d.ts CHANGED
@@ -127,9 +127,10 @@ export interface DataGridPublicApiModel {
127
127
  */
128
128
  addCellRange: (cellRange: CellRangeDef) => void;
129
129
  forceUpdate: () => void;
130
+ getData: () => void;
130
131
  }
131
132
  export type CommonApi = React.MutableRefObject<DataGridPrivateApi | null>;
132
- export type GirdApi = GirdApiCommon<DataGridPrivateApi>;
133
+ export type GirdApi = DataGridPublicApi;
133
134
  export interface GirdApiCommon<DataGridPrivateApi> extends DataGridPrivateApiModel {
134
135
  register: <V extends Visibility, T extends V extends "public" ? Partial<DataGridPublicApi> : Partial<DataGridPrivateApi>>(visibility: V, methods: T) => void;
135
136
  getPublicApi: () => DataGridPublicApi;
package/lib/esm/App.js CHANGED
@@ -3,7 +3,10 @@ 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", { onClick: () => {
7
+ var _a;
8
+ console.log("!!!!!", (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.getData());
9
+ }, children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "100%", maxHeight: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: [
7
10
  {
8
11
  fieldId: "firstName",
9
12
  fieldName: "코드",
package/lib/esm/buildPackage.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.9",
3
+ "version": "0.0.11",
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
@@ -318,7 +318,7 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
318
318
  if (gridRef.current.store.state.editStatus !== EditStatus.EDITING) {
319
319
  gridRef.current.setCellFocus(rowIndex, colIndex).then((res) => {
320
320
  store.setState(["state", "cellFocus"], res);
321
- gridRef.current.setEditStatus(EditStatus.IME_EDITING).then(() => {
321
+ gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then(() => {
322
322
  var _a;
323
323
  (_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.focus(); // ime 활성화
324
324
  });
@@ -376,9 +376,9 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
376
376
  return;
377
377
  }
378
378
  if (e.key === "Enter") {
379
- gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
380
- store.setState(["state", "editStatus"], editState);
381
- });
379
+ // gridRef.current.setEditStatus(EditStatus.IME_EDITING).then((editState) => {
380
+ // store.setState(["state", "editStatus"], editState);
381
+ // });
382
382
  const divElement = e.target;
383
383
  const cell = divElement.closest(`.${classes.TableClasses.body.row.cell.root}`);
384
384
  const row = divElement.closest(`.${classes.TableClasses.body.row.root}`);
@@ -391,42 +391,42 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
391
391
  }
392
392
  return;
393
393
  }
394
- if (e.key === "Escape") {
395
- gridRef.current.setEditStatus(EditStatus.NON_EDITABLE).then((editState) => {
396
- store.setState(["state", "editStatus"], editState);
397
- // gridRef.current.scrollToRowIndex(
398
- // gridRef.current.store.state.cellFocus[0]
399
- // );
400
- //
401
- // const parent = gridRef.current.store.gridContainer.current;
402
- // const test = gridRef.current.store.gridContainer.current
403
- // ?.querySelector(`.${classes.TableClasses.body.scroll.root}`)
404
- // ?.querySelector(
405
- // `[aria-rowindex="${gridRef.current.store.state.cellFocus[0]}"]`
406
- // );
407
- // const observer = new IntersectionObserver(
408
- // (entries) => {
409
- // const visible = entries;
410
- // entries.forEach((entry) => {
411
- // if (!entry.isIntersecting) {
412
- // // gridRef.current.scrollToRowIndex(
413
- // // gridRef.current.store.state.cellFocus[0]
414
- // // );
415
- // e.preventDefault();
416
- // }
417
- // });
418
- // },
419
- // {
420
- // root: parent,
421
- // threshold: 0.1, // 요소가 10% 이상 보일 때 트리거
422
- // }
423
- // );
424
- // if (test) observer.observe(test);
425
- //
426
- // e.preventDefault();
427
- });
428
- return;
429
- }
394
+ // if (e.key === "Escape") {
395
+ // gridRef.current.setEditStatus(EditStatus.IME_EDITING).then((editState) => {
396
+ // store.setState(["state", "editStatus"], editState);
397
+ // // gridRef.current.scrollToRowIndex(
398
+ // // gridRef.current.store.state.cellFocus[0]
399
+ // // );
400
+ // //
401
+ // // const parent = gridRef.current.store.gridContainer.current;
402
+ // // const test = gridRef.current.store.gridContainer.current
403
+ // // ?.querySelector(`.${classes.TableClasses.body.scroll.root}`)
404
+ // // ?.querySelector(
405
+ // // `[aria-rowindex="${gridRef.current.store.state.cellFocus[0]}"]`
406
+ // // );
407
+ // // const observer = new IntersectionObserver(
408
+ // // (entries) => {
409
+ // // const visible = entries;
410
+ // // entries.forEach((entry) => {
411
+ // // if (!entry.isIntersecting) {
412
+ // // // gridRef.current.scrollToRowIndex(
413
+ // // // gridRef.current.store.state.cellFocus[0]
414
+ // // // );
415
+ // // e.preventDefault();
416
+ // // }
417
+ // // });
418
+ // // },
419
+ // // {
420
+ // // root: parent,
421
+ // // threshold: 0.1, // 요소가 10% 이상 보일 때 트리거
422
+ // // }
423
+ // // );
424
+ // // if (test) observer.observe(test);
425
+ // //
426
+ // // e.preventDefault();
427
+ // });
428
+ // return;
429
+ // }
430
430
  // if (gridRef.current.store.state.editStatus === EditStatus.EDITING) return;
431
431
  // gridRef.current.setEditStatus(EditStatus.EDITING).then((editState) => {
432
432
  // store.setState(["state", "editStatus"], editState);
@@ -435,6 +435,7 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
435
435
  const handleArrowKey = React.useCallback((e) => {
436
436
  var _a;
437
437
  const { key } = e;
438
+ console.log("!!!!", gridRef.current.store.state.editStatus);
438
439
  if (gridRef.current.store.state.editStatus === EditStatus.EDITING) {
439
440
  if (!(key === "Tab" || e.ctrlKey)) {
440
441
  return;
@@ -445,9 +446,8 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
445
446
  const { cellFocus, columns, dataSource, renderedRowStartEnd } = gridRef.current.store.state;
446
447
  if (!cellFocus || (key !== "ArrowRight" && key !== "ArrowLeft" && key !== "ArrowDown" && key !== "ArrowUp" && key !== "Tab"))
447
448
  return;
448
- e.preventDefault();
449
+ // e.preventDefault();
449
450
  const direction = (key === "Tab" && !e.shiftKey) || ["ArrowRight", "ArrowDown"].includes(key) ? 1 : -1;
450
- // const direction = ["ArrowRight", "ArrowDown", "Tab"].includes(key) ? 1 : -1;
451
451
  if (!cellFocus[1])
452
452
  return;
453
453
  if (!cellFocus[0])
@@ -481,38 +481,45 @@ export const TwoDimensionalVirtualizedList = React.memo(() => {
481
481
  case "ArrowUp":
482
482
  isRowIndex = true;
483
483
  }
484
- const bodyElement = (_a = gridContainer.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${classes.TableClasses.body.scroll.root}`);
485
484
  const rowIndex = isRowIndex ? newRowIndex : newRowIndex - direction;
486
485
  const colIndex = isColIndex ? newColumnIndex : newColumnIndex - direction;
487
- setCellFocus(rowIndex, colIndex).then((res) => {
488
- ReactDOM.flushSync(() => {
489
- store.setState(["state", "cellFocus"], res);
490
- if (bodyElement) {
491
- const scrollThreshold = Math.max(0, sumWidths[newColumnIndex - 1] - 1200);
492
- const scrollRowThreshold = Math.max(0, sumHeights[newRowIndex - 1] - 450);
493
- if (key === "ArrowRight" || (!e.shiftKey && key === "Tab" && bodyElement.scrollLeft < scrollThreshold)) {
494
- bodyElement.scrollLeft = scrollThreshold;
495
- }
496
- if (key === "ArrowLeft" || (e.shiftKey && key === "Tab" && bodyElement)) {
497
- const targetStart = sumWidths[newColumnIndex - 1];
498
- const scrollStart = bodyElement.scrollLeft;
499
- if (scrollStart >= targetStart) {
500
- bodyElement.scrollLeft = targetStart - widths[newColumnIndex - 1];
486
+ const maxColIndex = gridRef.current.store.state.columns.length;
487
+ const bodyElement = (_a = gridContainer.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${classes.TableClasses.body.scroll.root}`);
488
+ if (gridRef.current.store.state.editStatus === EditStatus.IME_EDITING) {
489
+ // IME 입력중일때 Tab 비활성화 (입력중인 내용이 다음 텝에 반영 되는 문제 방지)
490
+ return;
491
+ }
492
+ if (rowIndex > 0 && colIndex > 0 && colIndex <= maxColIndex) {
493
+ setCellFocus(rowIndex, colIndex).then((res) => {
494
+ ReactDOM.flushSync(() => {
495
+ store.setState(["state", "cellFocus"], res);
496
+ if (bodyElement) {
497
+ const scrollThreshold = Math.max(0, sumWidths[newColumnIndex] - bodyElement.clientWidth);
498
+ const scrollRowThreshold = Math.max(0, sumHeights[newRowIndex] - (bodyElement.clientHeight - 40));
499
+ if (key === "ArrowRight" || (!e.shiftKey && key === "Tab" && bodyElement.scrollLeft < scrollThreshold)) {
500
+ bodyElement.scrollLeft = scrollThreshold;
501
501
  }
502
- }
503
- if (key === "ArrowDown" && bodyElement.scrollTop < scrollRowThreshold) {
504
- bodyElement.scrollTop = scrollRowThreshold;
505
- }
506
- if (key === "ArrowUp" && bodyElement) {
507
- const targetStart = sumHeights[newRowIndex];
508
- const scrollStart = bodyElement.scrollTop;
509
- if (scrollStart >= targetStart) {
510
- bodyElement.scrollTop = targetStart - heights[newRowIndex];
502
+ if (key === "ArrowLeft" || (e.shiftKey && key === "Tab" && bodyElement)) {
503
+ const targetStart = sumWidths[newColumnIndex];
504
+ const scrollStart = bodyElement.scrollLeft;
505
+ if (scrollStart >= targetStart) {
506
+ bodyElement.scrollLeft = targetStart - widths[newColumnIndex];
507
+ }
508
+ }
509
+ if (key === "ArrowDown" && bodyElement.scrollTop < scrollRowThreshold) {
510
+ bodyElement.scrollTop = scrollRowThreshold;
511
+ }
512
+ if (key === "ArrowUp" && bodyElement) {
513
+ const targetStart = sumHeights[newRowIndex];
514
+ const scrollStart = bodyElement.scrollTop;
515
+ if (scrollStart >= targetStart) {
516
+ bodyElement.scrollTop = targetStart - heights[newRowIndex];
517
+ }
511
518
  }
512
519
  }
513
- }
520
+ });
514
521
  });
515
- });
522
+ }
516
523
  }, []);
517
524
  const handleKeydown = useCallback((e) => {
518
525
  handleArrowKey(e);
package/lib/esm/components/ime/IMEComponent.js CHANGED
@@ -19,22 +19,26 @@ const IMEComponent = React.forwardRef((props, ref) => {
19
19
  }, []);
20
20
  const handleKeyDown = React.useCallback((e) => {
21
21
  var _a, _b, _c;
22
- console.log("!!!!", e.key);
23
22
  if (gridRef.current.store.state.readOnly)
24
23
  return;
25
- if (e.key === "Meta" || e.key === "Alt" || e.key === "Control" || e.key === "Shift" || e.key === "Tab")
24
+ if (e.key === "Meta" || e.key === "Alt" || e.key === "Control" || e.key === "Shift") {
25
+ e.preventDefault();
26
+ e.stopPropagation();
26
27
  return;
28
+ }
27
29
  if (e.nativeEvent.isComposing)
28
30
  return;
29
- if (e.key === "Enter") {
31
+ if (e.key === "Enter" || e.key === "Tab") {
30
32
  e.preventDefault();
31
- e.stopPropagation();
33
+ if (gridRef.current.store.state.editStatus === EditStatus.NON_EDITABLE) {
34
+ return;
35
+ }
32
36
  const row = cellFocus[0];
33
37
  const cell = cellFocus[1];
34
38
  const rowIndex = row ? row - 1 : undefined;
35
39
  const colIndex = cell ? cell - 1 : undefined;
36
40
  const fieldId = (_a = gridRef.current.store.state.columns.find((column) => column.__dataColindex === colIndex)) === null || _a === void 0 ? void 0 : _a.fieldId;
37
- if (fieldId && rowIndex) {
41
+ if (fieldId && rowIndex !== undefined) {
38
42
  gridRef.current.cellByRowIndex(rowIndex, fieldId, imeValue).then((dataSource) => {
39
43
  store.setState(["state", "dataSource"], dataSource, false);
40
44
  });
@@ -55,7 +59,10 @@ const IMEComponent = React.forwardRef((props, ref) => {
55
59
  setImeValue("");
56
60
  }
57
61
  }
58
- else {
62
+ if (!(e.key === "Enter" || e.key === "Tab" || e.key === "ArrowRight" || e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "ArrowDown")) {
63
+ gridRef.current.setEditStatus(EditStatus.IME_EDITING).then((editState) => {
64
+ store.setState(["state", "editStatus"], editState);
65
+ });
59
66
  const cellFocus = gridRef.current.store.state.cellFocus;
60
67
  let rowIndex = cellFocus[0];
61
68
  let colIndex = cellFocus[1];
@@ -96,6 +103,9 @@ const IMEComponent = React.forwardRef((props, ref) => {
96
103
  currentRef.current.value = event.value;
97
104
  }
98
105
  }, [cellFocus, imeValue]);
99
- return (_jsx("textarea", { className: "ime-input", ref: ref, style: { position: "absolute", resize: "none", overflow: "hidden", background: "red", top: `-${32000}px`, left: `-${32000}px` }, value: imeValue, onChange: handleValueChange, onKeyDown: handleKeyDown }));
106
+ React.useEffect(() => {
107
+ setImeValue("");
108
+ }, [cellFocus]);
109
+ return (_jsx("textarea", { autoFocus: true, className: "ime-input", ref: ref, style: { position: "absolute", resize: "none", overflow: "hidden", background: "red", top: `-${32000}px`, left: `-${32000}px` }, value: imeValue, onChange: handleValueChange, onKeyDown: handleKeyDown }));
100
110
  });
101
111
  export default React.memo(IMEComponent);
package/lib/esm/hooks/external/usePublicTest.js CHANGED
@@ -6,6 +6,9 @@ import React from "react";
6
6
  // } from "@/core/types/dataGridProps";
7
7
  import { useGridApiMethod } from "../useGridApiMethod";
8
8
  export default function usePublicTest(apiRef) {
9
+ const getData = React.useCallback(() => {
10
+ return apiRef.current.store.state.dataSource;
11
+ }, []);
9
12
  const setTextPublic = React.useCallback((_data) => {
10
13
  alert("dd");
11
14
  console.log("!!!! public");
@@ -15,6 +18,6 @@ export default function usePublicTest(apiRef) {
15
18
  updatedCellRange.push(cellRange);
16
19
  apiRef.current = Object.assign(Object.assign({}, apiRef.current), { store: Object.assign(Object.assign({}, apiRef.current.store), { __cellRange: updatedCellRange }) });
17
20
  }, []);
18
- const apiMethods = { setTextPublic, addCellRange };
21
+ const apiMethods = { setTextPublic, addCellRange, getData };
19
22
  useGridApiMethod(apiRef, apiMethods, "public");
20
23
  }
package/lib/esm/types/dataGridProps.d.ts CHANGED
@@ -127,9 +127,10 @@ export interface DataGridPublicApiModel {
127
127
  */
128
128
  addCellRange: (cellRange: CellRangeDef) => void;
129
129
  forceUpdate: () => void;
130
+ getData: () => void;
130
131
  }
131
132
  export type CommonApi = React.MutableRefObject<DataGridPrivateApi | null>;
132
- export type GirdApi = GirdApiCommon<DataGridPrivateApi>;
133
+ export type GirdApi = DataGridPublicApi;
133
134
  export interface GirdApiCommon<DataGridPrivateApi> extends DataGridPrivateApiModel {
134
135
  register: <V extends Visibility, T extends V extends "public" ? Partial<DataGridPublicApi> : Partial<DataGridPrivateApi>>(visibility: V, methods: T) => void;
135
136
  getPublicApi: () => DataGridPublicApi;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.9",
3
+ "version": "0.0.11",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,