From 306b7b367040d50272a6ce76cf07e91316b14e57 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Sun, 6 Nov 2022 11:01:39 +0100
Subject: [PATCH] feat(web/context): disabled buttons

---
 package/client/resource/interface/context.ts  |  1 +
 resource/interface/client/context.lua         |  1 +
 web/src/features/dev/debug/context.ts         |  1 +
 web/src/features/menu/context/ContextMenu.tsx |  2 +-
 web/src/features/menu/context/Item.tsx        | 16 ++++++++++------
 web/src/interfaces/context.ts                 |  1 +
 6 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/package/client/resource/interface/context.ts b/package/client/resource/interface/context.ts
index 2f2a860..0a00054 100644
--- a/package/client/resource/interface/context.ts
+++ b/package/client/resource/interface/context.ts
@@ -9,6 +9,7 @@ interface ContextMenuItem {
   arrow?: boolean;
   description?: string;
   metadata?: string | { [key: string]: any } | string[];
+  disabled?: boolean;
   event?: string;
   serverEvent?: string;
   args?: any;
diff --git a/resource/interface/client/context.lua b/resource/interface/client/context.lua
index 54ff347..db87649 100644
--- a/resource/interface/client/context.lua
+++ b/resource/interface/client/context.lua
@@ -10,6 +10,7 @@ local openContextMenu = nil
 ---@field arrow? boolean
 ---@field description? string
 ---@field metadata? string | { [string]: any } | string[]
+---@field disabled? boolean
 ---@field event? string
 ---@field serverEvent? string
 ---@field args? any
diff --git a/web/src/features/dev/debug/context.ts b/web/src/features/dev/debug/context.ts
index ca3585b..a10901d 100644
--- a/web/src/features/dev/debug/context.ts
+++ b/web/src/features/dev/debug/context.ts
@@ -15,6 +15,7 @@ export const debugContext = () => {
             icon: 'inbox',
             image: 'https://i.imgur.com/YAe7k17.jpeg',
             metadata: [{ label: 'Value 1', value: 300 }],
+            disabled: true,
           },
           {
             title: 'Menu button',
diff --git a/web/src/features/menu/context/ContextMenu.tsx b/web/src/features/menu/context/ContextMenu.tsx
index da8f0f4..71819ee 100644
--- a/web/src/features/menu/context/ContextMenu.tsx
+++ b/web/src/features/menu/context/ContextMenu.tsx
@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { fetchNui } from '../../../utils/fetchNui';
 
 const openMenu = (id: string | undefined) => {
-  fetchNui<ContextMenuProps>('openContext', {id: id, back: true});
+  fetchNui<ContextMenuProps>('openContext', { id: id, back: true });
 };
 
 const ContextMenu: React.FC = () => {
diff --git a/web/src/features/menu/context/Item.tsx b/web/src/features/menu/context/Item.tsx
index dc4d0b4..401e47f 100644
--- a/web/src/features/menu/context/Item.tsx
+++ b/web/src/features/menu/context/Item.tsx
@@ -34,7 +34,7 @@ const Item: React.FC<{
       <Popover placement="right-start" trigger="hover" eventListeners={{ scroll: true }} isLazy>
         <PopoverTrigger>
           <Box
-            bg="gray.800"
+            bg={button.disabled ? 'gray.600' : 'gray.800'}
             borderRadius="md"
             h="fit-content"
             w="100%"
@@ -43,12 +43,16 @@ const Item: React.FC<{
             fontFamily="Poppins"
             fontSize="md"
             transition="300ms"
-            _hover={{ bg: 'gray.700' }}
+            _hover={{ bg: !button.disabled && 'gray.700' }}
+            cursor={(button.disabled && 'not-allowed') || undefined}
           >
             <Flex
               w="100%"
               alignItems="center"
-              onClick={() => (button.menu ? openMenu(button.menu) : clickContext(buttonKey))}
+              color={button.disabled ? '#718096' : undefined}
+              onClick={() =>
+                !button.disabled ? (button.menu ? openMenu(button.menu) : clickContext(buttonKey)) : null
+              }
             >
               {button?.icon && (
                 <FontAwesomeIcon
@@ -64,12 +68,12 @@ const Item: React.FC<{
               )}
               <Box>
                 <Box paddingBottom={button.description ? 1 : 0}>
-                  <Text w="100%" fontWeight="medium">
+                  <Text w="100%" fontWeight="medium" color={button.disabled ? '#718096' : undefined}>
                     {button.title ? button.title : buttonKey}
                   </Text>
                 </Box>
                 {button.description && (
-                  <Box paddingBottom={1}>
+                  <Box paddingBottom={1} color={button.disabled ? '#718096' : undefined}>
                     <Text>{button.description}</Text>
                   </Box>
                 )}
@@ -84,7 +88,7 @@ const Item: React.FC<{
               )}
             </Flex>
             <Portal>
-              {(button.metadata || button.image) && (
+              {!button.disabled && (button.metadata || button.image) && (
                 <PopoverContent
                   fontFamily="Poppins"
                   bg="gray.800"
diff --git a/web/src/interfaces/context.ts b/web/src/interfaces/context.ts
index 4dc9d28..4b0b2f3 100644
--- a/web/src/interfaces/context.ts
+++ b/web/src/interfaces/context.ts
@@ -9,6 +9,7 @@ export interface Option {
   icon?: IconProp;
   iconColor?: string;
   metadata?: string[] | { [key: string]: any } | { label: string; value: any }[];
+  disabled?: boolean;
   event?: string;
   serverEvent?: string;
   args?: any;