refactor: replace keyCode with key value

BREAKING CHANGE: changed `Keys` enum to use `key` value instead of `keyCode`. `keyCode` is deprecated from `KeyBoardEvent` and should be replaced with `key`.
siemens · Nov 19, 2024 · 49b3cda · 49b3cda
1 parent 11389bc
commit 49b3cda
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 41 deletions.
diff --git a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts b/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts
@@ -410,15 +410,15 @@ export class DataTableBodyCellComponent<TRow extends { level?: number } = any>
 
   @HostListener('keydown', ['$event'])
   onKeyDown(event: KeyboardEvent): void {
-    const keyCode = event.keyCode;
+    const key = event.key;
     const isTargetCell = event.target === this._element;
 
     const isAction =
-      keyCode === Keys.return ||
-      keyCode === Keys.down ||
-      keyCode === Keys.up ||
-      keyCode === Keys.left ||
-      keyCode === Keys.right;
+      key === Keys.return ||
+      key === Keys.down ||
+      key === Keys.up ||
+      key === Keys.left ||
+      key === Keys.right;
 
     if (isAction && isTargetCell) {
       event.preventDefault();

diff --git a/projects/ngx-datatable/src/lib/components/body/body-row.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row.component.ts
@@ -183,15 +183,15 @@ export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges
 
   @HostListener('keydown', ['$event'])
   onKeyDown(event: KeyboardEvent): void {
-    const keyCode = event.keyCode;
+    const key = event.key;
     const isTargetRow = event.target === this._element;
 
     const isAction =
-      keyCode === Keys.return ||
-      keyCode === Keys.down ||
-      keyCode === Keys.up ||
-      keyCode === Keys.left ||
-      keyCode === Keys.right;
+      key === Keys.return ||
+      key === Keys.down ||
+      key === Keys.up ||
+      key === Keys.left ||
+      key === Keys.right;
 
     const isCtrlA = event.key === 'a' && (event.ctrlKey || event.metaKey);
 

diff --git a/projects/ngx-datatable/src/lib/components/body/selection.component.ts b/projects/ngx-datatable/src/lib/components/body/selection.component.ts
@@ -75,7 +75,7 @@ export class DataTableSelectionComponent<TRow = any> {
     if (select) {
       this.selectRow(event, index, row);
     } else if (type === 'keydown') {
-      if ((event as KeyboardEvent).keyCode === Keys.return) {
+      if ((event as KeyboardEvent).key === Keys.return) {
         this.selectRow(event, index, row);
       } else if ((event as KeyboardEvent).key === 'a' && (event.ctrlKey || event.metaKey)) {
         this.selectRow(event, 0, this.rows[this.rows.length - 1]);
@@ -87,12 +87,9 @@ export class DataTableSelectionComponent<TRow = any> {
   }
 
   onKeyboardFocus(model: ActivateEvent<TRow>): void {
-    const { keyCode } = model.event as KeyboardEvent;
+    const { key } = model.event as KeyboardEvent;
     const shouldFocus =
-      keyCode === Keys.up ||
-      keyCode === Keys.down ||
-      keyCode === Keys.right ||
-      keyCode === Keys.left;
+      key === Keys.up || key === Keys.down || key === Keys.right || key === Keys.left;
 
     if (shouldFocus) {
       const isCellSelection = this.selectionType === SelectionType.cell;
@@ -103,28 +100,28 @@ export class DataTableSelectionComponent<TRow = any> {
         }
       }
       if (!model.cellElement || !isCellSelection) {
-        this.focusRow(model.rowElement, keyCode);
+        this.focusRow(model.rowElement, key);
       } else if (isCellSelection) {
-        this.focusCell(model.cellElement, model.rowElement, keyCode, model.cellIndex);
+        this.focusCell(model.cellElement, model.rowElement, key, model.cellIndex);
       }
     }
   }
 
-  focusRow(rowElement: HTMLElement, keyCode: number): void {
-    const nextRowElement = this.getPrevNextRow(rowElement, keyCode);
+  focusRow(rowElement: HTMLElement, key: Keys): void {
+    const nextRowElement = this.getPrevNextRow(rowElement, key);
     if (nextRowElement) {
       nextRowElement.focus();
     }
   }
 
-  getPrevNextRow(rowElement: HTMLElement, keyCode: number): any {
+  getPrevNextRow(rowElement: HTMLElement, key: Keys): any {
     const parentElement = rowElement.parentElement;
 
     if (parentElement) {
       let focusElement: Element;
-      if (keyCode === Keys.up) {
+      if (key === Keys.up) {
         focusElement = parentElement.previousElementSibling;
-      } else if (keyCode === Keys.down) {
+      } else if (key === Keys.down) {
         focusElement = parentElement.nextElementSibling;
       }
 
@@ -134,20 +131,15 @@ export class DataTableSelectionComponent<TRow = any> {
     }
   }
 
-  focusCell(
-    cellElement: HTMLElement,
-    rowElement: HTMLElement,
-    keyCode: number,
-    cellIndex: number
-  ): void {
+  focusCell(cellElement: HTMLElement, rowElement: HTMLElement, key: Keys, cellIndex: number): void {
     let nextCellElement: Element;
 
-    if (keyCode === Keys.left) {
+    if (key === Keys.left) {
       nextCellElement = cellElement.previousElementSibling;
-    } else if (keyCode === Keys.right) {
+    } else if (key === Keys.right) {
       nextCellElement = cellElement.nextElementSibling;
-    } else if (keyCode === Keys.up || keyCode === Keys.down) {
-      const nextRowElement = this.getPrevNextRow(rowElement, keyCode);
+    } else if (key === Keys.up || key === Keys.down) {
+      const nextRowElement = this.getPrevNextRow(rowElement, key);
       if (nextRowElement) {
         const children = nextRowElement.getElementsByClassName('datatable-body-cell');
         if (children.length) {

diff --git a/projects/ngx-datatable/src/lib/utils/keys.ts b/projects/ngx-datatable/src/lib/utils/keys.ts
@@ -1,8 +1,8 @@
 export enum Keys {
-  up = 38,
-  down = 40,
-  return = 13,
-  escape = 27,
-  left = 37,
-  right = 39
+  up = 'ArrowUp',
+  down = 'ArrowDown',
+  return = 'Enter',
+  escape = 'Escape',
+  left = 'ArrowLeft',
+  right = 'ArrowRight'
 }