diff --git a/modules/react-arborist/src/commands/default-commands.ts b/modules/react-arborist/src/commands/default-commands.ts index 25a7d58..020a3a8 100644 --- a/modules/react-arborist/src/commands/default-commands.ts +++ b/modules/react-arborist/src/commands/default-commands.ts @@ -1,4 +1,5 @@ import { TreeController } from "../controllers/tree-controller"; +import { focusNextElement, focusPrevElement } from "../utils"; export function focusNext(tree: TreeController) { const next = tree.nextNode || tree.firstNode; @@ -10,10 +11,23 @@ export function focusPrev(tree: TreeController) { if (prev) tree.focus(prev.id); } -export function close() { - alert("close"); +export function focusParent(tree: TreeController) { + const parentId = tree.focusedNode?.parentId; + if (parentId) tree.focus(parentId); } -export function focusParent() { - alert("focusParent"); +export function close(tree: TreeController) { + tree.focusedNode?.close(); +} + +export function open(tree: TreeController) { + tree.focusedNode?.open(); +} + +export function focusOutsideNext(tree: TreeController) { + focusNextElement(tree.element); +} + +export function focusOutsidePrev() { + focusPrevElement(tree.element); } diff --git a/modules/react-arborist/src/commands/row-click.ts b/modules/react-arborist/src/commands/row-click.ts deleted file mode 100644 index fad9b87..0000000 --- a/modules/react-arborist/src/commands/row-click.ts +++ /dev/null @@ -1 +0,0 @@ -// register the row-click command diff --git a/modules/react-arborist/src/components/tree-view.tsx b/modules/react-arborist/src/components/tree-view.tsx index 62b3391..66ff72c 100644 --- a/modules/react-arborist/src/components/tree-view.tsx +++ b/modules/react-arborist/src/components/tree-view.tsx @@ -60,7 +60,7 @@ function TreeViewContainer() { const outerRef = useRef(); // useOuterDrop(outerRef); return ( -
+
(tree.element = node)}> {/* @ts-ignore */} { rows: NodeController[]; + element: HTMLDivElement | null = null; listElement: FixedSizeList | null = null; constructor(public props: TreeViewProps) { @@ -55,7 +56,6 @@ export class TreeController { } get focusedNode() { - console.log("get", this.props.focus.value.id); return this.get(this.props.focus.value.id); } @@ -356,7 +356,6 @@ export class TreeController { isLeaf: focused?.isLeaf, }, ); - console.log("focused Node", focused); if (shortcut) { e.preventDefault(); this.exec(shortcut.command); diff --git a/modules/react-arborist/src/shortcuts/default-shortcuts.ts b/modules/react-arborist/src/shortcuts/default-shortcuts.ts index 7794aa7..8884d08 100644 --- a/modules/react-arborist/src/shortcuts/default-shortcuts.ts +++ b/modules/react-arborist/src/shortcuts/default-shortcuts.ts @@ -1,8 +1,18 @@ import { ShortcutAttrs } from "./types"; export const defaultShortcuts: ShortcutAttrs[] = [ + /* Arrow 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" }, + + /* Tabbing Around */ + {key: "Tab", command: "focusOutsideNext"}, + {key: "Shift+Tab", command: "focusOutsidePrev"} + // { key: "Backspace", command: "destroy" }, // { key: "Tab", command: "focusNextOutside" }, // { key: "Shift+Tab", command: "focusNextOutside" },