Navigate between dialog tabs using left/right.

GitOrigin-RevId: fb0f36dcad44ec7fbd9cc9a2c3488340c93e3e3d
nkzw-tech · Aug 28, 2024 · af61c16 · af61c16
1 parent 3807dd0
commit af61c16
Showing 1 changed file with 37 additions and 34 deletions.
diff --git a/ui/Dialog.tsx b/ui/Dialog.tsx
@@ -18,45 +18,48 @@ export function useDialogNavigation<T>(
   currentState: number,
   setPanel: (panel: T) => void,
 ) {
-  useInput(
-    'navigate',
-    useCallback((event) => event.preventDefault(), []),
-    'dialog',
+  const next = useCallback(
+    (event?: CustomEvent) => {
+      event?.preventDefault();
+      const newState =
+        states && currentState !== -1
+          ? states.at((currentState + 1) % states.length)
+          : null;
+      if (newState) {
+        AudioPlayer.playSound('UI/Next');
+        setPanel(newState);
+      }
+    },
+    [currentState, setPanel, states],
   );
 
-  useInput(
-    'next',
-    useCallback(
-      (event) => {
-        event.preventDefault();
-        const newState =
-          states && currentState !== -1
-            ? states.at((currentState + 1) % states.length)
-            : null;
-        if (newState) {
-          AudioPlayer.playSound('UI/Next');
-          setPanel(newState);
-        }
-      },
-      [currentState, setPanel, states],
-    ),
-    'dialog',
+  const previous = useCallback(
+    (event?: CustomEvent) => {
+      event?.preventDefault();
+      const newState =
+        states && currentState !== -1 ? states.at(currentState - 1) : null;
+      if (newState) {
+        AudioPlayer.playSound('UI/Previous');
+        setPanel(newState);
+      }
+    },
+    [currentState, setPanel, states],
   );
 
+  useInput('next', next, 'dialog');
+  useInput('previous', previous, 'dialog');
   useInput(
-    'previous',
-    useCallback(
-      (event) => {
-        event.preventDefault();
-        const newState =
-          states && currentState !== -1 ? states.at(currentState - 1) : null;
-        if (newState) {
-          AudioPlayer.playSound('UI/Previous');
-          setPanel(newState);
-        }
-      },
-      [currentState, setPanel, states],
-    ),
+    'navigate',
+    (event) => {
+      event.preventDefault();
+
+      const { x } = event.detail;
+      if (x < 0) {
+        previous();
+      } else if (x > 0) {
+        next();
+      }
+    },
     'dialog',
   );
 }