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

refactor(menu): split side and vertical scroll change handlers

Browse Source 
Resolves an issue where changing to the next button while scrolling a horizontal list would not trigger the onChange function for the previous button
This commit is contained in:
Luke
2022-08-04 13:12:58 +02:00
committed by Luke
parent c662368cd4
commit cf2c45687a
2 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/features/menu/list/index.tsx
View File

@@ -8,6 +8,7 @@ import FocusTrap from "focus-trap-react";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { fetchNui } from "../../../utils/fetchNui";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";
export interface MenuItem {
label: string;
@@ -106,15 +107,20 @@ const ListMenu: React.FC = () => {
break;
case "Enter":
if (!menu.items[selected]) return;
fetchNui(
"confirmSelected",
Array.isArray(menu.items[selected].values) ? [selected, indexStates[selected]] : selected
);
fetchNui("confirmSelected", [selected, indexStates[selected]]).catch();
if (menu.items[selected].close === undefined || menu.items[selected].close) setVisible(false);
break;
}
};
useEffect(() => {
if (!menu.items[selected]?.values) return;
const timer = setTimeout(() => {
fetchNui("changeIndex", [selected, indexStates[selected]]).catch();
}, 100);
return () => clearTimeout(timer);
}, [indexStates]);
useEffect(() => {
if (!menu.items[selected]) return;
listRefs.current[selected]?.scrollIntoView({
@@ -124,13 +130,10 @@ const ListMenu: React.FC = () => {
listRefs.current[selected]?.focus({ preventScroll: true });
// debounces the callback to avoid spam
const timer = setTimeout(() => {
fetchNui(
"changeSelected",
Array.isArray(menu.items[selected].values) ? [selected, indexStates[selected]] : selected
);
}, 500);
fetchNui("changeSelected", [selected, indexStates[selected]]).catch();
}, 100);
return () => clearTimeout(timer);
}, [selected, menu, indexStates]);
}, [selected, menu]);
useEffect(() => {
if (!visible) return;
@@ -197,17 +200,11 @@ const ListMenu: React.FC = () => {
<FocusTrap active={visible}>
<Stack direction="column" p={2} overflowY="scroll">
{menu.items.map((item, index) => (
<>
<React.Fragment key={`menu-item-${index}`}>
{item.label && (
<ListItem
index={index}
item={item}
scrollIndex={indexStates[index]}
ref={listRefs}
key={`menu-item-${index}`}
/>
<ListItem index={index} item={item} scrollIndex={indexStates[index]} ref={listRefs} />
)}
</>
</React.Fragment>
))}
</Stack>
</FocusTrap>