Split codebase (#455)

apps/yaak-client/hooks/useEventViewerKeyboard.ts

@@ -0,0 +1,85 @@
+import type { Virtualizer } from "@tanstack/react-virtual";
+import { useCallback } from "react";
+import { useKey } from "react-use";
+
+interface UseEventViewerKeyboardProps {
+  totalCount: number;
+  activeIndex: number | null;
+  setActiveIndex: (index: number | null) => void;
+  virtualizer?: Virtualizer<HTMLDivElement, Element> | null;
+  isContainerFocused: () => boolean;
+  enabled?: boolean;
+  closePanel?: () => void;
+  openPanel?: () => void;
+}
+
+export function useEventViewerKeyboard({
+  totalCount,
+  activeIndex,
+  setActiveIndex,
+  virtualizer,
+  isContainerFocused,
+  enabled = true,
+  closePanel,
+  openPanel,
+}: UseEventViewerKeyboardProps) {
+  const selectPrev = useCallback(() => {
+    if (totalCount === 0) return;
+
+    const newIndex = activeIndex == null ? 0 : Math.max(0, activeIndex - 1);
+    setActiveIndex(newIndex);
+    virtualizer?.scrollToIndex(newIndex, { align: "auto" });
+  }, [activeIndex, setActiveIndex, totalCount, virtualizer]);
+
+  const selectNext = useCallback(() => {
+    if (totalCount === 0) return;
+
+    const newIndex = activeIndex == null ? 0 : Math.min(totalCount - 1, activeIndex + 1);
+    setActiveIndex(newIndex);
+    virtualizer?.scrollToIndex(newIndex, { align: "auto" });
+  }, [activeIndex, setActiveIndex, totalCount, virtualizer]);
+
+  useKey(
+    (e) => e.key === "ArrowUp" || e.key === "k",
+    (e) => {
+      if (!enabled || !isContainerFocused()) return;
+      e.preventDefault();
+      selectPrev();
+    },
+    undefined,
+    [enabled, isContainerFocused, selectPrev],
+  );
+
+  useKey(
+    (e) => e.key === "ArrowDown" || e.key === "j",
+    (e) => {
+      if (!enabled || !isContainerFocused()) return;
+      e.preventDefault();
+      selectNext();
+    },
+    undefined,
+    [enabled, isContainerFocused, selectNext],
+  );
+
+  useKey(
+    (e) => e.key === "Escape",
+    (e) => {
+      if (!enabled || !isContainerFocused()) return;
+      e.preventDefault();
+      closePanel?.();
+    },
+    undefined,
+    [enabled, isContainerFocused, closePanel],
+  );
+
+  useKey(
+    (e) => e.key === "Enter" || e.key === " ",
+    (e) => {
+      if (!enabled || !isContainerFocused() || activeIndex == null) return;
+      e.preventDefault();
+      openPanel?.();
+    },
+    undefined,
+    [enabled, isContainerFocused, activeIndex, openPanel],
+  );
+}