Tab Shortcuts Work

brimdata · Apr 2, 2024 · 7e8e44d · 7e8e44d
1 parent f034806
commit 7e8e44d
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 8 deletions.
diff --git 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<any>) {
   const next = tree.nextNode || tree.firstNode;
@@ -10,10 +11,23 @@ export function focusPrev(tree: TreeController<any>) {
   if (prev) tree.focus(prev.id);
 }
 
-export function close() {
-  alert("close");
+export function focusParent(tree: TreeController<any>) {
+  const parentId = tree.focusedNode?.parentId;
+  if (parentId) tree.focus(parentId);
 }
 
-export function focusParent() {
-  alert("focusParent");
+export function close(tree: TreeController<any>) {
+  tree.focusedNode?.close();
+}
+
+export function open(tree: TreeController<any>) {
+  tree.focusedNode?.open();
+}
+
+export function focusOutsideNext(tree: TreeController<any>) {
+  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
diff --git 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 (
-    <div {...attrs}>
+    <div {...attrs} ref={(node) => (tree.element = node)}>
       {/* @ts-ignore */}
       <FixedSizeList
         className={tree.props.className}

diff --git a/modules/react-arborist/src/controllers/tree-controller.ts b/modules/react-arborist/src/controllers/tree-controller.ts
@@ -8,6 +8,7 @@ import { NodeController } from "./node-controller";
 
 export class TreeController<T> {
   rows: NodeController<T>[];
+  element: HTMLDivElement | null = null;
   listElement: FixedSizeList | null = null;
 
   constructor(public props: TreeViewProps<T>) {
@@ -55,7 +56,6 @@ export class TreeController<T> {
   }
 
   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<T> {
         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
@@ -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" },