From 13ccf1eeb684ddc8296aa6a00f4b08177c5713e9 Mon Sep 17 00:00:00 2001 From: Chintan Kavathia Date: Tue, 12 Nov 2024 10:32:44 +0530 Subject: [PATCH] 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`. --- .../components/body/body-cell.component.ts | 12 +++--- .../lib/components/body/body-row.component.ts | 12 +++--- .../components/body/selection.component.ts | 38 ++++++++----------- projects/ngx-datatable/src/lib/utils/keys.ts | 12 +++--- 4 files changed, 33 insertions(+), 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 index 5cf4b1e5d..bf7258383 100644 --- a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts @@ -406,15 +406,15 @@ export class DataTableBodyCellComponent @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 index 634e64292..0de90446e 100644 --- a/projects/ngx-datatable/src/lib/components/body/body-row.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body-row.component.ts @@ -179,15 +179,15 @@ export class DataTableBodyRowComponent 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 index d89b333e3..8bf932c0a 100644 --- a/projects/ngx-datatable/src/lib/components/body/selection.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/selection.component.ts @@ -74,7 +74,7 @@ export class DataTableSelectionComponent { 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]); @@ -86,12 +86,9 @@ export class DataTableSelectionComponent { } onKeyboardFocus(model: ActivateEvent): 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; @@ -102,28 +99,28 @@ export class DataTableSelectionComponent { } } 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; } @@ -133,20 +130,15 @@ export class DataTableSelectionComponent { } } - 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 index 1d7717591..2bff81979 100644 --- 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' }