Fix various issues with hotkeys (#1279)

This commit is contained in:
Alexander Zinchuk 2021-07-16 21:00:17 +03:00
parent 54dd4860ee
commit 5fac65a4ab
7 changed files with 13 additions and 9 deletions

View File

@ -149,7 +149,7 @@ const ChatFolders: FC<StateProps & DispatchProps> = ({
useEffect(() => { useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => { const handleKeyDown = (e: KeyboardEvent) => {
if (e.metaKey && e.code.startsWith('Digit') && folderTabs) { if (e.ctrlKey && e.shiftKey && e.code.startsWith('Digit') && folderTabs) {
const [, digit] = e.code.match(/Digit(\d)/) || []; const [, digit] = e.code.match(/Digit(\d)/) || [];
if (!digit) return; if (!digit) return;

View File

@ -10,7 +10,7 @@ import {
import { NotifyException, NotifySettings } from '../../../types'; import { NotifyException, NotifySettings } from '../../../types';
import { ALL_CHATS_PRELOAD_DISABLED, CHAT_HEIGHT_PX, CHAT_LIST_SLICE } from '../../../config'; import { ALL_CHATS_PRELOAD_DISABLED, CHAT_HEIGHT_PX, CHAT_LIST_SLICE } from '../../../config';
import { IS_ANDROID } from '../../../util/environment'; import { IS_ANDROID, IS_MAC_OS, IS_PWA } from '../../../util/environment';
import usePrevious from '../../../hooks/usePrevious'; import usePrevious from '../../../hooks/usePrevious';
import { mapValues, pick } from '../../../util/iteratees'; import { mapValues, pick } from '../../../util/iteratees';
import { getChatOrder, prepareChatList, prepareFolderListIds } from '../../../modules/helpers'; import { getChatOrder, prepareChatList, prepareFolderListIds } from '../../../modules/helpers';
@ -166,7 +166,7 @@ const ChatList: FC<OwnProps & StateProps & DispatchProps> = ({
useEffect(() => { useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => { const handleKeyDown = (e: KeyboardEvent) => {
if (isActive && orderedIds) { if (isActive && orderedIds) {
if (e.ctrlKey && e.code.startsWith('Digit')) { if (IS_PWA && ((IS_MAC_OS && e.metaKey) || (!IS_MAC_OS && e.ctrlKey)) && e.code.startsWith('Digit')) {
const [, digit] = e.code.match(/Digit(\d)/) || []; const [, digit] = e.code.match(/Digit(\d)/) || [];
if (!digit) return; if (!digit) return;

View File

@ -125,8 +125,8 @@ const ForwardPicker: FC<OwnProps & StateProps & DispatchProps> = ({
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const handleKeyDown = useKeyboardListNavigation(containerRef, isOpen, (index) => { const handleKeyDown = useKeyboardListNavigation(containerRef, isOpen, (index) => {
if (viewportIds) { if (viewportIds && viewportIds.length > 0) {
setForwardChatId({ id: viewportIds[index] }); setForwardChatId({ id: viewportIds[index === -1 ? 0 : index] });
} }
}, '.ListItem-button', true); }, '.ListItem-button', true);

View File

@ -233,7 +233,7 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
e.target.removeEventListener('keyup', handleKeyUp); e.target.removeEventListener('keyup', handleKeyUp);
} }
if (e.metaKey) { if (e.metaKey && !html.length) {
const targetIndexDelta = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : undefined; const targetIndexDelta = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : undefined;
if (targetIndexDelta) { if (targetIndexDelta) {
e.preventDefault(); e.preventDefault();

View File

@ -135,8 +135,9 @@ const RightSearch: FC<OwnProps & StateProps & DispatchProps> = ({
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const handleKeyDown = useKeyboardListNavigation(containerRef, true, (index) => { const handleKeyDown = useKeyboardListNavigation(containerRef, true, (index) => {
if (foundResults && foundResults[index]) { const foundResult = foundResults && foundResults[index === -1 ? 0 : index];
foundResults[index].onClick(); if (foundResult) {
foundResult.onClick();
} }
}, '.ListItem-button', true); }, '.ListItem-button', true);

View File

@ -91,7 +91,7 @@ const SearchInput: FC<OwnProps> = ({
} }
const handleKeyDown = useCallback((e: React.KeyboardEvent) => { const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
if (e.key === 'ArrowDown') { if (e.key === 'ArrowDown' || e.key === 'Enter') {
const element = document.querySelector(`.${parentContainerClassName} .ListItem-button`) as HTMLElement; const element = document.querySelector(`.${parentContainerClassName} .ListItem-button`) as HTMLElement;
if (element) { if (element) {
element.focus(); element.focus();

View File

@ -37,6 +37,9 @@ export const IS_MAC_OS = PLATFORM_ENV === 'macOS';
export const IS_IOS = PLATFORM_ENV === 'iOS'; export const IS_IOS = PLATFORM_ENV === 'iOS';
export const IS_ANDROID = PLATFORM_ENV === 'Android'; export const IS_ANDROID = PLATFORM_ENV === 'Android';
export const IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); export const IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
export const IS_PWA = window.matchMedia('(display-mode: standalone)').matches
|| (window.navigator as any).standalone
|| document.referrer.includes('android-app://');
export const IS_TOUCH_ENV = window.matchMedia('(pointer: coarse)').matches; export const IS_TOUCH_ENV = window.matchMedia('(pointer: coarse)').matches;
// Keep in mind the landscape orientation // Keep in mind the landscape orientation