Clean up menu

dtun · Aug 12, 2024 · 96daf91 · 96daf91
1 parent 142b9da
commit 96daf91
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 40 deletions.
diff --git a/components/MyMenuEdit.spec.tsx b/components/MyMenuEdit.spec.tsx
@@ -1,21 +1,14 @@
 import { menuData } from "@/data";
 import { render, screen, userEvent, fireEvent } from "@/test-utils";
 
-import {
-  MyMenuEdit,
-  toggleAction,
-  upAction,
-  downAction,
-  topAction,
-  bottomAction,
-} from "./MyMenuEdit";
+import { MyMenuEdit } from "./MyMenuEdit";
 
 // Events
-let toggleEvent = { actionName: toggleAction.name };
-let upEvent = { actionName: upAction.name };
-let downEvent = { actionName: downAction.name };
-let topEvent = { actionName: topAction.name };
-let bottomEvent = { actionName: bottomAction.name };
+let toggleEvent = { actionName: "activate" };
+let upEvent = { actionName: "up" };
+let downEvent = { actionName: "down" };
+let topEvent = { actionName: "top" };
+let bottomEvent = { actionName: "bottom" };
 // Spies
 let toggleMenuItem = jest.fn();
 let setMenuData = jest.fn();

diff --git a/components/MyMenuEdit.tsx b/components/MyMenuEdit.tsx
@@ -10,11 +10,11 @@ import type { AccessibilityActionEvent } from "react-native";
 import type { RenderItemParams } from "react-native-draggable-flatlist";
 import type { Direction, MenuItem, MenuData, Position } from "@/types";
 
-export let toggleAction = { name: "activate", label: "Toggle checked state" };
-export let upAction = { name: "moveUp", label: "Move item up" };
-export let downAction = { name: "moveDown", label: "Move item down" };
-export let topAction = { name: "moveTop", label: "Move item to top" };
-export let bottomAction = { name: "moveBottom", label: "Move item to bottom" };
+let toggleAction = { name: "activate", label: "Toggle checked state" };
+let upAction = { name: "up", label: "Move item up" };
+let downAction = { name: "down", label: "Move item down" };
+let topAction = { name: "top", label: "Move item to top" };
+let bottomAction = { name: "bottom", label: "Move item to bottom" };
 
 export function MyMenuEdit({
   menuData,
@@ -60,28 +60,10 @@ function RenderMenuItem({
   moveMenuItem: (id: string, direction: Direction | Position) => void;
 }) {
   let { isFirst, isLast } = getItemData(id, menuData);
-  let onAccessibilityAction = useEvent(function (e: AccessibilityActionEvent) {
-    let {
-      nativeEvent: { actionName },
-    } = e;
-
-    switch (actionName) {
-      case toggleAction.name:
-        toggleMenuItem(id);
-        break;
-      case upAction.name:
-        moveMenuItem(id, "up");
-        break;
-      case downAction.name:
-        moveMenuItem(id, "down");
-        break;
-      case topAction.name:
-        moveMenuItem(id, "top");
-        break;
-      case bottomAction.name:
-        moveMenuItem(id, "bottom");
-        break;
-    }
+  let onAccessibilityAction = useOnAccessibilityAction({
+    id,
+    moveMenuItem,
+    toggleMenuItem,
   });
 
   return (
@@ -123,6 +105,38 @@ function RenderMenuItem({
   );
 }
 
+function useOnAccessibilityAction({
+  id,
+  moveMenuItem,
+  toggleMenuItem,
+}: {
+  id: string;
+  moveMenuItem: (id: string, direction: Direction | Position) => void;
+  toggleMenuItem: (id: string) => void;
+}) {
+  return useEvent(function (e: AccessibilityActionEvent) {
+    let actionName = e.nativeEvent.actionName;
+
+    switch (actionName) {
+      case toggleAction.name:
+        toggleMenuItem(id);
+        break;
+      case upAction.name:
+        moveMenuItem(id, "up");
+        break;
+      case downAction.name:
+        moveMenuItem(id, "down");
+        break;
+      case topAction.name:
+        moveMenuItem(id, "top");
+        break;
+      case bottomAction.name:
+        moveMenuItem(id, "bottom");
+        break;
+    }
+  });
+}
+
 function ItemSeparatorComponent() {
   return (
     <View style={styles.separatorContainer}>