Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 22x 192x 192x 192x 192x 3x 192x 2x 192x | import React, { useRef, useState } from "react";
import GiveChip, { IChipProps } from "@shared/Chip/GiveChip";
import ContextualMenu from "@shared/ContextualMenu/ContextualMenu";
import { useAppTheme } from "@theme/v2/Provider";
import { ContextualMenuOptionProps } from "@shared/ContextualMenu/ContextualMenu.types";
import GiveText from "@shared/Text/GiveText";
import { CaretDownIcon } from "@phosphor-icons/react";
import { Stack } from "@mui/material";
interface IComponentProps {
options: ContextualMenuOptionProps[];
chipProps: IChipProps;
canOpen?: boolean;
label: string;
menuWidth?: number;
}
const ChipMenu = ({
options,
chipProps,
canOpen,
label,
menuWidth = 200,
}: IComponentProps) => {
const theme = useAppTheme();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const chipRef = useRef(null);
const handleOpenMenu = () => {
setAnchorEl(chipRef.current);
};
const handleCloseMenu = () => {
setAnchorEl(null);
};
return (
<>
<GiveChip
onClick={canOpen ? handleOpenMenu : undefined}
elementRef={chipRef}
label={
<Stack direction="row" gap={0.5} alignItems="center">
<GiveText variant="bodyXS" sx={{ color: "currentcolor" }}>
{label}
</GiveText>
{canOpen && (
<CaretDownIcon
size={16}
style={{
transform: `rotate(${anchorEl ? -180 : 0}deg)`,
transition: "transform 0.1s ease",
}}
/>
)}
</Stack>
}
{...chipProps}
/>
<ContextualMenu
anchorEl={anchorEl}
color="primary"
texture="solid"
horizontalOrigin="left"
options={options}
menuWidth={menuWidth}
slotProps={{
paper: {
sx: {
backgroundColor: `${theme.palette?.surface?.tertiary} !important`,
border: `0.5px solid ${theme.palette?.border?.secondary}`,
},
},
}}
sx={{
zIndex: 10000,
}}
handleClose={handleCloseMenu}
/>
</>
);
};
export default ChipMenu;
|