FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 06:56:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(web/progress): progress bar in context menu's metadata (#217)

Browse Source 
* feature: progress bar in context menu's metadata

* undefined check `metadata.progress`
This commit is contained in:
Marcel
2023-02-06 15:42:19 +01:00
committed by GitHub
parent be99e16e34
commit 4a9137ad04
3 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/features/dev/debug/context.ts
View File

@@ -9,6 +9,32 @@ export const debugContext = () => {
title: 'Vehicle garage',
options: [
{ title: 'Empty button' },
{
title: 'Karin Kuruma',
image: 'https://cdn.discordapp.com/attachments/1063098499027173461/1064276343585505330/screenshot.jpg',
arrow: true,
colorScheme: 'blue',
metadata: [
{
["label"]: "Body",
["value"]: "55%",
["progress"]: 55
},
{
["label"]: "Engine",
["value"]: "100%",
["progress"]: 100
},
{
["label"]: "Oil",
["progress"]: 11
},
{
["label"]: "Fuel",
["progress"]: 87
},
],
},
{
title: 'Example button',
description: 'Example button description',

14
web/src/features/menu/context/components/ContextButton.tsx
View File

@@ -90,10 +90,16 @@ const ContextButton: React.FC<{
<HoverCard.Dropdown className={classes.dropdown}>
{button.image && <Image src={button.image} />}
{Array.isArray(button.metadata) ? (
button.metadata.map((metadata: string | { label: string; value: any }, index: number) => (
<Text key={`context-metadata-${index}`}>
{typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata.value}`}
</Text>
button.metadata.map((metadata: string | { label: string; value?: any; progress?: number }, index: number) => (
<>
<Text key={`context-metadata-${index}`}>
{typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata?.value ?? ""}`}
</Text>
{typeof metadata === 'object' && metadata.progress !== undefined && (
<Progress value={metadata.progress} size="sm" color={button.colorScheme || 'dark.3'} />
)}
</>
))
) : (
<>

2
web/src/interfaces/context.ts
View File

@@ -10,7 +10,7 @@ export interface Option {
iconColor?: string;
progress?: number;
colorScheme?: string;
metadata?: string[] | { [key: string]: any } | { label: string; value: any }[];
metadata?: string[] | { [key: string]: any } | { label: string; value: any; progress: number; }[];
disabled?: boolean;
event?: string;
serverEvent?: string;