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(web/menu): list menu icon support

Browse Source
This commit is contained in:
Luke
2022-07-29 17:58:13 +02:00
committed by Luke
parent 43ffa86387
commit a43b5eee04
2 changed files with 41 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,10 @@
import { Box, Flex, Stack, Spacer, Text } from "@chakra-ui/react"; import { Box, Flex, Stack, Spacer, Text, IconProps } from "@chakra-ui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { forwardRef } from "react"; import { forwardRef } from "react";
import type { MenuItem } from "./index";
interface Item {
label: string;
value: string | string[];
}
interface Props { interface Props {
item: Item; item: MenuItem;
index: number; index: number;
scrollIndex: number; scrollIndex: number;
} }
@@ -30,25 +26,34 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
return (ref.current = [...ref.current, element]); return (ref.current = [...ref.current, element]);
}} }}
> >
{Array.isArray(item.value) ? ( <Flex alignItems="center" height="100%">
<Flex justifyContent="center" alignItems="center"> {item.icon && (
<Stack spacing={1}> <FontAwesomeIcon
<Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle"> icon={item.icon}
{item.label} fontSize={24}
</Text> color="#909296"
<Text>{item.value[scrollIndex]}</Text> fixedWidth
</Stack> style={{ marginRight: 20, marginLeft: 5 }}
<Spacer /> />
<Stack direction="row" spacing="sm" mr={3}> )}
<FontAwesomeIcon icon="chevron-left" fontSize={16} color="#909296" /> {Array.isArray(item.value) ? (
<FontAwesomeIcon icon="chevron-right" fontSize={16} color="#909296" /> <Flex justifyContent="center" alignItems="center" width="100%">
</Stack> <Stack spacing={1}>
</Flex> <Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle">
) : ( {item.label}
<Flex alignItems="center" height="100%"> </Text>
<Text>{item.value[scrollIndex]}</Text>
</Stack>
<Spacer />
<Stack direction="row" spacing="sm" mr={3}>
<FontAwesomeIcon icon="chevron-left" fontSize={16} color="#909296" />
<FontAwesomeIcon icon="chevron-right" fontSize={16} color="#909296" />
</Stack>
</Flex>
) : (
<Text>{item.label}</Text> <Text>{item.label}</Text>
</Flex> )}
)} </Flex>
</Box> </Box>
); );
}); });

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

@@ -5,11 +5,18 @@ import { debugData } from "../../../utils/debugData";
import ListItem from "./ListItem"; import ListItem from "./ListItem";
import Header from "./Header"; import Header from "./Header";
import FocusTrap from "focus-trap-react"; import FocusTrap from "focus-trap-react";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
export interface MenuItem {
label: string;
value: string | string[];
icon?: IconProp;
}
interface MenuSettings { interface MenuSettings {
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"; position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
title: string; title: string;
items: Array<{ label: string; value: string | string[] }>; items: Array<MenuItem>;
} }
debugData<MenuSettings>([ debugData<MenuSettings>([
@@ -19,9 +26,9 @@ debugData<MenuSettings>([
// position: "bottom-left", // position: "bottom-left",
title: "Vehicle garage", title: "Vehicle garage",
items: [ items: [
{ label: "Option 1", value: "option1" }, { label: "Option 1", value: "option1", icon: "heart" },
{ label: "Option 2", value: "option2" }, { label: "Option 2", value: "option2", icon: "basket-shopping" },
{ label: "Vehicle class", value: ["Nice", "Super nice", "Extra nice"] }, { label: "Vehicle class", value: ["Nice", "Super nice", "Extra nice"], icon: "tag" },
{ label: "Option 1", value: "option1" }, { label: "Option 1", value: "option1" },
{ label: "Option 2", value: "option2" }, { label: "Option 2", value: "option2" },
{ label: "Vehicle class", value: ["Nice", "Super nice", "Extra nice"] }, { label: "Vehicle class", value: ["Nice", "Super nice", "Extra nice"] },