Moved focused logic to vlist function

mainendra · Dec 1, 2022 · ed7a244 · ed7a244 · vercel · Dec 1, 2022
1 parent c3687cf
commit ed7a244
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 27 deletions.
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -45,29 +45,27 @@ function SquareBanner(params: ChildBannerParams) {
     const [focusedIndex, setFocusedIndex] = createSignal<number>(1);
     createKeyNav({
         onKeyDown: (event) => {
-            if (!params.focused) {
-                return false;
-            }
-
-            if (getKey(event) === KEYS.RIGHT && stateMachine[focusedIndex()]['right']) {
-                setFocusedIndex(stateMachine[focusedIndex()]['right']);
+            const index = focusedIndex();
+            if (getKey(event) === KEYS.RIGHT && stateMachine[index]['right']) {
+                setFocusedIndex(stateMachine[index]['right']);
                 return true;
             }
-            if (getKey(event) === KEYS.LEFT && stateMachine[focusedIndex()]['left']) {
-                setFocusedIndex(stateMachine[focusedIndex()]['left']);
+            if (getKey(event) === KEYS.LEFT && stateMachine[index]['left']) {
+                setFocusedIndex(stateMachine[index]['left']);
                 return true;
             }
-            if (getKey(event) === KEYS.DOWN && stateMachine[focusedIndex()]['down']) {
-                setFocusedIndex(stateMachine[focusedIndex()]['down']);
+            if (getKey(event) === KEYS.DOWN && stateMachine[index]['down']) {
+                setFocusedIndex(stateMachine[index]['down']);
                 return true;
             }
-            if (getKey(event) === KEYS.UP && stateMachine[focusedIndex()]['up']) {
-                setFocusedIndex(stateMachine[focusedIndex()]['up']);
+            if (getKey(event) === KEYS.UP && stateMachine[index]['up']) {
+                setFocusedIndex(stateMachine[index]['up']);
                 return true;
             }
 
             return false;
-        }
+        },
+        focused: () => params.focused,
     });
 
     const itemSize = () => (params.width / 2) - 4; // 2px border
@@ -87,13 +85,14 @@ function MiniChildBanner(params: MiniChildBannerParams) {
     const [parentSize, setParentSize] = createSignal(0);
     const itemSize = () => parentSize() / 5;
     const { list, focusedIndex } = createVirtualList({
+        focused: () => params.focused,
         parentSize,
         sizeOfItem: () => itemSize(),
         overscan: 5,
         paddingStart: 50,
         paddingEnd: 50,
-        isNext: (event: KeyboardEvent) => params.focused && getKey(event) === KEYS.RIGHT,
-        isPrevious: (event: KeyboardEvent) => params.focused && getKey(event) === KEYS.LEFT,
+        isNext: (event: KeyboardEvent) => getKey(event) === KEYS.RIGHT,
+        isPrevious: (event: KeyboardEvent) => getKey(event) === KEYS.LEFT,
         startIndex: 2,
         circular: false,
         fixedFocus: false,
@@ -125,13 +124,14 @@ function ChildBanner(params: ChildBannerParams) {
     const [parentSize, setParentSize] = createSignal(0);
     const itemSize = () => parentSize() / 5;
     const { list, focusedIndex } = createVirtualList({
+        focused: () => params.focused,
         parentSize,
         sizeOfItem: () => itemSize(),
         overscan: 5,
         paddingStart: 50,
         paddingEnd: 50,
-        isNext: (event: KeyboardEvent) => params.focused && getKey(event) === KEYS.DOWN,
-        isPrevious: (event: KeyboardEvent) => params.focused && getKey(event) === KEYS.UP,
+        isNext: (event: KeyboardEvent) => getKey(event) === KEYS.DOWN,
+        isPrevious: (event: KeyboardEvent) => getKey(event) === KEYS.UP,
         startIndex: 2,
         circular: false,
         fixedFocus: false,
@@ -166,13 +166,14 @@ export default function Banner(params: BannerParams) {
     const [parentSize, setParentSize] = createSignal(0);
     const itemSize = () => parentSize() / 5;
     const { list, focusedIndex } = createVirtualList({
+        focused: () => params.focused,
         parentSize,
         sizeOfItem: () => itemSize(),
         overscan: 5,
         paddingStart: 50,
         paddingEnd: 50,
-        isNext: (event: KeyboardEvent) => params.focused && getKey(event) === KEYS.RIGHT,
-        isPrevious: (event: KeyboardEvent) => params.focused && getKey(event) === KEYS.LEFT,
+        isNext: (event: KeyboardEvent) => getKey(event) === KEYS.RIGHT,
+        isPrevious: (event: KeyboardEvent) => getKey(event) === KEYS.LEFT,
         startIndex: 0,
         circular: true,
         fixedFocus: false,

diff --git a/src/components/Swimlane.tsx b/src/components/Swimlane.tsx
@@ -1,4 +1,5 @@
 import { createSignal, For, onMount } from "solid-js";
+import { getKey, KEYS } from "../libs/keyCodes";
 import { createVirtualList } from "../libs/virtualList";
 
 interface SwimlaneParams {
@@ -10,13 +11,14 @@ export default function Swimlane(params: SwimlaneParams) {
     let parentRef: HTMLDivElement | undefined;
     const [parentSize, setParentSize] = createSignal(0);
     const { list, listSizePixel, startPosition, focusedIndex } = createVirtualList({
+        focused: () => params.focused,
         parentSize,
         sizeOfItem: () => 150,
         overscan: 5,
         paddingStart: 50,
         paddingEnd: 50,
-        isNext: (event: KeyboardEvent) => params.focused && ["ArrowRight", "KEYCODE_DPAD_RIGHT"].includes(event.code),
-        isPrevious: (event: KeyboardEvent) => params.focused && ["ArrowLeft", "KEYCODE_DPAD_LEFT"].includes(event.code),
+        isNext: (event: KeyboardEvent) => getKey(event) === KEYS.RIGHT,
+        isPrevious: (event: KeyboardEvent) => getKey(event) === KEYS.LEFT,
         startIndex: 0,
         circular: true,
         fixedFocus: false,

diff --git a/src/libs/navigation.ts b/src/libs/navigation.ts
@@ -1,4 +1,4 @@
-import { Accessor, createSignal, onCleanup } from "solid-js";
+import { Accessor, createEffect, createSignal, onCleanup } from "solid-js";
 import { subscribeKeyDown } from "./keyListener";
 
 export interface navProps {
@@ -57,8 +57,14 @@ export function createNav({ start, end, current, circular }: navProps): returnTy
 
 interface KeyNavParams {
     onKeyDown: (event: KeyboardEvent) => boolean;
+    focused?: Accessor<boolean>;
 }
 export function createKeyNav(params: KeyNavParams) {
-    const cleanup = subscribeKeyDown(params.onKeyDown);
-    onCleanup(cleanup);
+    createEffect(() => {
+        if (params.focused?.() ?? true) {
+            const cleanup = subscribeKeyDown(params.onKeyDown);
+            onCleanup(cleanup);
+            return cleanup;
+        }
+    });
 }
diff --git a/src/libs/virtualList.ts b/src/libs/virtualList.ts
@@ -1,4 +1,4 @@
-import { Accessor, createMemo, onCleanup } from "solid-js";
+import { Accessor, createEffect, createMemo, onCleanup } from "solid-js";
 import { subscribeKeyDown } from "./keyListener";
 import { createNav } from "./navigation";
 
@@ -15,6 +15,7 @@ interface VirtualListParams {
     isNext?: (event: KeyboardEvent) => boolean;
     isPrevious?: (event: KeyboardEvent) => boolean;
     onKeyDown?: (event: KeyboardEvent) => boolean;
+    focused?: Accessor<boolean>;
 }
 
 interface ListItem {
@@ -116,8 +117,13 @@ export function createVirtualList(params: VirtualListParams): VirtualList {
         return params.onKeyDown?.(event) ?? false;
     };
 
-    const cleanup = subscribeKeyDown(onKeyDown);
-    onCleanup(cleanup);
+    createEffect(() => {
+        if (params.focused?.() ?? true) {
+            const cleanup = subscribeKeyDown(onKeyDown);
+            onCleanup(cleanup);
+            return cleanup;
+        }
+    });
 
     return { list, listSizePixel, startPosition, focusedIndex: position };
 }