You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.3 KiB
38 lines
1.3 KiB
import React, {useCallback, useContext, useState} from "react";
|
|
import {ColorPreset} from "../models/Colors";
|
|
import DialogContext from "../contexts/DialogContext";
|
|
import {DialogType} from "../models/Dialog";
|
|
import {Dialog} from "../primitives/Layout";
|
|
import {LuciferIcon} from "../models/Icons";
|
|
import {HSColorPicker, Input, KelvinColorPicker} from "../primitives/Forms";
|
|
|
|
interface ColorDialogProps {
|
|
data?: ColorPreset
|
|
}
|
|
|
|
export default function ColorDialog({data}: ColorDialogProps) {
|
|
const {setDialog, clearDialog} = useContext(DialogContext);
|
|
|
|
const [name, setName] = useState(data?.name || "");
|
|
const [hue, setHue] = useState(data?.value?.h || 0);
|
|
const [sat, setSat] = useState(data?.value?.s || 0);
|
|
const [kelvin, setKelvin] = useState(data?.value?.kelvin || 0);
|
|
|
|
const onClose = useCallback(() => {
|
|
setDialog({type: DialogType.None});
|
|
}, [setDialog]);
|
|
|
|
return (
|
|
<Dialog title={data ? "Endre farge" : "Ny farge"} buttons={[
|
|
{icon: LuciferIcon.Check, text: "Lagre"},
|
|
{icon: LuciferIcon.Cross, text: "Avbryt", onClick: clearDialog},
|
|
]}>
|
|
<Input label="Navn" value={name} onChange={setName}/>
|
|
<HSColorPicker h={hue} s={sat} onChange={(h, s) => {
|
|
setHue(h);
|
|
setSat(s);
|
|
}}/>
|
|
<KelvinColorPicker kelvin={kelvin} onChange={setKelvin}/>
|
|
</Dialog>
|
|
);
|
|
}
|