mirror of
https://github.com/CommunityOx/ox_lib.git
synced 2026-08-19 16:06:02 +01:00
feat(web/context): allow separate metadata progress bars colors
Closes #430
This commit is contained in:
@@ -12,7 +12,10 @@ interface ContextMenuItem {
|
|||||||
colorScheme?: string;
|
colorScheme?: string;
|
||||||
onSelect?: (args: any) => void;
|
onSelect?: (args: any) => void;
|
||||||
readOnly?: boolean;
|
readOnly?: boolean;
|
||||||
metadata?: string[] | { [key: string]: any } | { label: string; value: any; progress?: number }[];
|
metadata?:
|
||||||
|
| string[]
|
||||||
|
| { [key: string]: any }
|
||||||
|
| { label: string; value: any; progress?: number; colorScheme?: string }[];
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
event?: string;
|
event?: string;
|
||||||
serverEvent?: string;
|
serverEvent?: string;
|
||||||
|
|||||||
@@ -19,11 +19,13 @@ export const debugContext = () => {
|
|||||||
['label']: 'Body',
|
['label']: 'Body',
|
||||||
['value']: '55%',
|
['value']: '55%',
|
||||||
['progress']: 55,
|
['progress']: 55,
|
||||||
|
colorScheme: 'red',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
['label']: 'Engine',
|
['label']: 'Engine',
|
||||||
['value']: '100%',
|
['value']: '100%',
|
||||||
['progress']: 100,
|
['progress']: 100,
|
||||||
|
colorScheme: 'green',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
['label']: 'Oil',
|
['label']: 'Oil',
|
||||||
|
|||||||
@@ -145,14 +145,21 @@ const ContextButton: React.FC<{
|
|||||||
{button.image && <Image src={button.image} />}
|
{button.image && <Image src={button.image} />}
|
||||||
{Array.isArray(button.metadata) ? (
|
{Array.isArray(button.metadata) ? (
|
||||||
button.metadata.map(
|
button.metadata.map(
|
||||||
(metadata: string | { label: string; value?: any; progress?: number }, index: number) => (
|
(
|
||||||
|
metadata: string | { label: string; value?: any; progress?: number; colorScheme?: string },
|
||||||
|
index: number
|
||||||
|
) => (
|
||||||
<>
|
<>
|
||||||
<Text key={`context-metadata-${index}`}>
|
<Text key={`context-metadata-${index}`}>
|
||||||
{typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata?.value ?? ''}`}
|
{typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata?.value ?? ''}`}
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
{typeof metadata === 'object' && metadata.progress !== undefined && (
|
{typeof metadata === 'object' && metadata.progress !== undefined && (
|
||||||
<Progress value={metadata.progress} size="sm" color={button.colorScheme || 'dark.3'} />
|
<Progress
|
||||||
|
value={metadata.progress}
|
||||||
|
size="sm"
|
||||||
|
color={metadata.colorScheme || button.colorScheme || 'dark.3'}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -11,7 +11,10 @@ export interface Option {
|
|||||||
progress?: number;
|
progress?: number;
|
||||||
colorScheme?: string;
|
colorScheme?: string;
|
||||||
readOnly?: boolean;
|
readOnly?: boolean;
|
||||||
metadata?: string[] | { [key: string]: any } | { label: string; value: any; progress?: number }[];
|
metadata?:
|
||||||
|
| string[]
|
||||||
|
| { [key: string]: any }
|
||||||
|
| { label: string; value: any; progress?: number; colorScheme?: string }[];
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
event?: string;
|
event?: string;
|
||||||
serverEvent?: string;
|
serverEvent?: string;
|
||||||
|
|||||||
Reference in New Issue
Block a user