From 063d8ef9eaf874a941f4459e831057dd0a1b7ddd Mon Sep 17 00:00:00 2001
From: Joris
Date: Tue, 5 Jul 2022 21:55:41 +0200
Subject: Rewrite in TS

---
 src/lib/form.ts | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/lib/form.ts

(limited to 'src/lib/form.ts')

diff --git a/src/lib/form.ts b/src/lib/form.ts
new file mode 100644
index 0000000..04a2654
--- /dev/null
+++ b/src/lib/form.ts
@@ -0,0 +1,54 @@
+import { h } from 'lib/h'
+import * as Layout from 'lib/layout'
+import * as Button from 'lib/button'
+
+interface InputParams {
+  label: string,
+  attrs: object,
+}
+
+export function input({ label, attrs }: InputParams): Element {
+  return h('label',
+    { className: 'g-Form__Field' },
+    label,
+    h('input', attrs),
+  )
+}
+
+interface ColorInputParams {
+  colors: string[],
+  label: string,
+  initValue: string,
+  onInput: (value: string) => void,
+}
+
+export function colorInput({ colors, label, initValue, onInput }: ColorInputParams): Element {
+  const input = h('input',
+    { value: initValue,
+      type: 'color',
+      oninput: (e: Event) => {
+        if (e.target !== null) {
+          onInput((e.target as HTMLInputElement).value)
+        }
+      }
+    }
+  ) as HTMLInputElement
+  return h('label',
+    { className: 'g-Form__Field' },
+    label,
+    Layout.line(
+      {},
+      input,
+      ...colors.map(color =>
+        Button.raw({ className: 'g-Form__Color',
+          style: `background-color: ${color}`,
+          type: 'button',
+          onclick: () => {
+            input.value = color
+            onInput(color)
+          }
+        })
+      )
+    )
+  )
+}
-- 
cgit v1.2.3