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.
71 lines
2.2 KiB
71 lines
2.2 KiB
import React, {useCallback, useContext, useEffect, 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
|
|
}
|
|
|
|
enum ColorType {
|
|
HueSat,
|
|
Kelvin,
|
|
HueSatKelvin,
|
|
}
|
|
|
|
const COLOR_TYPE_OPTIONS = [
|
|
{value: ColorType.HueSat, name: "Bare Nyanse (H) og metning (S)"},
|
|
{value: ColorType.Kelvin, name: "Bare temperatur (K)"},
|
|
{value: ColorType.HueSatKelvin, name: "Nyanse (H), metning (K) og kelvin (S)"},
|
|
];
|
|
|
|
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 [colorType, setColorType] = useState(COLOR_TYPE_OPTIONS[0].value);
|
|
const [isInit, setIsInit] = useState(false);
|
|
|
|
const onSave = useCallback(() => {
|
|
setDialog({type: DialogType.None});
|
|
}, [setDialog]);
|
|
|
|
useEffect(() => {
|
|
if (!isInit && data) {
|
|
const v = data.value;
|
|
|
|
if (v.kelvin !== undefined && v.kelvin > 0) {
|
|
setColorType((v.h || v.s) ? ColorType.HueSatKelvin : ColorType.Kelvin);
|
|
}
|
|
}
|
|
|
|
if (!isInit) {
|
|
setIsInit(true);
|
|
}
|
|
}, [isInit, data, colorType]);
|
|
|
|
return (
|
|
<Dialog title={data ? "Endre farge" : "Ny farge"} buttons={[
|
|
{icon: LuciferIcon.Check, text: "Lagre", onClick: onSave},
|
|
{icon: LuciferIcon.Cross, text: "Avbryt", onClick: clearDialog},
|
|
]}>
|
|
<Input label="Navn" value={name} onChange={setName}/>
|
|
{colorType !== ColorType.Kelvin && (
|
|
<HSColorPicker h={hue} s={sat} onChange={(h, s) => {
|
|
setHue(h);
|
|
setSat(s);
|
|
}}/>
|
|
)}
|
|
{colorType !== ColorType.HueSat && (
|
|
<KelvinColorPicker kelvin={kelvin} onChange={setKelvin}/>
|
|
)}
|
|
</Dialog>
|
|
);
|
|
}
|