summaryrefslogtreecommitdiff
path: root/components/Tweaks/Visual/ColorMenu.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2022-01-03 17:21:18 +0100
committerGitHub <[email protected]>2022-01-03 17:21:18 +0100
commitdad03e3be5b0a7c1159e0207cce11540ca830359 (patch)
tree4ae4e0a40c578e12b6d4f11a3f785c8190865f8b /components/Tweaks/Visual/ColorMenu.tsx
parent9ed0c5705a302a91fab2b8bcc777a12dcf9b3682 (diff)
feat(filter): add option to filter by subdirectory (#190)
Diffstat (limited to 'components/Tweaks/Visual/ColorMenu.tsx')
-rw-r--r--components/Tweaks/Visual/ColorMenu.tsx88
1 files changed, 88 insertions, 0 deletions
diff --git a/components/Tweaks/Visual/ColorMenu.tsx b/components/Tweaks/Visual/ColorMenu.tsx
new file mode 100644
index 0000000..a792f12
--- /dev/null
+++ b/components/Tweaks/Visual/ColorMenu.tsx
@@ -0,0 +1,88 @@
+import { ChevronDownIcon } from '@chakra-ui/icons'
+import {
+ Text,
+ Box,
+ Button,
+ Flex,
+ Menu,
+ MenuButton,
+ MenuItem,
+ MenuList,
+ Portal,
+ PopoverTrigger,
+ PopoverContent,
+ Popover,
+} from '@chakra-ui/react'
+import React, { useCallback } from 'react'
+import { initialVisuals } from '../../config'
+
+export interface ColorMenuProps {
+ label: string
+ colorList: string[]
+ value: string
+ visValue: string
+ setVisuals?: any
+ noEmpty?: boolean
+}
+
+export const ColorMenu = (props: ColorMenuProps) => {
+ const { label, colorList, value, visValue, setVisuals, noEmpty } = props
+
+ const clickCallback = useCallback(
+ (color) =>
+ setVisuals((curr: typeof initialVisuals) => {
+ return {
+ ...curr,
+ [value]: color,
+ }
+ }),
+ [],
+ )
+ return (
+ <Flex alignItems="center" justifyContent="space-between">
+ <Text>{label}</Text>
+ <Popover isLazy placement="right">
+ <PopoverTrigger>
+ <Button colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
+ {<Box bgColor={visValue} borderRadius="sm" height={6} width={6}></Box>}
+ </Button>
+ </PopoverTrigger>
+ <Portal>
+ <PopoverContent zIndex="tooltip" maxW={36} position="relative">
+ <Flex flexWrap="wrap" bgColor="gray.200">
+ {!noEmpty && (
+ <Box
+ onClick={() => clickCallback('')}
+ justifyContent="space-between"
+ alignItems="center"
+ display="flex"
+ m={1}
+ >
+ <Box
+ height={6}
+ width={6}
+ borderColor="gray.600"
+ borderRadius="xl"
+ borderWidth={1}
+ ></Box>
+ </Box>
+ )}
+ {colorList.map((color: string) => (
+ <Box
+ m={1}
+ key={color}
+ onClick={() => clickCallback(color)}
+ justifyContent="space-between"
+ alignItems="center"
+ display="flex"
+ >
+ <Box bgColor={color} borderRadius="xl" height={6} width={6}></Box>
+ </Box>
+ ))}
+ </Flex>
+ </PopoverContent>
+ </Portal>
+ </Popover>
+ </Flex>
+ )
+}