@open-formulieren/formio-builder/lib/esm/components/formio/number.js

An opinionated Formio webform builder for Open Forms

import { jsxs as p, jsx as t, Fragment as x } from "react/jsx-runtime";
import C from "clsx";
import { useFormikContext as b, Field as j } from "formik";
import { useValidationErrors as k } from "../../utils/errors.js";
import l from "./affix.js";
import y from "./component.js";
import E from "./description.js";
const W = ({
  name: r,
  label: e,
  required: o = !1,
  tooltip: a = "",
  description: i = "",
  prefix: d = "",
  suffix: m = "",
  ...u
}) => {
  const {
    getFieldProps: c,
    getFieldHelpers: g
  } = b(), {
    hasErrors: h
  } = k(r), {
    value: f,
    onChange: v
  } = c(r), {
    setValue: N
  } = g(r), n = `editform-${r}`;
  return /* @__PURE__ */ p(y, { type: "number", field: r, required: o, htmlId: n, label: e, tooltip: a, children: [
    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(V, { suffix: m, prefix: d, children: /* @__PURE__ */ t(j, { name: r, id: n, as: "input", type: "number", className: C("form-control", {
      "is-invalid": h
    }), "data-testid": `input-${r}`, ...u, value: f ?? "", onChange: (s) => {
      const {
        value: F
      } = s.target;
      v(s), F === "" && N(void 0);
    } }) }) }),
    i && /* @__PURE__ */ t(E, { text: i })
  ] });
}, V = ({
  prefix: r,
  suffix: e,
  children: o
}) => r || e ? /* @__PURE__ */ p("div", { className: "input-group", children: [
  r && /* @__PURE__ */ t("div", { className: "input-group-prepend", children: /* @__PURE__ */ t(l, { className: "input-group-text", children: r }) }),
  o,
  e && /* @__PURE__ */ t("div", { className: "input-group-append", children: /* @__PURE__ */ t(l, { className: "input-group-text", children: e }) })
] }) : /* @__PURE__ */ t(x, { children: o });
export {
  W as NumberField,
  W as default
};