51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { ButtonBase, Popover } from "@mui/material";
|
|
import { startTransition, useState } from "react";
|
|
import { HexAlphaColorPicker } from "react-colorful";
|
|
|
|
interface Props {
|
|
color: string;
|
|
onChange: (color: string) => void;
|
|
}
|
|
|
|
export default function CircleColorPicker({ color, onChange }: Props) {
|
|
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
|
|
|
|
return (
|
|
<>
|
|
<ButtonBase
|
|
onClick={(event) => setAnchorEl(event.currentTarget)}
|
|
sx={{
|
|
aspectRatio: 1,
|
|
height: "22px",
|
|
width: "22px",
|
|
minWidth: "22px",
|
|
borderRadius: "50%",
|
|
backgroundColor: color,
|
|
border: "1px solid #4D4D4D",
|
|
}}
|
|
/>
|
|
<Popover
|
|
open={Boolean(anchorEl)}
|
|
anchorEl={anchorEl}
|
|
onClose={() => setAnchorEl(null)}
|
|
anchorOrigin={{
|
|
vertical: "bottom",
|
|
horizontal: "right",
|
|
}}
|
|
slotProps={{
|
|
paper: {
|
|
sx: {
|
|
p: "20px",
|
|
},
|
|
style: {
|
|
backgroundColor: color,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<HexAlphaColorPicker color={color} onChange={(color) => startTransition(() => onChange(color))} />
|
|
</Popover>
|
|
</>
|
|
);
|
|
}
|