Better linux/Windows support for hotkeys

This commit is contained in:
Gregory Schier
2023-11-22 09:06:22 -08:00
parent e5e356a822
commit 884909d449

View File

@@ -1,3 +1,4 @@
import type { OsType } from '@tauri-apps/api/os';
import { useEffect, useRef } from 'react';
import { useOsInfo } from './useOsInfo';
@@ -11,13 +12,13 @@ export type HotkeyAction =
| 'environmentEditor.toggle';
const hotkeys: Record<HotkeyAction, string[]> = {
'request.send': ['Meta+Enter', 'Meta+r'],
'request.create': ['Meta+n'],
'request.duplicate': ['Meta+d'],
'sidebar.toggle': ['Meta+b'],
'sidebar.focus': ['Meta+1'],
'urlBar.focus': ['Meta+l'],
'environmentEditor.toggle': ['Meta+e'],
'request.send': ['CmdCtrl+Enter', 'CmdCtrl+r'],
'request.create': ['CmdCtrl+n'],
'request.duplicate': ['CmdCtrl+d'],
'sidebar.toggle': ['CmdCtrl+b'],
'sidebar.focus': ['CmdCtrl+1'],
'urlBar.focus': ['CmdCtrl+l'],
'environmentEditor.toggle': ['CmdCtrl+e'],
};
export function useHotkey(action: HotkeyAction | null, callback: (e: KeyboardEvent) => void) {
@@ -31,6 +32,8 @@ export function useHotkey(action: HotkeyAction | null, callback: (e: KeyboardEve
export function useAnyHotkey(callback: (action: HotkeyAction, e: KeyboardEvent) => void) {
const currentKeys = useRef<Set<string>>(new Set());
const callbackRef = useRef(callback);
const osInfo = useOsInfo();
const os = osInfo?.osType ?? null;
useEffect(() => {
callbackRef.current = callback;
@@ -38,7 +41,7 @@ export function useAnyHotkey(callback: (action: HotkeyAction, e: KeyboardEvent)
useEffect(() => {
const down = (e: KeyboardEvent) => {
currentKeys.current.add(e.key);
currentKeys.current.add(normalizeKey(e.key, os));
for (const [hkAction, hkKeys] of Object.entries(hotkeys) as [HotkeyAction, string[]][]) {
for (const hkKey of hkKeys) {
const keys = hkKey.split('+');
@@ -55,7 +58,7 @@ export function useAnyHotkey(callback: (action: HotkeyAction, e: KeyboardEvent)
}
};
const up = (e: KeyboardEvent) => {
currentKeys.current.delete(e.key);
currentKeys.current.delete(normalizeKey(e.key, os));
};
window.addEventListener('keydown', down);
window.addEventListener('keyup', up);
@@ -63,7 +66,7 @@ export function useAnyHotkey(callback: (action: HotkeyAction, e: KeyboardEvent)
window.removeEventListener('keydown', down);
window.removeEventListener('keyup', up);
};
}, []);
}, [os]);
}
export function useFormattedHotkey(action: HotkeyAction | null): string | null {
@@ -79,7 +82,7 @@ export function useFormattedHotkey(action: HotkeyAction | null): string | null {
for (const p of parts) {
if (os === 'Darwin') {
if (p === 'Meta') {
if (p === 'CmdCtrl') {
labelParts.push('⌘');
} else if (p === 'Shift') {
labelParts.push('⇧');
@@ -91,7 +94,7 @@ export function useFormattedHotkey(action: HotkeyAction | null): string | null {
labelParts.push(p.toUpperCase());
}
} else {
if (p === 'Meta') {
if (p === 'CmdCtrl') {
labelParts.push('Ctrl');
} else {
labelParts.push(p);
@@ -105,3 +108,9 @@ export function useFormattedHotkey(action: HotkeyAction | null): string | null {
return labelParts.join('+');
}
}
const normalizeKey = (key: string, os: OsType | null) => {
if (key === 'Meta' && os === 'Darwin') return 'CmdCtrl';
else if (key === 'Control' && os !== 'Darwin') return 'CmdCtrl';
else return key;
};