feat(nui): Context menu Lua callbacks

web/src/components/features/menu/ContextMenu.tsx

@@ -1,7 +1,7 @@
 import { useNuiEvent } from "../../../hooks/useNuiEvent";
 import { Box, Text, Flex, ScaleFade } from "@chakra-ui/react";
 import { debugData } from "../../../utils/debugData";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ContextMenuProps } from "../../../interfaces";
 import Item from "./Item";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -52,6 +52,24 @@ const ContextMenu: React.FC = () => {
     options: { "": { description: "", metadata: [] } },
   });
 
+  // Hides the context menu on ESC
+  useEffect(() => {
+    if (!visible) return;
+
+    const keyHandler = (e: KeyboardEvent) => {
+      if (["Escape"].includes(e.code)) {
+        setVisible(false);
+        fetchNui("closeContext");
+      }
+    };
+
+    window.addEventListener("keydown", keyHandler);
+
+    return () => window.removeEventListener("keydown", keyHandler);
+  }, [visible]);
+
+  useNuiEvent("hideContext", () => setVisible(false));
+
   useNuiEvent<ContextMenuProps>("showContext", async (data) => {
     if (visible) {
       setVisible(false);

web/src/components/features/menu/Item.tsx

@@ -13,13 +13,18 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Option, ContextMenuProps } from "../../../interfaces";
 import { fetchNui } from "../../../utils/fetchNui";
 
+interface DataProps {
+  event?: string;
+  serverEvent?: string;
+  args?: any;
+}
+
 const openMenu = (id: string | undefined) => {
   fetchNui<ContextMenuProps>("openContext", id);
 };
 
-const clickContext = () => {
-  // todo
-  fetchNui("clickContext");
+const clickContext = (data: DataProps) => {
+  fetchNui("clickContext", data);
 };
 
 const Item: React.FC<{
@@ -49,7 +54,13 @@ const Item: React.FC<{
             <Flex
               w="100%"
               onClick={() =>
-                option[1].menu ? openMenu(option[1].menu) : clickContext()
+                option[1].menu
+                  ? openMenu(option[1].menu)
+                  : clickContext({
+                      event: option[1].event,
+                      serverEvent: option[1].serverEvent,
+                      args: option[1].args,
+                    })
               }
             >
               <Box>

web/src/interfaces/index.tsx

@@ -2,6 +2,9 @@ export interface Option {
   menu?: string;
   description?: string;
   metadata?: string[] | { [key: string]: any };
+  event?: string;
+  serverEvent?: string;
+  args?: any;
 }
 
 export interface Options {