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): support icon urls in radial menu (#487)

Browse Source 
* feat(package): support icon urls in radial menu

* fix: update lua & ts types + clamp size parameters
This commit is contained in:
ktx-mega
2024-02-18 12:11:40 +01:00
committed by GitHub
parent bd6183aa04
commit 78891fb4b9
5 changed files with 27 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/features/menu/radial/index.tsx
View File

@@ -1,7 +1,9 @@
import { Box, createStyles } from '@mantine/core';
import { useEffect, useState } from 'react';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { useNuiEvent } from '../../../hooks/useNuiEvent';
import { fetchNui } from '../../../utils/fetchNui';
import { isIconUrl } from '../../../utils/isIconUrl';
import ScaleFade from '../../../transitions/ScaleFade';
import type { RadialMenuItem } from '../../../typings';
import { useLocales } from '../../../providers/LocaleProvider';
@@ -132,6 +134,9 @@ const RadialMenu: React.FC = () => {
const cosAngle = Math.cos(angle);
const iconX = 175 + sinAngle * radius;
const iconY = 175 + cosAngle * radius;
const iconWidth = Math.min(Math.max(item.iconWidth || 50, 0), 100);
const iconHeight = Math.min(Math.max(item.iconHeight || 50, 0), 100);
return (
<>
@@ -153,7 +158,17 @@ const RadialMenu: React.FC = () => {
}, ${175 + (175 - gap) * Math.sin(-degToRad(pieAngle))} z`}
/>
<g transform={`rotate(${index * pieAngle - 90} ${iconX} ${iconY})`} pointerEvents="none">
<LibIcon x={iconX - 12.5} y={iconY - 17.5} icon={item.icon} width={25} height={25} fixedWidth />
{typeof item.icon === 'string' && isIconUrl(item.icon) ? (
<image
href={item.icon}
width={iconWidth}
height={iconHeight}
x={iconX - iconWidth / 2}
y={iconY - iconHeight / 2 - iconHeight / 4}
/>
) : (
<LibIcon x={iconX - 12.5} y={iconY - 17.5} icon={item.icon as IconProp} width={25} height={25} fixedWidth/>
)}
<text
x={iconX}
y={iconY + (item.label.includes(' \n') ? 7 : 25)}