react-box-tools/dist/multivalue.js

Box tools react components, utils and hooks

import { jsxs as u, jsx as n } from "react/jsx-runtime";
import { c as P } from "./clsx-DG-5vF7T.js";
import { useState as f, useId as $, useRef as q, useEffect as D } from "react";
import { u as z } from "./form-CzgKUHW5.js";
const L = (h) => {
  const {
    //defaultValues: init,
    label: p,
    icon: v,
    disabled: o,
    onAdd: N,
    onFocus: b,
    onKeyDown: y,
    ...I
  } = h, { validateField: w, getRegisteredField: K, error: d, event: x, initValues: m } = z(), r = K(h), [F, M] = f(m[r] ?? []), [V, E] = f(d[r]), [s, i] = f(
    m[r] ?? []
  ), g = $(), l = q(null);
  x.onClear(() => k()), x.onReset(() => {
    M(m[r]);
  });
  const C = s.length > 0, R = (e) => {
    let t = "";
    if (l.current && (t = l.current.value.trim()), e.key === "Enter" && t) {
      if (!s.includes(t)) {
        var c = [...s, t];
        i(c), a(c), N && N(t, c);
      }
      A("");
    }
    y && y(e);
  }, j = (e) => {
    a(s), b && b(e);
  }, S = (e) => {
    var t = s.filter((c) => c !== e);
    i(t), a(t);
  }, a = (e) => {
    r && w(r, e).then((t) => E(t.error));
  }, k = () => {
    o || (i([]), a([]));
  }, A = (e) => {
    l.current && (l.current.value = e);
  };
  return D(() => {
    i(F);
  }, [F]), D(() => {
    E(d[r]);
  }, [d]), /* @__PURE__ */ u("div", { className: P(`control ${o && "disabled"}`), children: [
    p && /* @__PURE__ */ n("label", { htmlFor: g, children: p }),
    /* @__PURE__ */ u("div", { className: "content", children: [
      C && /* @__PURE__ */ n("div", { className: "multi-items", children: s.map((e, t) => /* @__PURE__ */ u("div", { className: "item", children: [
        /* @__PURE__ */ n("span", { children: e }),
        /* @__PURE__ */ n(
          "button",
          {
            type: "button",
            className: "x",
            disabled: o,
            onClick: () => S(e),
            children: /* @__PURE__ */ n("i", { children: "×" })
          }
        )
      ] }, t)) }),
      /* @__PURE__ */ u("div", { className: "input", children: [
        /* @__PURE__ */ n("div", { className: "icon", children: v || /* @__PURE__ */ n("i", { children: "⊌" }) }),
        /* @__PURE__ */ n(
          "input",
          {
            autoComplete: "off",
            ...I,
            ref: l,
            disabled: o,
            type: "text",
            id: g,
            onKeyDown: R,
            onFocus: j
          }
        ),
        C && /* @__PURE__ */ n(
          "button",
          {
            className: "clear",
            type: "button",
            onClick: k,
            disabled: o,
            children: /* @__PURE__ */ n("i", { children: "×" })
          }
        )
      ] })
    ] }),
    V && /* @__PURE__ */ n("span", { className: "error", children: V })
  ] });
};
export {
  L as MultivalueInput
};