refactor(keycodes): allow strings and numbers as key codes

src/container/GraphView/index.tsx

@@ -9,14 +9,14 @@ import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 
 import { ReactFlowProps } from '../ReactFlow';
 
-import { NodeTypesType, EdgeTypesType, ConnectionLineType } from '../../types';
+import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode } from '../../types';
 
 export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'elements'> {
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
-  selectionKeyCode: number;
-  deleteKeyCode: number;
-  multiSelectionKeyCode: number;
+  selectionKeyCode: KeyCode;
+  deleteKeyCode: KeyCode;
+  multiSelectionKeyCode: KeyCode;
   connectionLineType: ConnectionLineType;
   snapToGrid: boolean;
   snapGrid: [number, number];

src/container/ReactFlow/index.tsx

@@ -33,6 +33,7 @@ import {
   OnConnectStopFunc,
   OnConnectEndFunc,
   TranslateExtent,
+  KeyCode,
 } from '../../types';
 
 import '../../style.css';
@@ -81,9 +82,9 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   connectionLineType?: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
   connectionLineComponent?: ConnectionLineComponent;
-  deleteKeyCode?: number;
-  selectionKeyCode?: number;
-  multiSelectionKeyCode?: number;
+  deleteKeyCode?: KeyCode;
+  selectionKeyCode?: KeyCode;
+  multiSelectionKeyCode?: KeyCode;
   snapToGrid?: boolean;
   snapGrid?: [number, number];
   onlyRenderVisibleNodes?: boolean;
@@ -134,9 +135,9 @@ const ReactFlow = ({
   connectionLineType = ConnectionLineType.Bezier,
   connectionLineStyle,
   connectionLineComponent,
-  deleteKeyCode = 8,
-  selectionKeyCode = 16,
-  multiSelectionKeyCode = 91,
+  deleteKeyCode = 'Backspace',
+  selectionKeyCode = 'Shift',
+  multiSelectionKeyCode = 'Meta',
   snapToGrid = false,
   snapGrid = [15, 15],
   onlyRenderVisibleNodes = true,

src/hooks/useGlobalKeyHandler.ts

@@ -3,11 +3,11 @@ import { useEffect } from 'react';
 import { useStore, useStoreActions } from '../store/hooks';
 import useKeyPress from './useKeyPress';
 import { isNode, getConnectedEdges } from '../utils/graph';
-import { Elements } from '../types';
+import { Elements, KeyCode } from '../types';
 
 interface HookParams {
-  deleteKeyCode: number;
-  multiSelectionKeyCode: number;
+  deleteKeyCode: KeyCode;
+  multiSelectionKeyCode: KeyCode;
   onElementsRemove?: (elements: Elements) => void;
 }
 

src/hooks/useKeyPress.ts

@@ -1,27 +1,28 @@
 import { useState, useEffect } from 'react';
 
 import { isInputDOMNode } from '../utils';
+import { KeyCode } from '../types';
 
-export default (keyCode: number): boolean => {
+export default (keyCode: KeyCode): boolean => {
   const [keyPressed, setKeyPressed] = useState(false);
 
-  function downHandler(event: KeyboardEvent) {
-    if (event.keyCode === keyCode && !isInputDOMNode(event)) {
-      setKeyPressed(true);
-    }
-  }
-
-  const upHandler = (event: KeyboardEvent) => {
-    if (event.keyCode === keyCode && !isInputDOMNode(event)) {
-      setKeyPressed(false);
-    }
-  };
-
-  const resetHandler = () => {
-    setKeyPressed(false);
-  };
-
   useEffect(() => {
+    const downHandler = (event: KeyboardEvent) => {
+      if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
+        event.preventDefault();
+
+        setKeyPressed(true);
+      }
+    };
+
+    const upHandler = (event: KeyboardEvent) => {
+      if (!isInputDOMNode(event) && (event.key === keyCode || event.keyCode === keyCode)) {
+        setKeyPressed(false);
+      }
+    };
+
+    const resetHandler = () => setKeyPressed(false);
+
     window.addEventListener('keydown', downHandler);
     window.addEventListener('keyup', upHandler);
     window.addEventListener('blur', resetHandler);
@@ -31,7 +32,7 @@ export default (keyCode: number): boolean => {
       window.removeEventListener('keyup', upHandler);
       window.removeEventListener('blur', resetHandler);
     };
-  }, []);
+  }, [keyCode, setKeyPressed]);
 
   return keyPressed;
 };

src/types/index.ts

@@ -329,3 +329,5 @@ export type FlowTransform = {
 };
 
 export type TranslateExtent = [[number, number], [number, number]];
+
+export type KeyCode = number | string;