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

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

import { option, select } from "@thi.ng/hiccup-html/forms";
import { $input } from "@thi.ng/rdom/event";
import { __nextID } from "@thi.ng/rdom/idgen";
import { $list } from "@thi.ng/rdom/list";
import { $replace } from "@thi.ng/rdom/replace";
const dynamicDropdown = (items, sel, opts) => {
  opts = {
    value: String,
    label: String,
    ...opts
  };
  return $list(
    items,
    "select",
    { onchange: $input(sel), ...opts.attribs },
    $option(sel, opts)
  );
};
const staticDropdown = (items, sel, opts) => {
  opts = {
    value: String,
    label: String,
    ...opts
  };
  return select(
    { onchange: $input(sel), ...opts.attribs },
    ...items.map($option(sel, opts))
  );
};
const staticDropdownAlt = (items, sel, opts) => {
  opts = {
    value: String,
    label: String,
    ...opts
  };
  return $replace(
    sel.map(
      (id) => select(
        { onchange: $input(sel), ...opts.attribs },
        ...items.map((x) => {
          const value = opts.value(x);
          return option(
            { value, selected: value === id },
            opts.label(x)
          );
        })
      ),
      { id: __nextID("dropdown") }
    )
  );
};
const $option = (sel, { label, value }) => (x) => {
  let v = value(x);
  return option(
    {
      value: v,
      selected: sel.map((x2) => v === x2, { id: __nextID("opt") })
    },
    label(x)
  );
};
export {
  dynamicDropdown,
  staticDropdown,
  staticDropdownAlt
};