Better linux/Windows support for hotkeys

This commit is contained in:
Gregory Schier
2023-11-22 09:06:22 -08:00
parent b0026aff66
commit 8fb6f51555

View File

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