FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 15:36:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(web/menu): add description support on list items

Browse Source
This commit is contained in:
Luke
2022-10-27 10:09:48 +02:00
parent b354e0836c
commit 1127108fcd
5 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package/client/resource/interface/menu.ts
View File

@@ -6,7 +6,7 @@ type ChangeFunction = (selected: number, scrollIndex: number | null, args: any |
interface MenuOptions { interface MenuOptions {
label: string; label: string;
icon?: IconName | [IconPrefix, IconName]; icon?: IconName | [IconPrefix, IconName];
values?: string[]; values?: Array<string | { label: string; description: string }>;
description?: string; description?: string;
defaultIndex?: number; defaultIndex?: number;
args?: any; args?: any;

2
resource/interface/client/menu.lua
View File

@@ -10,7 +10,7 @@ local keepInput = IsNuiFocusKeepingInput()
---@class MenuOptions ---@class MenuOptions
---@field label string ---@field label string
---@field icon? string ---@field icon? string
---@field values? string[] ---@field values? Array<string | { label: string, description: string }>
---@field description? string ---@field description? string
---@field defaultIndex? number ---@field defaultIndex? number
---@field args? any ---@field args? any

6
web/src/features/dev/debug/menu.ts
View File

@@ -17,7 +17,11 @@ export const debugMenu = () => {
}, },
{ {
label: 'Vehicle class', label: 'Vehicle class',
values: ['Nice', 'Super nice', 'Extra nice'], values: [
{ label: 'nice', description: 'description 1' },
{ label: 'even nicer', description: 'description 2' },
'pogchamp',
],
icon: 'tag', icon: 'tag',
description: 'Tooltip description 2', description: 'Tooltip description 2',
}, },

7
web/src/features/menu/list/ListItem.tsx
View File

@@ -38,7 +38,12 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
<Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle"> <Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle">
{item.label} {item.label}
</Text> </Text>
<Text>{item.values[scrollIndex]}</Text> <Text>
{typeof item.values[scrollIndex] === 'object'
? // @ts-ignore for some reason even checking the type TS still thinks it's a string
item.values[scrollIndex].label
: item.values[scrollIndex]}
</Text>
</Stack> </Stack>
<Stack direction="row" spacing="sm" pr={3} justifyContent="center" alignItems="center"> <Stack direction="row" spacing="sm" pr={3} justifyContent="center" alignItems="center">
<FontAwesomeIcon icon="chevron-left" fontSize={16} color="#909296" /> <FontAwesomeIcon icon="chevron-left" fontSize={16} color="#909296" />

9
web/src/features/menu/list/index.tsx
View File

@@ -11,7 +11,7 @@ import React from 'react';
export interface MenuItem { export interface MenuItem {
label: string; label: string;
values?: string[]; values?: Array<string | { label: string; description: string }>;
description?: string; description?: string;
icon?: IconProp; icon?: IconProp;
defaultIndex?: number; defaultIndex?: number;
@@ -147,7 +147,12 @@ const ListMenu: React.FC = () => {
<> <>
{visible && ( {visible && (
<Tooltip <Tooltip
label={menu.items[selected].description} label={
Array.isArray(menu.items[selected].values) && typeof menu.items[selected].values === 'object'
? // @ts-ignore
menu.items[selected].values[indexStates[selected]].description
: menu.items[selected].description
}
isOpen={!!menu.items[selected].description} isOpen={!!menu.items[selected].description}
bg="#25262B" bg="#25262B"
color="#909296" color="#909296"