@thi.ng/rdom-components/input.js

Collection of unstyled, customizable components for @thi.ng/rdom

import { div } from "@thi.ng/hiccup-html/blocks";
import {
  inputNumber
} from "@thi.ng/hiccup-html/forms";
import { $inputNum } from "@thi.ng/rdom/event";
import { pluck } from "@thi.ng/transducers/pluck";
import { repeatedly } from "@thi.ng/transducers/repeatedly";
const inputNumeric = (dest, attribs) => inputNumber({
  ...attribs,
  value: dest,
  oninput: $inputNum(dest)
});
const inputVector = (dim, dest, outerAttribs = {}, innerAttribs) => div(
  outerAttribs,
  ...repeatedly((i) => inputVectorCoord(dim, i, dest, innerAttribs), dim)
);
const inputVectorCoord = (dim, i, dest, attribs) => inputNumber({
  ...attribs,
  value: dest.transform(pluck(i)),
  oninput: (e) => {
    const vec = (dest.deref() || new Array(dim).fill(0)).slice();
    vec[i] = parseFloat(e.target.value);
    dest.next(vec);
  }
});
export {
  inputNumeric,
  inputVector,
  inputVectorCoord
};