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

feat(web/menu): array side scrolling

Browse Source
This commit is contained in:
Luke
2022-07-28 16:40:48 +02:00
committed by Luke
parent 3b9c8c5534
commit 3f33b690e1
3 changed files with 33 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
node_modules/.pnpm-debug.log generated vendored
View File

@@ -1,14 +0,0 @@
{
"0 debug pnpm:scope": {
"selected": 1
},
"1 error pnpm": {
"code": "ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND",
"err": {
"name": "pnpm",
"message": "No package.json (or package.yaml, or package.json5) was found in \"C:\\GTA\\esx-server\\txData\\CFXDefault_6E51DF.base\\resources\\ox_lib\".",
"code": "ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND",
"stack": "pnpm: No package.json (or package.yaml, or package.json5) was found in \"C:\\GTA\\esx-server\\txData\\CFXDefault_6E51DF.base\\resources\\ox_lib\".\n at readProjectManifest (C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:20853:13)\n at async Object.readProjectManifestOnly (C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:20857:28)\n at async readProjectManifestOnly (C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:44022:24)\n at async Object.handler (C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:184457:24)\n at async C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:192593:21\n at async run (C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:192567:34)\n at async runPnpm (C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:192785:5)\n at async C:\\Users\\Luka-PC\\AppData\\Local\\pnpm\\global\\5\\.pnpm\\pnpm@7.5.0\\node_modules\\pnpm\\dist\\pnpm.cjs:192777:7"
}
}
}

5
web/src/features/menu/list/ListItem.tsx
View File

@@ -10,9 +10,10 @@ interface Item {
interface Props {
item: Item;
index: number;
scrollIndex: number;
}
const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index }, ref) => {
const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index, scrollIndex }, ref) => {
return (
<Box
bg="#25262B"
@@ -35,7 +36,7 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index
<Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle">
{item.label}
</Text>
<Text>hello</Text>
<Text>{item.value[scrollIndex]}</Text>
</Stack>
<Spacer />
<FontAwesomeIcon icon="arrows-left-right" fontSize={20} color="#909296" />

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

@@ -41,6 +41,7 @@ const ListMenu: React.FC = () => {
});
const [selected, setSelected] = useState(0);
const [visible, setVisible] = useState(false);
const [indexStates, setIndexStates] = useState<Record<number, number>>({});
const listRefs = useRef<Array<HTMLDivElement | null>>([]);
const moveMenu = (e: React.KeyboardEvent<HTMLDivElement>) => {
@@ -57,6 +58,23 @@ const ListMenu: React.FC = () => {
return selected - 1;
});
break;
case "ArrowRight":
if (!Array.isArray(menu.items[selected].value)) return;
setIndexStates({
...indexStates,
[selected]:
indexStates[selected] + 1 <= menu.items[selected].value.length - 1
? indexStates[selected] + 1
: indexStates[selected],
});
break;
case "ArrowLeft":
if (!Array.isArray(menu.items[selected].value)) return;
setIndexStates({
...indexStates,
[selected]: indexStates[selected] - 1 >= 0 ? indexStates[selected] - 1 : indexStates[selected],
});
break;
}
};
@@ -68,6 +86,11 @@ const ListMenu: React.FC = () => {
if (!data.position) data.position = "top-left";
setMenu(data);
setVisible(true);
let arrayIndexes: { [key: number]: number } = {};
for (let i = 0; i < data.items.length; i++) {
if (Array.isArray(data.items[i].value)) arrayIndexes[i] = 0;
}
setIndexStates(arrayIndexes);
listRefs.current[0]?.focus();
});
@@ -95,7 +118,13 @@ const ListMenu: React.FC = () => {
<FocusTrap active={visible}>
<Stack direction="column" p={2} overflowY="scroll">
{menu.items.map((item, index) => (
<ListItem index={index} item={item} ref={listRefs} key={`menu-item-${index}`} />
<ListItem
index={index}
item={item}
scrollIndex={indexStates[index]}
ref={listRefs}
key={`menu-item-${index}`}
/>
))}
</Stack>
</FocusTrap>