summaryrefslogtreecommitdiff
path: root/components/Tweaks/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/ColorMenu.tsx
parent9ed0c5705a302a91fab2b8bcc777a12dcf9b3682 (diff)
feat(filter): add option to filter by subdirectory (#190)
Diffstat (limited to 'components/Tweaks/ColorMenu.tsx')
-rw-r--r--components/Tweaks/ColorMenu.tsx88
1 files changed, 0 insertions, 88 deletions
diff --git a/components/Tweaks/ColorMenu.tsx b/components/Tweaks/ColorMenu.tsx
deleted file mode 100644
index b87f76b..0000000
--- a/components/Tweaks/ColorMenu.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-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>
- )
-}