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

fix(web/menu): combine initial select and first render checks (#172)

Browse Source 
* fix(web/menu): Combine initial select and first render

* Combining these checks should fix an issue of having to toggle a checkbox multiple times before it is recognized as being toggled

* Change firstRenderRef current value before first menu movement

* Too many async on change functions are happening let's handle this once the user decides to interact with the menu

* fix(web/menu): remove first render ref check for onSelected

Co-authored-by: Luke <sabolukas03@gmail.com>
This commit is contained in:
Jag
2022-12-14 09:59:49 -08:00
committed by GitHub
parent 944ca2eeee
commit 34022ce81e
1 changed files with 4 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,6 +50,7 @@ const ListMenu: React.FC = () => {
}; };
const moveMenu = (e: React.KeyboardEvent<HTMLDivElement>) => { const moveMenu = (e: React.KeyboardEvent<HTMLDivElement>) => {
if (firstRenderRef.current) firstRenderRef.current = false;
switch (e.code) { switch (e.code) {
case 'ArrowDown': case 'ArrowDown':
setSelected((selected) => { setSelected((selected) => {
@@ -95,11 +96,7 @@ const ListMenu: React.FC = () => {
}; };
useEffect(() => { useEffect(() => {
if (menu.items[selected]?.checked === undefined) return; if (menu.items[selected]?.checked === undefined || firstRenderRef.current) return;
if (firstRenderRef.current) {
firstRenderRef.current = false;
return;
}
const timer = setTimeout(() => { const timer = setTimeout(() => {
fetchNui('changeChecked', [selected, checkedStates[selected]]).catch(); fetchNui('changeChecked', [selected, checkedStates[selected]]).catch();
}, 100); }, 100);
@@ -107,11 +104,7 @@ const ListMenu: React.FC = () => {
}, [checkedStates]); }, [checkedStates]);
useEffect(() => { useEffect(() => {
if (!menu.items[selected]?.values) return; if (!menu.items[selected]?.values || firstRenderRef.current) return;
if (firstRenderRef.current) {
firstRenderRef.current = false;
return;
}
const timer = setTimeout(() => { const timer = setTimeout(() => {
fetchNui('changeIndex', [selected, indexStates[selected]]).catch(); fetchNui('changeIndex', [selected, indexStates[selected]]).catch();
}, 100); }, 100);
@@ -162,6 +155,7 @@ const ListMenu: React.FC = () => {
useNuiEvent('closeMenu', () => closeMenu(true, undefined, true)); useNuiEvent('closeMenu', () => closeMenu(true, undefined, true));
useNuiEvent('setMenu', (data: MenuSettings) => { useNuiEvent('setMenu', (data: MenuSettings) => {
firstRenderRef.current = true;
if (!data.startItemIndex || data.startItemIndex < 0) data.startItemIndex = 0; if (!data.startItemIndex || data.startItemIndex < 0) data.startItemIndex = 0;
else if (data.startItemIndex >= data.items.length) data.startItemIndex = data.items.length - 1; else if (data.startItemIndex >= data.items.length) data.startItemIndex = data.items.length - 1;
setSelected(data.startItemIndex); setSelected(data.startItemIndex);
@@ -178,7 +172,6 @@ const ListMenu: React.FC = () => {
setIndexStates(arrayIndexes); setIndexStates(arrayIndexes);
setCheckedStates(checkedIndexes); setCheckedStates(checkedIndexes);
listRefs.current[data.startItemIndex]?.focus(); listRefs.current[data.startItemIndex]?.focus();
firstRenderRef.current = true;
}); });
return ( return (