FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 15:06: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 { forwardRef } from "react";
interface Item {
label: string;
value: string | string[];
}
import type { MenuItem } from "./index";
interface Props {
item: Item;
item: MenuItem;
index: number;
scrollIndex: number;
}
@@ -30,25 +26,34 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
return (ref.current = [...ref.current, element]);
}}
>
{Array.isArray(item.value) ? (
<Flex justifyContent="center" alignItems="center">
<Stack spacing={1}>
<Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle">
{item.label}
</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>
) : (
<Flex alignItems="center" height="100%">
<Flex alignItems="center" height="100%">
{item.icon && (
<FontAwesomeIcon
icon={item.icon}
fontSize={24}
color="#909296"
fixedWidth
style={{ marginRight: 20, marginLeft: 5 }}
/>
)}
{Array.isArray(item.value) ? (
<Flex justifyContent="center" alignItems="center" width="100%">
<Stack spacing={1}>
<Text color="#909296" textTransform="uppercase" fontSize={12} verticalAlign="middle">
{item.label}
</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>
</Flex>
)}
)}
</Flex>
</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 Header from "./Header";
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 {
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
title: string;
items: Array<{ label: string; value: string | string[] }>;
items: Array<MenuItem>;
}
debugData<MenuSettings>([
@@ -19,9 +26,9 @@ debugData<MenuSettings>([
// position: "bottom-left",
title: "Vehicle garage",
items: [
{ label: "Option 1", value: "option1" },
{ label: "Option 2", value: "option2" },
{ label: "Vehicle class", value: ["Nice", "Super nice", "Extra nice"] },
{ label: "Option 1", value: "option1", icon: "heart" },
{ label: "Option 2", value: "option2", icon: "basket-shopping" },
{ label: "Vehicle class", value: ["Nice", "Super nice", "Extra nice"], icon: "tag" },
{ label: "Option 1", value: "option1" },
{ label: "Option 2", value: "option2" },
{ label: "Vehicle class", value: ["Nice", "Super nice", "Extra nice"] },