feat(nui): Context menu Lua callbacks

resource/interface/context/client.lua

@@ -0,0 +1,42 @@
+local contextMenus = {}
+
+local function showContext(id)
+    local data = contextMenus[id]
+    SetNuiFocus(true, true)
+    SendNUIMessage({
+        action = 'showContext',
+        data = {
+            title = data.title,
+            menu = data.menu,
+            options = data.options
+        }
+    })
+end
+
+local function registerContext(context)
+    for k, v in pairs(context) do
+        if type(k) == 'number' then
+            contextMenus[v.id] = v
+        else
+            contextMenus[context.id] = context
+            break
+        end
+    end
+end
+
+RegisterNUICallback('openContext', function(id)
+    showContext(id)
+end)
+
+RegisterNUICallback('clickContext', function(data)
+    if data.event then TriggerEvent(data.event, data.args) end
+    if data.serverEvent then TriggerServerEvent(data.serverEvent, data.args) end
+    SetNuiFocus(false, false)
+    SendNUIMessage({
+        action = 'hideContext'
+    })
+end)
+
+RegisterNUICallback('closeContext', function()
+    SetNuiFocus(false, false)
+end)

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 = () => {
+const clickContext = (data: DataProps) => {
-  // todo
+  fetchNui("clickContext", data);
-  fetchNui("clickContext");
 };
 
 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 {