wip: colors

webui/src/primitives/Forms.tsx

@@ -1,21 +1,66 @@
-import React, {useLayoutEffect, useMemo} from 'react';
-// @ts-ignore
+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, v: number) => void
+  onChange: (h: number, s: number) => void
 }
 
 const randomId = () => Math.floor(Math.random() * 100000);
 
-export const HSColorPicker: React.FC<ColorPickerProps> = ({h, s, onChange}) => {
-  const random = useMemo(() => `color-picker-${randomId()}`, []);
+export const HSColorPicker: React.FC<ColorPickerProps> = ({h, s, onChange, label}) => {
+  const myId = useMemo(() => `color-picker-${randomId()}`, []);
 
   useLayoutEffect(() => {
     // @ts-ignore
-    const colorPicker = new iro.ColorPicker(`#${random}`, {
+    const colorPicker = new iro.ColorPicker(`#${myId}`, {
       color: {h, s: s * 100, v: 255},
       layout: [
         {
@@ -30,14 +75,62 @@ export const HSColorPicker: React.FC<ColorPickerProps> = ({h, s, onChange}) => {
     });
 
     return () => {
-      const elem = document.getElementById(`color-picker-${random}`);
+      const elem = document.getElementById(myId);
       if (elem === null) {
         return;
       }
 
       elem.innerHTML = "";
     };
-  }, [h, s, onChange, random]);
+  }, [h, s, onChange, myId]);
 
-  return <div id={random} style={{margin: "0 auto"}}/>;
+  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(color.kelvin);
+    });
+
+    return () => {
+      const elem = document.getElementById(myId);
+      if (elem === null) {
+        return;
+      }
+
+      elem.innerHTML = "";
+    };
+  }, [kelvin, onChange, myId]);
+
+  return (
+    <FormLine label={label || "KV-farge"}>
+      <div id={myId} style={{margin: "0 auto"}}/>
+    </FormLine>
+  );
+}