Add column keyboard navigation

Author: davenquinn

packages/column-views/src/index.ts

@@ -14,6 +14,7 @@ import styles from "./column.module.sass";
 import {
   CompositeUnitsColumn,
   TrackedLabeledUnit,
+  UnitKeyboardNavigation,
   useUnitSelectionDispatch,
 } from "./units";
 import { IUnit } from "./units/types";
@@ -230,6 +231,7 @@ function Column(
     mergeOverlappingSections?: boolean;
     showLabelColumn?: boolean;
     columnRef?: RefObject<HTMLDivElement>;
+    keyboardNavigation?: boolean;
   }
 ) {
   const {
@@ -242,6 +244,7 @@ function Column(
     className: baseClassName,
     showLabelColumn = true,
     mergeOverlappingSections = true,
+    keyboardNavigation = false,
     columnRef,
     children,
     ...rest
@@ -298,6 +301,7 @@ function Column(
           ]);
         })
       ),
+      h.if(keyboardNavigation)(UnitKeyboardNavigation, { units: data }),
       children,
     ])
   );

packages/column-views/src/units/boxes.ts

@@ -141,6 +141,10 @@ function useUnitSelectionManager(
 
   useEffect(() => {
     if (!selected) return;
+    // In case we haven't set the position of the unit (if we don't have a target), set the selected unit
+    dispatch(unit, ref.current, null);
+
+    // Scroll the unit into view
     ref.current?.scrollIntoView({
       behavior: "smooth",
       block: "center",

packages/column-views/src/units/selection.ts

@@ -1,6 +1,10 @@
 import { BaseUnit } from "@macrostrat/api-types";
 import h from "@macrostrat/hyper";
-import { getQueryString, setQueryString } from "@macrostrat/ui-components";
+import {
+  getQueryString,
+  setQueryString,
+  useKeyHandler,
+} from "@macrostrat/ui-components";
 import {
   Dispatch,
   SetStateAction,
@@ -15,8 +19,8 @@ import {
 
 type UnitSelectDispatch = (
   unit: BaseUnit | null,
-  target: HTMLElement,
-  event: Event
+  target: HTMLElement | null,
+  event: Event | null
 ) => void;
 
 const UnitSelectionContext = createContext<BaseUnit | null>(null);
@@ -73,11 +77,6 @@ function BaseUnitSelectionProvider<T extends BaseUnit>({
   const _onUnitSelected = useCallback(
     (u: T, target: HTMLElement, event: Event) => {
       let newUnit = u;
-      if (u == unit) {
-        // If the same unit is selected, deselect it
-        newUnit = null;
-      }
-
       setUnit(newUnit);
       onUnitSelected?.(newUnit, target, event);
     },
@@ -129,9 +128,34 @@ export function useColumnNav(
   return [columnArgs, setCurrentColumn];
 }
 
-function ColumnNavProvider({ children, ...defaultArgs }) {
+export function ColumnNavProvider({ children, ...defaultArgs }) {
   const value = useColumnNav(defaultArgs);
   return h(ColumnNavCtx.Provider, { value }, children);
 }
 
-export { ColumnNavProvider };
+export function UnitKeyboardNavigation<T extends BaseUnit>({
+  units,
+}: {
+  units: T[];
+}) {
+  const selectedUnit = useSelectedUnit();
+  const selectUnit = useUnitSelectionDispatch();
+
+  const ix = units.findIndex((unit) => unit.unit_id === selectedUnit?.unit_id);
+
+  const keyMap = {
+    38: ix - 1,
+    40: ix + 1,
+  };
+
+  useKeyHandler(
+    (event) => {
+      const nextIx = keyMap[event.keyCode];
+      if (nextIx == null || nextIx < 0 || nextIx >= units.length) return;
+      selectUnit(units[nextIx], null, null);
+      event.stopPropagation();
+    },
+    [units, ix]
+  );
+  return null;
+}

packages/column-views/stories/column.stories.ts

@@ -10,6 +10,7 @@ import {
 import {
   Column,
   preprocessUnits,
+  UnitKeyboardNavigation,
   UnitSelectionProvider,
   useSelectedUnit,
 } from "../src";
@@ -152,13 +153,13 @@ export function WithUnitSelectionPopover() {
   return h(
     UnitSelectionProvider,
     {
-      onUnitSelected: (unit, target: SVGElement | HTMLElement) => {
+      onUnitSelected: (unit, target: SVGElement | HTMLElement | null) => {
         if (unit == null) {
           setPosition(null);
           return;
         }
         const el: HTMLElement = ref.current;
-        if (el == null) return;
+        if (el == null || target == null) return;
         const rect = el.getBoundingClientRect();
         const targetRect = target.getBoundingClientRect();
         setPosition({
@@ -169,8 +170,15 @@ export function WithUnitSelectionPopover() {
         });
       },
     },
-    h(BasicColumn, { id: 432, showLabelColumn: true, columnRef: ref }, [
-      h(UnitSelectionPopover, { position }),
-    ])
+    h(
+      BasicColumn,
+      {
+        id: 432,
+        showLabelColumn: true,
+        columnRef: ref,
+        keyboardNavigation: true,
+      },
+      [h(UnitSelectionPopover, { position })]
+    )
   );
 }