42 lines
906 B
TypeScript
42 lines
906 B
TypeScript
|
import { ButtonBase } from "@mui/material";
|
||
|
|
import { startTransition, useRef } from "react";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
color: string;
|
||
|
|
onChange: (color: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function CircleColorPicker({ color, onChange }: Props) {
|
||
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ButtonBase
|
||
|
|
onClick={() => inputRef.current?.click()}
|
||
|
|
sx={{
|
||
|
|
aspectRatio: 1,
|
||
|
|
height: "22px",
|
||
|
|
width: "22px",
|
||
|
|
minWidth: "20px",
|
||
|
|
borderRadius: "50%",
|
||
|
|
backgroundColor: color,
|
||
|
|
border: "1px solid #4D4D4D",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
ref={inputRef}
|
||
|
|
type="color"
|
||
|
|
value={color}
|
||
|
|
onChange={(e) => {
|
||
|
|
startTransition(() => {
|
||
|
|
onChange(e.target.value);
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
style={{
|
||
|
|
opacity: 0,
|
||
|
|
cursor: "pointer",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</ButtonBase>
|
||
|
|
);
|
||
|
|
}
|