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

An opinionated Formio webform builder for Open Forms

import { jsx as e, jsxs as d, Fragment as x } from "react/jsx-runtime";
import F from "clsx";
import { useFormikContext as k, Field as N } from "formik";
import { FormattedMessage as o } from "react-intl";
import { useValidationErrors as C } from "../../utils/errors.js";
import L from "./component.js";
import c from "./description.js";
const M = ({
  name: t,
  value: l,
  label: s,
  description: a
}) => {
  const {
    hasErrors: r
  } = C(t);
  return /* @__PURE__ */ d(x, { children: [
    /* @__PURE__ */ e(N, { name: t, as: "input", type: "radio", value: l, className: F("form-check-input", {
      "is-invalid": r
    }) }),
    /* @__PURE__ */ e("span", { children: s }),
    a && /* @__PURE__ */ e(c, { text: a })
  ] });
}, E = () => /* @__PURE__ */ e("em", { children: /* @__PURE__ */ e(o, { id: "7rzPgD", defaultMessage: [{
  type: 0,
  value: "(missing label)"
}] }) }), q = ({
  name: t,
  options: l,
  label: s,
  required: a = !1,
  isClearable: r = !1,
  tooltip: m = "",
  description: n = "",
  isLoading: p = !1
}) => {
  const {
    getFieldProps: u,
    setFieldValue: f
  } = k(), {
    value: v
  } = u(t), h = !!l.find((i) => i.value === v);
  return p ? /* @__PURE__ */ e(o, { id: "BFq6vL", defaultMessage: [{
    type: 0,
    value: "Loading values..."
  }] }) : /* @__PURE__ */ d(L, { type: "radio", field: t, label: s, tooltip: m, required: a, children: [
    /* @__PURE__ */ e("div", { className: "form-radio radio", children: l.map(({
      value: i,
      label: b,
      description: g
    }, y) => /* @__PURE__ */ e("div", { className: "form-check", children: /* @__PURE__ */ e("label", { className: "form-check-label", children: /* @__PURE__ */ e(M, { name: t, value: i, label: b || /* @__PURE__ */ e(E, {}), description: g }) }) }, `option-${i}-${y}`)) }),
    n && /* @__PURE__ */ e(c, { text: n }),
    h && r && /* @__PURE__ */ e("button", { type: "button", className: "btn btn-link btn-sm", onClick: () => f(t, void 0), style: {
      padding: 0
    }, children: /* @__PURE__ */ e(o, { id: "S4Lvvs", defaultMessage: [{
      type: 0,
      value: "Clear selection"
    }] }) })
  ] });
};
export {
  q as Radio,
  M as RadioInput,
  q as default
};