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> ) }