[core] Simplify key utils

mui · Feb 18, 2024 · 95c3c82 · 95c3c82
1 parent 0cd3b4f
commit 95c3c82
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 21 deletions.
diff --git a/packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx
@@ -5,7 +5,6 @@ import {
   unstable_useForkRef as useForkRef,
 } from '@mui/utils';
 import type { GridRenderCellParams } from '../../models/params/gridCellParams';
-import { isSpaceKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
@@ -77,7 +76,7 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridRender
     }, [hasFocus]);
 
     const handleKeyDown = React.useCallback((event: React.KeyboardEvent) => {
-      if (isSpaceKey(event.key)) {
+      if (event.key === ' ') {
         // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
         // TODO: Remove and add a check inside useGridKeyboardNavigation
         event.stopPropagation();

diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts
@@ -175,8 +175,7 @@ export const useGridCellEditing = (
           reason = GridCellEditStartReasons.pasteKeyDown;
         } else if (event.key === 'Enter') {
           reason = GridCellEditStartReasons.enterKeyDown;
-        } else if (event.key === 'Delete' || event.key === 'Backspace') {
-          // Delete on Windows, Backspace on macOS
+        } else if (event.key === 'Backspace' || event.key === 'Delete') {
           reason = GridCellEditStartReasons.deleteKeyDown;
         }
 

diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts
@@ -250,8 +250,7 @@ export const useGridRowEditing = (
           reason = GridRowEditStartReasons.printableKeyDown;
         } else if (event.key === 'Enter') {
           reason = GridRowEditStartReasons.enterKeyDown;
-        } else if (event.key === 'Delete' || event.key === 'Backspace') {
-          // Delete on Windows, Backspace on macOS
+        } else if (event.key === 'Backspace' || event.key === 'Delete') {
           reason = GridRowEditStartReasons.deleteKeyDown;
         }
 

diff --git a/packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts b/packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts
@@ -7,7 +7,6 @@ import { GridSortApi } from '../../../models/api/gridSortApi';
 import { GridColDef } from '../../../models/colDef/gridColDef';
 import { GridGroupNode } from '../../../models/gridRows';
 import { GridSortItem, GridSortModel, GridSortDirection } from '../../../models/gridSortModel';
-import { isEnterKey } from '../../../utils/keyboardUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -322,7 +321,7 @@ export const useGridSorting = (
         return;
       }
       // Ctrl + Enter opens the column menu
-      if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
+      if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey) {
         sortColumn(field, undefined, event.shiftKey);
       }
     },

diff --git a/packages/x-data-grid/src/utils/keyboardUtils.ts b/packages/x-data-grid/src/utils/keyboardUtils.ts
@@ -1,17 +1,14 @@
 import * as React from 'react';
 
-export const isEscapeKey = (key: string): boolean => key === 'Escape'; // TODO remove
-export const isEnterKey = (key: string): boolean => key === 'Enter'; // TODO remove
-export const isTabKey = (key: string): boolean => key === 'Tab'; // TODO remove
+/**
+ * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
+ */
+export const isEscapeKey = (key: string): boolean => key === 'Escape';
 
-export const isSpaceKey = (key: string): boolean => key === ' ';
-
-export const isArrowKeys = (key: string): boolean => key.indexOf('Arrow') === 0;
-
-export const isHomeOrEndKeys = (key: string): boolean => key === 'Home' || key === 'End';
-
-export const isPageKeys = (key: string): boolean => key.indexOf('Page') === 0;
-export const isDeleteKeys = (key: string) => key === 'Delete' || key === 'Backspace';
+/**
+ * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
+ */
+export const isTabKey = (key: string): boolean => key === 'Tab';
 
 // Non printable keys have a name, e.g. "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
@@ -32,7 +29,10 @@ export const isMultipleKey = (key: string): boolean =>
   GRID_MULTIPLE_SELECTION_KEYS.indexOf(key) > -1;
 
 export const isCellEnterEditModeKeys = (event: React.KeyboardEvent<HTMLElement>): boolean =>
-  isEnterKey(event.key) || isDeleteKeys(event.key) || isPrintableKey(event);
+  isPrintableKey(event) ||
+  event.key === 'Enter' ||
+  event.key === 'Backspace' ||
+  event.key === 'Delete';
 
 export const isCellExitEditModeKeys = (key: string): boolean =>
   GRID_CELL_EXIT_EDIT_MODE_KEYS.indexOf(key) > -1;
@@ -41,7 +41,11 @@ export const isCellEditCommitKeys = (key: string): boolean =>
   GRID_CELL_EDIT_COMMIT_KEYS.indexOf(key) > -1;
 
 export const isNavigationKey = (key: string) =>
-  isHomeOrEndKeys(key) || isArrowKeys(key) || isPageKeys(key) || isSpaceKey(key);
+  key.indexOf('Arrow') === 0 ||
+  key.indexOf('Page') === 0 ||
+  key === ' ' ||
+  key === 'Home' ||
+  key === 'End';
 
 export const isKeyboardEvent = (event: any): event is React.KeyboardEvent<HTMLElement> =>
   !!event.key;