less code duplication
This commit is contained in:
parent
970b9d850e
commit
1bd801ce5d
6 changed files with 47 additions and 69 deletions
|
|
@ -1,11 +1,15 @@
|
|||
import { useEffect } from "react";
|
||||
|
||||
export function useShortcuts(spec: {keys: string[], action: () => void}[]) {
|
||||
export function useShortcuts(spec: {keys: string[], action: () => void}[], ignoreInputs = true) {
|
||||
// I don't know if this is efficient, but I decided to just register one event listener for every shortcut, rather than generating one big event listener for all shortcuts.
|
||||
// The benefit is that we don't have to memoize anything: useEffect will only be called if the action updated, and React allows calling useEffect for every item in a list as long as the list doesn't change.
|
||||
for (const {keys, action} of spec) {
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
// @ts-ignore: don't steal keyboard events while the user is typing in a text box, etc.
|
||||
if (["INPUT", "TEXTAREA", "SELECT"].includes(e.target?.tagName)) return;
|
||||
if (ignoreInputs) {
|
||||
// @ts-ignore: don't steal keyboard events while the user is typing in a text box, etc.
|
||||
if (["INPUT", "TEXTAREA", "SELECT"].includes(e.target?.tagName)) return;
|
||||
}
|
||||
|
||||
if (e.ctrlKey !== keys.includes("Ctrl")) return;
|
||||
if (e.shiftKey !== keys.includes("Shift")) return;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue