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(interface/radial): more button if there are more than 8 items (#284)

Browse Source
This commit is contained in:
David Malchin
2023-04-02 12:39:33 +03:00
committed by GitHub
parent 7b26478cb2
commit 9f9170eb44
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,8 +52,8 @@ const useStyles = createStyles((theme) => ({
}, },
})); }));
// PAGE_ITEMS + 1 = More... button // includes More... button
const PAGE_ITEMS = 7; const PAGE_ITEMS = 8;
const degToRad = (deg: number) => deg * (Math.PI / 180); const degToRad = (deg: number) => deg * (Math.PI / 180);
@@ -80,10 +80,11 @@ const RadialMenu: React.FC = () => {
}; };
useEffect(() => { useEffect(() => {
if (menu.items.length < PAGE_ITEMS) return setMenuItems(menu.items); if (menu.items.length <= PAGE_ITEMS) return setMenuItems(menu.items);
const items = menu.items.slice(PAGE_ITEMS * (menu.page - 1), PAGE_ITEMS * menu.page); const items = menu.items.slice(PAGE_ITEMS * (menu.page - 1) - (menu.page - 1), PAGE_ITEMS * menu.page - menu.page + 1);
PAGE_ITEMS * menu.page < menu.items.length && if (PAGE_ITEMS * menu.page - menu.page + 1 < menu.items.length) {
items.push({ icon: 'ellipsis-h', label: locale.ui.more, isMore: true }); items[items.length - 1] = { icon: 'ellipsis-h', label: locale.ui.more, isMore: true };
}
setMenuItems(items); setMenuItems(items);
}, [menu.items, menu.page]); }, [menu.items, menu.page]);
@@ -133,7 +134,7 @@ const RadialMenu: React.FC = () => {
transform={`rotate(-${index * pieAngle} 175 175) translate(${sinAngle * gap}, ${cosAngle * gap})`} transform={`rotate(-${index * pieAngle} 175 175) translate(${sinAngle * gap}, ${cosAngle * gap})`}
className={classes.sector} className={classes.sector}
onClick={async () => { onClick={async () => {
const clickIndex = menu.page === 1 ? index : PAGE_ITEMS * (menu.page - 1) + index; const clickIndex = menu.page === 1 ? index : PAGE_ITEMS * (menu.page - 1) - (menu.page - 1) + index;
if (!item.isMore) fetchNui('radialClick', clickIndex); if (!item.isMore) fetchNui('radialClick', clickIndex);
else { else {
await changePage(true); await changePage(true);