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

feat(web/context): mouse enter and mouse leave events (#218)

Browse Source 
* feat(web/context): mouse enter and mouse leave events

* chore(web/context): condense into one function for onHover

* feat(resource/context): cache last hovered option
This commit is contained in:
masonschafercodes
2023-02-08 04:05:30 -05:00
committed by GitHub
parent 6fe8f5257f
commit 7a22da68e6
3 changed files with 64 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,10 +8,6 @@ const openMenu = (id: string | undefined) => {
fetchNui<ContextMenuProps>('openContext', { id: id, back: false });
};
const clickContext = (id: string) => {
fetchNui('clickContext', id);
};
const useStyles = createStyles((theme, params: { disabled?: boolean }) => ({
inner: {
justifyContent: 'flex-start',
@@ -51,7 +47,11 @@ const ContextButton: React.FC<{
<HoverCard.Target>
<Button
classNames={{ inner: classes.inner, label: classes.label }}
onClick={() => (!button.disabled ? (button.menu ? openMenu(button.menu) : clickContext(buttonKey)) : null)}
onClick={() =>
!button.disabled ? (button.menu ? openMenu(button.menu) : fetchNui('clickContext', buttonKey)) : null
}
onMouseEnter={() => (!button.disabled ? fetchNui('onHover', { hoverState: true, id: buttonKey }) : null)}
onMouseLeave={() => (!button.disabled ? fetchNui('onHover', { hoverState: false, id: buttonKey }) : null)}
variant="default"
h="fit-content"
p={10}
@@ -90,17 +90,19 @@ 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; progress?: number }, 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'} />
)}
</>
))
{typeof metadata === 'object' && metadata.progress !== undefined && (
<Progress value={metadata.progress} size="sm" color={button.colorScheme || 'dark.3'} />
)}
</>
)
)
) : (
<>
{typeof button.metadata === 'object' &&