feat(rdom-components): add input components

- add inputNumeric() - add inputVector(), inputVectorCoord()
thi-ng · Aug 3, 2021 · fb390c1 · fb390c1
1 parent dd0d965
commit fb390c1
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/packages/rdom-components/src/index.ts b/packages/rdom-components/src/index.ts
@@ -1,5 +1,6 @@
 export * from "./accordion";
 export * from "./dropdown";
-export * from "./icon-button";
 export * from "./editor";
+export * from "./icon-button";
+export * from "./input";
 export * from "./tabs";
diff --git a/packages/rdom-components/src/input.ts b/packages/rdom-components/src/input.ts
@@ -0,0 +1,47 @@
+import type { NumericArray } from "@thi.ng/api";
+import {
+    Attribs,
+    div,
+    inputNumber,
+    InputNumericAttribs,
+} from "@thi.ng/hiccup-html";
+import type { ISubscription } from "@thi.ng/rstream";
+import { pluck, repeatedly } from "@thi.ng/transducers";
+
+export const inputNumeric = (
+    dest: ISubscription<number, number>,
+    attribs?: Partial<InputNumericAttribs>
+) =>
+    inputNumber({
+        ...attribs,
+        value: dest,
+        oninput: (e: InputEvent) =>
+            dest.next(parseFloat((<HTMLInputElement>e.target).value)),
+    });
+
+export const inputVector = (
+    dim: number,
+    dest: ISubscription<NumericArray, NumericArray>,
+    outerAttribs: Partial<Attribs> = {},
+    innerAttribs?: Partial<InputNumericAttribs>
+) =>
+    div(
+        outerAttribs,
+        ...repeatedly((i) => inputVectorCoord(dim, i, dest, innerAttribs), dim)
+    );
+
+export const inputVectorCoord = (
+    dim: number,
+    i: number,
+    dest: ISubscription<NumericArray, NumericArray>,
+    attribs?: Partial<InputNumericAttribs>
+) =>
+    inputNumber({
+        ...attribs,
+        value: dest.transform(pluck(i)),
+        oninput: (e: InputEvent) => {
+            const vec = (dest.deref() || new Array(dim).fill(0)).slice();
+            vec[i] = parseFloat((<HTMLInputElement>e.target).value);
+            dest.next(vec);
+        },
+    });