Disable search keyboard shortcuts when main header isn't shown

This commit is contained in:
Evan Hahn 2021-02-12 15:58:14 -06:00 committed by Josh Perez
parent 011bdd2ae3
commit eb203ba929
10 changed files with 166 additions and 70 deletions

View file

@ -12,12 +12,14 @@ import { Avatar } from './Avatar';
import { AvatarPopup } from './AvatarPopup';
import { LocalizerType } from '../types/Util';
import { ColorType } from '../types/Colors';
import { ConversationType } from '../state/ducks/conversations';
export type PropsType = {
searchTerm: string;
searchConversationName?: string;
searchConversationId?: string;
startSearchCounter: number;
selectedConversation: undefined | ConversationType;
// To be used as an ID
ourConversationId: string;
@ -36,7 +38,10 @@ export type PropsType = {
avatarPath?: string;
i18n: LocalizerType;
updateSearchTerm: (searchTerm: string) => void;
startSearch: () => void;
searchInConversation: (id: string, name: string) => void;
searchMessages: (
query: string,
options: {
@ -53,7 +58,6 @@ export type PropsType = {
noteToSelf: string;
}
) => void;
clearConversationSearch: () => void;
clearSearch: () => void;
@ -107,12 +111,6 @@ export class MainHeader extends React.Component<PropsType, StateType> {
}
};
public handleOutsideKeyDown = (event: KeyboardEvent): void => {
if (event.key === 'Escape') {
this.hideAvatarPopup();
}
};
public showAvatarPopup = (): void => {
const popperRoot = document.createElement('div');
document.body.appendChild(popperRoot);
@ -122,14 +120,12 @@ export class MainHeader extends React.Component<PropsType, StateType> {
popperRoot,
});
document.addEventListener('click', this.handleOutsideClick);
document.addEventListener('keydown', this.handleOutsideKeyDown);
};
public hideAvatarPopup = (): void => {
const { popperRoot } = this.state;
document.removeEventListener('click', this.handleOutsideClick);
document.removeEventListener('keydown', this.handleOutsideKeyDown);
this.setState({
showingAvatarPopup: false,
@ -141,11 +137,15 @@ export class MainHeader extends React.Component<PropsType, StateType> {
}
};
public componentDidMount(): void {
document.addEventListener('keydown', this.handleGlobalKeyDown);
}
public componentWillUnmount(): void {
const { popperRoot } = this.state;
document.removeEventListener('click', this.handleOutsideClick);
document.removeEventListener('keydown', this.handleOutsideKeyDown);
document.removeEventListener('keydown', this.handleGlobalKeyDown);
if (popperRoot && document.body.contains(popperRoot)) {
document.body.removeChild(popperRoot);
@ -225,7 +225,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
this.setFocus();
};
public handleKeyDown = (
public handleInputKeyDown = (
event: React.KeyboardEvent<HTMLInputElement>
): void => {
const {
@ -262,6 +262,50 @@ export class MainHeader extends React.Component<PropsType, StateType> {
event.stopPropagation();
};
public handleGlobalKeyDown = (event: KeyboardEvent): void => {
const { showingAvatarPopup } = this.state;
const {
i18n,
selectedConversation,
startSearch,
searchInConversation,
} = this.props;
const { ctrlKey, metaKey, shiftKey, key } = event;
const commandKey = get(window, 'platform') === 'darwin' && metaKey;
const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
const commandOrCtrl = commandKey || controlKey;
const commandAndCtrl = commandKey && ctrlKey;
if (showingAvatarPopup && key === 'Escape') {
this.hideAvatarPopup();
} else if (
commandOrCtrl &&
!commandAndCtrl &&
!shiftKey &&
(key === 'f' || key === 'F')
) {
startSearch();
event.preventDefault();
event.stopPropagation();
} else if (
selectedConversation &&
commandOrCtrl &&
!commandAndCtrl &&
shiftKey &&
(key === 'f' || key === 'F')
) {
const name = selectedConversation.isMe
? i18n('noteToSelf')
: selectedConversation.title;
searchInConversation(selectedConversation.id, name);
event.preventDefault();
event.stopPropagation();
}
};
public handleXButton = (): void => {
const {
searchConversationId,
@ -398,7 +442,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
)}
placeholder={placeholder}
dir="auto"
onKeyDown={this.handleKeyDown}
onKeyDown={this.handleInputKeyDown}
value={searchTerm}
onChange={this.updateSearch}
/>