From 9f9170eb44cf7bc30a647c5aa8ec63d7023be0de Mon Sep 17 00:00:00 2001 From: David Malchin Date: Sun, 2 Apr 2023 12:39:33 +0300 Subject: [PATCH] feat(interface/radial): more button if there are more than 8 items (#284) --- web/src/features/menu/radial/index.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/web/src/features/menu/radial/index.tsx b/web/src/features/menu/radial/index.tsx index 540bd75..5837658 100644 --- a/web/src/features/menu/radial/index.tsx +++ b/web/src/features/menu/radial/index.tsx @@ -52,8 +52,8 @@ const useStyles = createStyles((theme) => ({ }, })); -// PAGE_ITEMS + 1 = More... button -const PAGE_ITEMS = 7; +// includes More... button +const PAGE_ITEMS = 8; const degToRad = (deg: number) => deg * (Math.PI / 180); @@ -80,10 +80,11 @@ const RadialMenu: React.FC = () => { }; useEffect(() => { - if (menu.items.length < PAGE_ITEMS) return setMenuItems(menu.items); - const items = menu.items.slice(PAGE_ITEMS * (menu.page - 1), PAGE_ITEMS * menu.page); - PAGE_ITEMS * menu.page < menu.items.length && - items.push({ icon: 'ellipsis-h', label: locale.ui.more, isMore: true }); + if (menu.items.length <= PAGE_ITEMS) return setMenuItems(menu.items); + const items = menu.items.slice(PAGE_ITEMS * (menu.page - 1) - (menu.page - 1), PAGE_ITEMS * menu.page - menu.page + 1); + if (PAGE_ITEMS * menu.page - menu.page + 1 < menu.items.length) { + items[items.length - 1] = { icon: 'ellipsis-h', label: locale.ui.more, isMore: true }; + } setMenuItems(items); }, [menu.items, menu.page]); @@ -133,7 +134,7 @@ const RadialMenu: React.FC = () => { transform={`rotate(-${index * pieAngle} 175 175) translate(${sinAngle * gap}, ${cosAngle * gap})`} className={classes.sector} 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); else { await changePage(true);