new-server/webui/src/primitives/Forms.tsx

import React, {PropsWithChildren, useCallback, useLayoutEffect, useMemo} from 'react';
import iro from "@jaames/iro";

import "./Forms.sass";

interface FormLineProps {
  label: string
  id?: string
}

function FormLine({label, id, children}: PropsWithChildren<FormLineProps>) {
  return (
    <div className="FormLine">
      <label htmlFor={id}>{label}:</label>
      {children}
    </div>
  );
}

interface InputProps {
  label: string
  value: string
  onChange?: (s: string) => void,
  onChangeNumeric?: (n: number) => void
  numeric?: boolean
}

export function Input({label, numeric, onChange, onChangeNumeric, value}: InputProps) {
  const id = useMemo(() => `input-${randomId()}`, []);

  const actualOnChange = useCallback((newValue: string) => {
    if (onChangeNumeric) {
      onChangeNumeric(parseInt(newValue));
    } else if (onChange) {
      onChange(newValue);
    }
  }, [onChange, onChangeNumeric]);

  return (
    <FormLine label={label} id={id}>
      <input id={id} value={value}
             type={numeric ? "number" : "text"}
             onChange={i => actualOnChange(i.target.value)}
      />
    </FormLine>
  )
}

interface ColorPickerProps {
  label?: string
  h: number
  s: number
  onChange: (h: number, s: number) => void
}

const randomId = () => Math.floor(Math.random() * 100000);

export const HSColorPicker: React.FC<ColorPickerProps> = ({h, s, onChange, label}) => {
  const myId = useMemo(() => `color-picker-${randomId()}`, []);

  useLayoutEffect(() => {
    // @ts-ignore
    const colorPicker = new iro.ColorPicker(`#${myId}`, {
      color: {h, s: s * 100, v: 255},
      layout: [
        {
          component: iro.ui.Wheel,
          options: {}
        }
      ],
    });

    colorPicker.on("input:end", (color: { hsv: { h: number, s: number } }) => {
      onChange(color.hsv.h || 0, (color.hsv.s || 0) / 100);
    });

    return () => {
      const elem = document.getElementById(myId);
      if (elem === null) {
        return;
      }

      elem.innerHTML = "";
    };
  }, [h, s, onChange, myId]);

  return (
    <FormLine label={label || "HS-farge"}>
      <div id={myId} style={{margin: "0 auto"}}/>
    </FormLine>
  );
};

interface KelvinColorPickerProps {
  label?: string
  kelvin: number
  onChange: (kelvin: number) => void
}

export const KelvinColorPicker: React.FC<KelvinColorPickerProps> = ({label, kelvin, onChange}) => {
  const myId = useMemo(() => `color-picker-${randomId()}`, []);

  useLayoutEffect(() => {
    // @ts-ignore
    const colorPicker = new iro.ColorPicker(`#${myId}`, {
      color: {kelvin},
      layout: [
        {
          component: iro.ui.Slider,
          options: {
            sliderType: "kelvin",
          }
        }
      ],
    });

    colorPicker.on("input:end", (color: iro.Color) => {
      onChange(Math.floor(color.kelvin));
    });

    return () => {
      const elem = document.getElementById(myId);
      if (elem === null) {
        return;
      }

      elem.innerHTML = "";
    };
  }, [kelvin, onChange, myId]);

  return (
    <FormLine label={label || "KV-farge"}>
      <div title={`${kelvin}K`} id={myId} style={{margin: "0 auto"}}/>
    </FormLine>
  );
}