new-server/webui/src/dialogs/ColorDialog.tsx

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