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.
|
|
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> ); }
|