Keyboard shortcut proof of concept #217
Conversation
| if (e.key === "Tab" && !e.shiftKey) { | ||
| e.preventDefault(); | ||
| focusNextElement(e.currentTarget); | ||
| return; | ||
| } | ||
| // Focus Previous Element |
There was a problem hiding this comment.
I left these comments here as placeholders for the handler names. Let me know if I need to change any of these. This would turn into handleFocusPreviousElement.
| shortcut: (e:any) => e.key === "Backspace", | ||
| function: (tree:any, e:any) => { |
There was a problem hiding this comment.
Each handler consists of a shortcut and a function.
| return; | ||
| } | ||
|
|
||
| Object.values(shortcutHandlers).find(handler => handler.shortcut(e))?.function(tree, e); |
There was a problem hiding this comment.
Here, we run the function of the handler with a shortcut that returns true based on the pressed keys.
| const customShortcutHandlers = { | ||
| ...shortcutHandlers, | ||
| // You can override shortcuts like this | ||
| handleSelectDownTree: { | ||
| shortcut: (e:any) => e.key === "ArrowUp" || e.key === "k", | ||
| function: shortcutHandlers.handleSelectDownTree.function | ||
| }, | ||
| // You can even add custom shortcuts | ||
| customHandler: { | ||
| shortcut: (e:any) => e.key === "@", | ||
| function: (tree:any, e:any) => { | ||
| alert("@"); | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
This is how you override or even add custom shortcuts.
|
Thank you for your work @robskidmore ! The concepts are there, but I'd like an api that is a bit more terse. |
|
Awesome! Could you elaborate on what you mean by "an API that is a bit more terse"? For my use case, I needed a lot of flexibility to add shortcuts beyond those already provided with full access to the tree. This seemed like the most flexible way to do that without Were you looking more for something that just allowed customization of the current shortcuts? |
Here's a quick proof of concept for customizable keyboard shortcuts.
If this approach looks good, I can clean up the types and finish the rest of the handlers.