color picker component

webui/src/primitives/Forms.tsx

@@ -0,0 +1,43 @@
+import React, {useLayoutEffect, useState} from 'react';
+// @ts-ignore
+import iro from "@jaames/iro";
+
+interface ColorPickerProps {
+  h: number
+  s: number
+  onChange: (h: number, v: number) => void
+}
+
+const randomId = () => Math.floor(Math.random() * 100000);
+
+export const HSColorPicker: React.FC<ColorPickerProps> = ({h, s, onChange}) => {
+  const [random] = useState(() => `color-picker-${randomId()}`);
+
+  useLayoutEffect(() => {
+    // @ts-ignore
+    const colorPicker = new iro.ColorPicker(`#${random}`, {
+      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(`color-picker-${random}`);
+      if (elem === null) {
+        return;
+      }
+
+      elem.innerHTML = "";
+    };
+  }, [h, s, onChange, random]);
+
+  return <div id={random} style={{margin: "0 auto"}}/>;
+};