Comments (10)
@holloway I want to break up that giant onKeyDown event listener found in DefaultContainer. Each of those cases should be a named function with the TreeApi as the only argument. All of those could go in their own file called commands.ts.
The commands should be put in an object; the key is the name, the value is function.
Another object will map a keybinding string to the string name of the command function. A user could then configure this by passing their own object.
Then in the DefaultContainer#onKeyDown handler, we have some logic that turns that event into a keybinding string. We could follow VSCode's example for how to structure the string (Shift+ArrowDown
) for example. Then we run whatever command is mapped to that keybinding string using the object above.
I'm wondering if we want to only make a few of the keybindings available for customization. For example, "ArrowDown" should probably not be configurable. But "Space" should be.
Something Like
<DefaultContainer
onKeyDown={(e) => {
const keybinding = toKeyBinding(e)
tree.runCommandAt(keybinding)
}}
/>
class TreeApi() {
runCommandAt(key: string) {
const commandName = this.keybindings[key]
const command = this.commands[commandName]
if (command) command(this)
}
}
from react-arborist.
I should have used tree.current.createLeaf()
. Thanks for the response.
from react-arborist.
it works for me @jameskerr, thanks for your advice. I forgot there's an onKeyDown prop in every element.
from react-arborist.
Work on this is progressing. Today I just finished it in the use-nodes branch.
Keyboard shortcuts look like this:
import { ShortcutAttrs } from "./types";
export const defaultShortcuts: ShortcutAttrs[] = [
/* Keyboard Navigation */
{ key: "ArrowDown", command: "focusNext" },
{ key: "ArrowUp", command: "focusPrev" },
{ key: "ArrowLeft", command: "focusParent", when: "isLeaf || isClosed" },
{ key: "ArrowLeft", command: "close", when: "isOpen" },
{ key: "ArrowRight", command: "open", when: "isClosed" },
{ key: "ArrowRight", command: "focusNext", when: "isOpen" },
{ key: "Home", command: "focusFirst" },
{ key: "End", command: "focusLast" },
{ key: "PageDown", command: "focusNextPage" },
{ key: "PageUp", command: "focusPrevPage" },
/* Tabbing Around */
{ key: "Tab", command: "focusOutsideNext" },
{ key: "Shift+Tab", command: "focusOutsidePrev" },
/* CRUD */
{ key: "Backspace", command: "destroy" },
{ key: "a", command: "createLeaf" },
{ key: "Shift+A", command: "createInternal" },
{ key: "Enter", command: "edit" },
/* Selection */
{ key: "Shift+ArrowUp", command: "moveSelectionStart" },
{ key: "Shift+ArrowDown", command: "moveSelectionEnd" },
{ key: " ", command: "toggle", when: "isInternal" },
{ key: " ", command: "select", when: "isLeaf" },
{ key: "Meta+a", command: "selectAll" },
{ key: "Control+a", command: "selectAll" },
];
The commands look like so (just a few examples)
export function focusFirst(tree: Tree) {
if (tree.firstNode) tree.focus(tree.firstNode.id);
}
export function focusLast(tree: Tree) {
if (tree.lastNode) tree.focus(tree.lastNode.id);
}
export function focusNext(tree: Tree) {
const next = tree.nextNode || tree.firstNode;
if (next) tree.focus(next.id);
}
export function focusPrev(tree: Tree) {
const prev = tree.prevNode || tree.lastNode;
if (prev) tree.focus(prev.id);
}
The they get connected in the new <TreeView />
component.
export type TreeViewProps<T> = {
/* Commands and Shortcuts */
shortcuts: ShortcutAttrs[];
commands: CommandObject<T>;
}
from react-arborist.
Yes! I wish there was a way to do this. Also, I am trying to bind these functions to some buttons outside of the tree. I tried creating a ref and passing it to the Tree component, and the using the ref to do tree.createLeaf()
. But it doesn't seem to be working.
from react-arborist.
Can you post the code that's not working?
If it's a ref, you may need to tree.current.createLeaf()
.
Also, if you're using the data
prop. you'll need to have an onCreate
prop on the tree in order for createLeaf()
work.
from react-arborist.
hi @jameskerr, is there any way to disable the keyboard shortcuts from the Container props? I want to disable space
shortcuts to toggle the parent folder
from react-arborist.
@hilmanauz You can always intercept the onKeyDown event in your RowRenderer and call e.stopPropagation()
. That's a workaround for today.
from react-arborist.
@hilmanauz , what worked for me was to host the library on my own github after removing the onKeyDown listener from the DefaultContainer file.
from react-arborist.
Hi @jameskerr see #76 ... keen for a review 😄
from react-arborist.
Related Issues (20)
- Better scrolling while user is dragging
- [Question] How to build a tree with some folders open and some closed? HOT 1
- There is a bug in using the tree.update method to set height.
- Duplicate HTML5 backend error HOT 5
- Deletion behavior can be unintuitive HOT 4
- Lack of control over delete leads to some weird scenarios HOT 2
- Should we be able to focus the entire tree? HOT 2
- Using react-arborist in an app seems to break file & folder drop on <input type="file" multiple /> elements HOT 2
- How rename `name` to `node_name` and create node with name
- Drag and Drop should be handled within the level hierarchy
- How do you implement controlled select?
- Refresh the tree HOT 1
- Node selection getting false when we click outside (treeview) HOT 2
- Limit the depth of the tree to just N-levels HOT 1
- onMove receives inconsistent parentId and index
- Multi select is stopping event propogation HOT 2
- Why does moving the mouse over the context menu modal trigger a re-render?
- ContextMenu Rename and Delete HOT 1
- Split first level horizontally
- willReceiveDrop for closed folders? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-arborist.