@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
40 lines (39 loc) • 1.54 kB
JavaScript
import { isInView } from "@1771technologies/lytenyte-shared";
import { getFirstNode } from "../navigation/get-first-node.js";
import { getLastNode } from "../navigation/get-last-node.js";
import { getNextNode } from "../navigation/get-next-node.js";
import { getPrevNode } from "../navigation/get-prev-node.js";
import { getFocusedNode } from "../utils/get-focused-node.js";
export function makeHandleNavigation(ctx) {
const acceptedKeys = ["ArrowUp", "ArrowDown", "Home", "End"];
return (ev) => {
if (!acceptedKeys.includes(ev.key) || ev.shiftKey || ev.ctrlKey || ev.metaKey)
return;
const current = getFocusedNode();
if (!current)
return;
if (ev.key === "ArrowUp") {
const prev = getPrevNode(current);
if (!prev)
return;
const inView = isInView(prev, ctx.panel);
if (!inView)
prev?.scrollIntoView({ behavior: "instant", block: "start" });
prev?.focus();
}
if (ev.key === "ArrowDown") {
const node = getNextNode(current);
if (!node)
return;
const inView = isInView(node, ctx.panel);
if (!inView)
node?.scrollIntoView({ behavior: "instant", block: "end" });
node?.focus();
}
if (ev.key === "Home")
getFirstNode(ctx.panel)?.focus();
if (ev.key === "End")
getLastNode(ctx.panel)?.focus();
ev.preventDefault();
};
}