diff --git a/components/MyMenuEdit.spec.tsx b/components/MyMenuEdit.spec.tsx index ae62617..87007a7 100644 --- 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 index 70adbcd..5a2a829 100644 --- 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 (