refactor: Use KeyboardUtil more often (#17597)

src/script/auth/component/AccountForm.tsx

@@ -27,7 +27,7 @@ import {AnyAction, Dispatch} from 'redux';
 import {ValidationUtil} from '@wireapp/commons';
 import {Button, Checkbox, CheckboxLabel, Form, Input, Small} from '@wireapp/react-ui-kit';
 
-import {KEY} from 'Util/KeyboardUtil';
+import {handleEnterDown} from 'Util/KeyboardUtil';
 import {getLogger} from 'Util/Logger';
 
 import {Exception} from './Exception';
@@ -170,11 +170,7 @@ const AccountFormComponent = ({account, ...props}: Props & ConnectedProps & Disp
           value={registrationData.name}
           autoComplete="section-create-team username"
           placeholder={_(accountFormStrings.namePlaceholder)}
-          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-            if (event.key === KEY.ENTER) {
-              inputs.email.current?.focus();
-            }
-          }}
+          onKeyDown={event => handleEnterDown(event, () => inputs.email.current?.focus())}
           maxLength={64}
           minLength={2}
           pattern=".{2,64}"
@@ -199,11 +195,7 @@ const AccountFormComponent = ({account, ...props}: Props & ConnectedProps & Disp
               ? accountFormStrings.emailPersonalPlaceholder
               : accountFormStrings.emailTeamPlaceholder,
           )}
-          onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-            if (event.key === KEY.ENTER) {
-              inputs.password.current?.focus();
-            }
-          }}
+          onKeyDown={event => handleEnterDown(event, () => inputs.password.current?.focus())}
           maxLength={128}
           type="email"
           required

src/script/auth/page/EntropyContainer.tsx

@@ -23,7 +23,7 @@ import {useIntl} from 'react-intl';
 
 import {Button, CheckRoundIcon, ContainerSM, H1, Muted, Text} from '@wireapp/react-ui-kit';
 
-import {KEY} from 'Util/KeyboardUtil';
+import {handleEnterDown} from 'Util/KeyboardUtil';
 
 import {setEntropyStrings} from '../../strings';
 import {EntropyData} from '../../util/Entropy';
@@ -78,11 +78,7 @@ const EntropyContainer = ({onSetEntropy, containerSize = 400}: Props) => {
             css={{width: '70%'}}
             onClick={() => forwardEntropy(entropy.entropyData)}
             data-uie-name="do-entropy-confirm"
-            onKeyDown={(event: React.KeyboardEvent) => {
-              if (event.key === KEY.ENTER) {
-                forwardEntropy(entropy.entropyData);
-              }
-            }}
+            onKeyDown={event => handleEnterDown(event, () => forwardEntropy(entropy.entropyData))}
           >
             {_(setEntropyStrings.continue)}
           </Button>

src/script/auth/page/HistoryInfo.tsx

@@ -27,7 +27,7 @@ import {AnyAction, Dispatch} from 'redux';
 
 import {Button, ContainerXS, H1, Link, Paragraph} from '@wireapp/react-ui-kit';
 
-import {KEY} from 'Util/KeyboardUtil';
+import {handleEnterDown} from 'Util/KeyboardUtil';
 
 import {Page} from './Page';
 
@@ -93,11 +93,7 @@ const HistoryInfoComponent = ({
           type="button"
           onClick={onContinue}
           data-uie-name="do-history-confirm"
-          onKeyDown={(event: React.KeyboardEvent) => {
-            if (event.key === KEY.ENTER) {
-              onContinue();
-            }
-          }}
+          onKeyDown={event => handleEnterDown(event, onContinue)}
         >
           {_(historyInfoStrings.ok)}
         </Button>

src/script/auth/page/OAuthPermissions.tsx

@@ -43,7 +43,7 @@ import {
 import {Icon} from 'Components/Icon';
 import {AssetRemoteData} from 'src/script/assets/AssetRemoteData';
 import {AssetRepository} from 'src/script/assets/AssetRepository';
-import {handleKeyDown, KEY} from 'Util/KeyboardUtil';
+import {handleEscDown, handleKeyDown} from 'Util/KeyboardUtil';
 import {loadDataUrl} from 'Util/util';
 
 import {
@@ -213,11 +213,7 @@ const OAuthPermissionsComponent = ({
                 type="button"
                 onClick={onCancel}
                 data-uie-name="do-oauth-cancel"
-                onKeyDown={(event: React.KeyboardEvent) => {
-                  if (event.key === KEY.ESC) {
-                    onCancel();
-                  }
-                }}
+                onKeyDown={event => handleEscDown(event, onCancel)}
               >
                 {_(oauthStrings.cancel)}
               </Button>

src/script/components/RichTextEditor/nodes/Mention.tsx

@@ -83,12 +83,12 @@ export const Mention = (props: MentionComponentProps) => {
       const selectedNode = rangeSelection?.getNodes().length === 1 && rangeSelection?.getNodes()[0];
       if (selectedNode) {
         const isCurrentNode = nodeKey === selectedNode?.getKey();
-        if (event.key === 'Backspace') {
+        if (event.key === KEY.BACKSPACE) {
           // When backspace is hit, we want to select the mention if the cursor is right after it
           const isNextNode =
             selectedNode?.getPreviousSibling()?.getKey() === nodeKey && rangeSelection?.focus.offset === 0;
           shouldSelectNode = isCurrentNode || isNextNode;
-        } else if (event.key === 'Delete') {
+        } else if (event.key === KEY.DELETE) {
           // When backspace is hit, we want to select the mention if the cursor is right before it
           const isNextNode =
             selectedNode?.getNextSibling()?.getKey() === nodeKey &&

src/script/util/KeyboardUtil.ts

@@ -99,8 +99,8 @@ export const handleEnterDown = (event: ReactKeyboardEvent<HTMLElement> | Keyboar
   }
 };
 
-export const handleEscDown = (event: ReactKeyboardEvent<HTMLElement> | KeyboardEvent, callback: () => void): void => {
-  if (event.key === KEY.ESC) {
+export const handleEscDown = (event: ReactKeyboardEvent<Element> | KeyboardEvent, callback: () => void): void => {
+  if (event?.key === KEY.ESC) {
     callback();
   }
 };