53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { TwitterPicker } from "react-color";
|
||
|
|
|
||
|
|
export function ColorPicker({
|
||
|
|
color,
|
||
|
|
onChange
|
||
|
|
}: {
|
||
|
|
color: string | null;
|
||
|
|
onChange: (color: string) => void;
|
||
|
|
}) {
|
||
|
|
const [isActive, setActive] = React.useState(false);
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<button
|
||
|
|
className="swatch"
|
||
|
|
style={color ? { backgroundColor: color } : undefined}
|
||
|
|
onClick={() => setActive(!isActive)}
|
||
|
|
/>
|
||
|
|
{isActive ? (
|
||
|
|
<div className="popover">
|
||
|
|
<div className="cover" onClick={() => setActive(false)} />
|
||
|
|
<TwitterPicker
|
||
|
|
colors={[
|
||
|
|
"#000000",
|
||
|
|
"#ABB8C3",
|
||
|
|
"#FFFFFF",
|
||
|
|
"#FF6900",
|
||
|
|
"#FCB900",
|
||
|
|
"#00D084",
|
||
|
|
"#8ED1FC",
|
||
|
|
"#0693E3",
|
||
|
|
"#EB144C",
|
||
|
|
"#F78DA7",
|
||
|
|
"#9900EF"
|
||
|
|
]}
|
||
|
|
width="205px"
|
||
|
|
color={color || undefined}
|
||
|
|
onChange={changedColor => {
|
||
|
|
onChange(changedColor.hex);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
) : null}
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className="swatch-input"
|
||
|
|
value={color || ""}
|
||
|
|
onChange={e => onChange(e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|