From 3f33b690e1ddbeeaacd8ed4df90406fece8e2278 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Thu, 28 Jul 2022 16:40:48 +0200
Subject: [PATCH] feat(web/menu): array side scrolling

---
 node_modules/.pnpm-debug.log            | 14 -----------
 web/src/features/menu/list/ListItem.tsx |  5 ++--
 web/src/features/menu/list/index.tsx    | 31 ++++++++++++++++++++++++-
 3 files changed, 33 insertions(+), 17 deletions(-)
 delete mode 100644 node_modules/.pnpm-debug.log

diff --git a/node_modules/.pnpm-debug.log b/node_modules/.pnpm-debug.log
deleted file mode 100644
index 72d70d2..0000000
--- a/node_modules/.pnpm-debug.log
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "0 debug pnpm:scope": {
-    "selected": 1
-  },
-  "1 error pnpm": {
-    "code": "ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND",
-    "err": {
-      "name": "pnpm",
-      "message": "No package.json (or package.yaml, or package.json5) was found in \"C:\\GTA\\esx-server\\txData\\CFXDefault_6E51DF.base\\resources\\ox_lib\".",
-      "code": "ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND",
-      "stack": "pnpm: No package.json (or package.yaml, or package.json5) was found in \"C:\\GTA\\esx-server\\txData\\CFXDefault_6E51DF.base\\resources\\ox_lib\".\n    at readProjectManifest (C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:20853:13)\n    at async Object.readProjectManifestOnly (C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:20857:28)\n    at async readProjectManifestOnly (C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:44022:24)\n    at async Object.handler (C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:184457:24)\n    at async C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:192593:21\n    at async run (C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:192567:34)\n    at async runPnpm (C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:192785:5)\n    at async C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:192777:7"
-    }
-  }
-}
\ No newline at end of file
diff --git a/web/src/features/menu/list/ListItem.tsx b/web/src/features/menu/list/ListItem.tsx
index 7e0ba54..0aac88d 100644
--- a/web/src/features/menu/list/ListItem.tsx
+++ b/web/src/features/menu/list/ListItem.tsx
@@ -10,9 +10,10 @@ interface Item {
 interface Props {
   item: Item;
   index: number;
+  scrollIndex: number;
 }
 
-const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index }, ref) => {
+const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index, scrollIndex }, ref) => {
   return (
     <Box
       bg="#25262B"
@@ -35,7 +36,7 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index
             <Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle">
               {item.label}
             </Text>
-            <Text>hello</Text>
+            <Text>{item.value[scrollIndex]}</Text>
           </Stack>
           <Spacer />
           <FontAwesomeIcon icon="arrows-left-right" fontSize={20} color="#909296" />
diff --git a/web/src/features/menu/list/index.tsx b/web/src/features/menu/list/index.tsx
index e113fe9..c2b6004 100644
--- a/web/src/features/menu/list/index.tsx
+++ b/web/src/features/menu/list/index.tsx
@@ -41,6 +41,7 @@ const ListMenu: React.FC = () => {
   });
   const [selected, setSelected] = useState(0);
   const [visible, setVisible] = useState(false);
+  const [indexStates, setIndexStates] = useState<Record<number, number>>({});
   const listRefs = useRef<Array<HTMLDivElement | null>>([]);
 
   const moveMenu = (e: React.KeyboardEvent<HTMLDivElement>) => {
@@ -57,6 +58,23 @@ const ListMenu: React.FC = () => {
           return selected - 1;
         });
         break;
+      case "ArrowRight":
+        if (!Array.isArray(menu.items[selected].value)) return;
+        setIndexStates({
+          ...indexStates,
+          [selected]:
+            indexStates[selected] + 1 <= menu.items[selected].value.length - 1
+              ? indexStates[selected] + 1
+              : indexStates[selected],
+        });
+        break;
+      case "ArrowLeft":
+        if (!Array.isArray(menu.items[selected].value)) return;
+        setIndexStates({
+          ...indexStates,
+          [selected]: indexStates[selected] - 1 >= 0 ? indexStates[selected] - 1 : indexStates[selected],
+        });
+        break;
     }
   };
 
@@ -68,6 +86,11 @@ const ListMenu: React.FC = () => {
     if (!data.position) data.position = "top-left";
     setMenu(data);
     setVisible(true);
+    let arrayIndexes: { [key: number]: number } = {};
+    for (let i = 0; i < data.items.length; i++) {
+      if (Array.isArray(data.items[i].value)) arrayIndexes[i] = 0;
+    }
+    setIndexStates(arrayIndexes);
     listRefs.current[0]?.focus();
   });
 
@@ -95,7 +118,13 @@ const ListMenu: React.FC = () => {
         <FocusTrap active={visible}>
           <Stack direction="column" p={2} overflowY="scroll">
             {menu.items.map((item, index) => (
-              <ListItem index={index} item={item} ref={listRefs} key={`menu-item-${index}`} />
+              <ListItem
+                index={index}
+                item={item}
+                scrollIndex={indexStates[index]}
+                ref={listRefs}
+                key={`menu-item-${index}`}
+              />
             ))}
           </Stack>
         </FocusTrap>