feat(client): nested custom context buttons (#1266)

client.lua

@@ -1157,7 +1157,7 @@ RegisterNetEvent('ox_inventory:setPlayerInventory', function(currentDrops, inven
 
  if buttons then
  for i = 1, #v.buttons do
- buttons[i] = v.buttons[i].label
+ buttons[i] = {label = v.buttons[i].label, group = v.buttons[i].group}
  end
  end
 

data/items.lua

@@ -26,6 +26,27 @@ return {
  action = function(slot)
  print('You squeezed the burger :(')
  end
+ },
+ {
+ label = 'What do you call a vegan burger?',
+ group = 'Hamburger Puns',
+ action = function(slot)
+ print('A misteak.')
+ end
+ },
+ {
+ label = 'What do frogs like to eat with their hamburgers?',
+ group = 'Hamburger Puns',
+ action = function(slot)
+ print('French flies.')
+ end
+ },
+ {
+ label = 'Why were the burger and fries running?',
+ group = 'Hamburger Puns',
+ action = function(slot)
+ print('Because they\'re fast food.')
+ end
  }
  },
  consume = 0.3

modules/items/shared.lua

@@ -10,7 +10,7 @@
 ---@field stack? boolean Set to false to prevent the item from stacking.
 ---@field close? boolean Set to false to keep the inventory open on item use.
 ---@field allowArmed? boolean Set to true to allow an item to be used while a weapon is equipped.
----@field buttons? { label: string, action: fun(slot: number) }[] Add interactions when right-clicking an item.
+---@field buttons? { label: string, group: string, action: fun(slot: number) }[] Add interactions when right-clicking an item.
 ---@field [string] any
 
 ---@class OxClientProps

web/src/components/inventory/InventoryContext.tsx

@@ -20,6 +20,23 @@ interface DataProps {
  id?: number;
 }
 
+interface Button {
+ label: string;
+ index: number;
+ group?: string;
+}
+
+interface Group {
+ groupName: string | null;
+ buttons: ButtonWithIndex[];
+}
+
+interface ButtonWithIndex extends Button {
+ index: number;
+}
+
+interface GroupedButtons extends Array<Group> {}
+
 const InventoryContext: React.FC = () => {
  const contextMenu = useAppSelector((state) => state.inventory.contextMenu);
  const item = contextMenu.item;
@@ -55,6 +72,28 @@ const InventoryContext: React.FC = () => {
  }
  };
 
+ const groupButtons = (buttons: any): GroupedButtons => {
+ return buttons.reduce((groups: Group[], button: Button, index: number) => {
+ if (button.group) {
+ const groupIndex = groups.findIndex((group) => group.groupName === button.group);
+ if (groupIndex !== -1) {
+ groups[groupIndex].buttons.push({ ...button, index });
+ } else {
+ groups.push({
+ groupName: button.group,
+ buttons: [{ ...button, index }],
+ });
+ }
+ } else {
+ groups.push({
+ groupName: null,
+ buttons: [{ ...button, index }],
+ });
+ }
+ return groups;
+ }, []);
+ }
+
  return (
  <>
  <Menu
@@ -98,10 +137,24 @@ const InventoryContext: React.FC = () => {
  <>
  {item &&
  item.name &&
- Items[item.name]?.buttons?.map((label: string, index: number) => (
- <MenuItem key={index} onClick={() => handleClick({ action: 'custom', id: index })}>
- {label}
- </MenuItem>
+ groupButtons(Items[item.name]?.buttons).map((group: Group, index: number) => (
+ <div key={index}>
+ {group.groupName ? (
+ <NestedMenuItem parentMenuOpen={!!contextMenu} label={group.groupName}>
+ {group.buttons.map((button: Button) => (
+ <MenuItem key={button.index} onClick={() => handleClick({ action: 'custom', id: button.index })}>
+ {button.label}
+ </MenuItem>
+ ))}
+ </NestedMenuItem>
+ ) : (
+ group.buttons.map((button: Button) => (
+ <MenuItem key={button.index} onClick={() => handleClick({ action: 'custom', id: button.index })}>
+ {button.label}
+ </MenuItem>
+ ))
+ )}
+ </div>
  ))}
  </>
  )}