Skip to content

Commit

Permalink
refactor: Use KeyboardUtil more often (#17597)
Browse files Browse the repository at this point in the history
  • Loading branch information
svitovyda committed Jun 17, 2024
1 parent a01fa21 commit 1bdd3a8
Show file tree
Hide file tree
Showing 6 changed files with 13 additions and 33 deletions.
14 changes: 3 additions & 11 deletions src/script/auth/component/AccountForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}"
Expand All @@ -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
Expand Down
8 changes: 2 additions & 6 deletions src/script/auth/page/EntropyContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 2 additions & 6 deletions src/script/auth/page/HistoryInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
Expand Down
8 changes: 2 additions & 6 deletions src/script/auth/page/OAuthPermissions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/script/components/RichTextEditor/nodes/Mention.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 &&
Expand Down
4 changes: 2 additions & 2 deletions src/script/util/KeyboardUtil.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
};
Expand Down

0 comments on commit 1bdd3a8

Please sign in to comment.