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

An opinionated Formio webform builder for Open Forms

import { jsxs as a, jsx as t } from "react/jsx-runtime";
import { useFormikContext as h } from "formik";
import { isEqual as b } from "lodash";
import { useLayoutEffect as v, useContext as g } from "react";
import { useIntl as u, FormattedMessage as E } from "react-intl";
import V from "../../components/builder/label.js";
import y from "../../components/builder/description.js";
import C from "../../components/builder/tooltip.js";
import { BuilderContext as S } from "../../context.js";
import { Tabs as T, TabList as F, TabPanel as i } from "../../components/formio/tabs.js";
import "clsx";
import { useErrorChecker as w } from "../../utils/errors.js";
/* empty css                                           */
import "@floating-ui/react";
/* empty css                                     */
import "@formio/vanilla-text-mask";
import "formiojs";
/* empty css                                 */
import "react-select";
import { Radio as M } from "../../components/formio/radio.js";
import "dompurify";
import "../../components/formio/datagrid.js";
import { LABELS as s } from "../../components/builder/messages.js";
import D, { useDeriveComponentKey as I } from "../../components/builder/key.js";
import x from "../../components/builder/hidden.js";
import L from "../../components/builder/clear-on-hide.js";
import O from "../../components/builder/is-sensitive-data.js";
import P from "../../components/builder/presentation-config.js";
import "@ckeditor/ckeditor5-react";
import "../../components/CKEditor.js";
/* empty css                                     */
import R from "../../components/builder/simple-conditional.js";
import k from "../../components/builder/validate/required.js";
import q from "../../components/builder/validate/validator-select.js";
import A, { useManageValidatorsTranslations as H } from "../../components/builder/validate/i18n.js";
import K from "../../components/builder/registration/registration-attribute.js";
import "react-use";
import "../../components/builder/prefill/identifierRole.js";
import { ComponentTranslations as B } from "../../components/builder/i18n.js";
import { Basic as j, Advanced as J, Validation as z, Registration as G, Translations as N } from "../../components/builder/tabs.js";
import { ValuesConfig as Q } from "../../components/builder/values/values-config.js";
/* empty css                                              */
import { ValuesTranslations as U } from "../../components/builder/values/i18n.js";
import { checkIsManualOptions as W } from "./helpers.js";
const X = () => {
  const o = u(), [n, l] = I(), {
    values: r,
    setFieldValue: f
  } = h(), {
    hasAnyError: e
  } = w(), {
    openForms: {
      dataSrc: m
    },
    defaultValue: d
  } = r;
  H(["required"]);
  const p = W(r), c = p ? r.values || [] : [];
  return v(() => {
    m !== "variable" || b(d, {}) || f("defaultValue", "");
  }, [m]), /* @__PURE__ */ a(T, { children: [
    /* @__PURE__ */ a(F, { children: [
      /* @__PURE__ */ t(j, { hasErrors: e("label", "key", "description", "tooltip", "showInSummary", "showInEmail", "showInPDF", "hidden", "clearOnHide", "isSensitiveData", "openForms.dataSrc", "openForms.itemsExpression", "values", "defaultValue") }),
      /* @__PURE__ */ t(J, { hasErrors: e("conditional") }),
      /* @__PURE__ */ t(z, { hasErrors: e("validate") }),
      /* @__PURE__ */ t(G, { hasErrors: e("registration") }),
      /* @__PURE__ */ t(N, { hasErrors: e("openForms.translations") })
    ] }),
    /* @__PURE__ */ a(i, { children: [
      /* @__PURE__ */ t(V, {}),
      /* @__PURE__ */ t(D, { isManuallySetRef: n, generatedValue: l }),
      /* @__PURE__ */ t(y, {}),
      /* @__PURE__ */ t(C, {}),
      /* @__PURE__ */ t(P, {}),
      /* @__PURE__ */ t(x, {}),
      /* @__PURE__ */ t(L, {}),
      /* @__PURE__ */ t(O, {}),
      /* @__PURE__ */ t(Q, { name: "values", withOptionDescription: !0 }),
      p && /* @__PURE__ */ t(Y, { options: c })
    ] }),
    /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(R, {}) }),
    /* @__PURE__ */ a(i, { children: [
      /* @__PURE__ */ t(k, {}),
      /* @__PURE__ */ t(q, {}),
      /* @__PURE__ */ t(A, {})
    ] }),
    /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(K, {}) }),
    /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(B, { propertyLabels: {
      label: o.formatMessage(s.label),
      description: o.formatMessage(s.description),
      tooltip: o.formatMessage(s.tooltip)
    }, children: /* @__PURE__ */ t(U, { name: "values", withOptionDescription: !0 }) }) })
  ] });
};
X.defaultValues = {
  // basic tab
  label: "",
  key: "",
  description: "",
  tooltip: "",
  showInSummary: !0,
  showInEmail: !1,
  showInPDF: !0,
  hidden: !1,
  clearOnHide: !0,
  isSensitiveData: !1,
  openForms: {
    dataSrc: "manual",
    translations: {}
  },
  values: [{
    value: "",
    label: ""
  }],
  // TODO: check that the initial values are set based on component.values
  // TODO: at some point we can allow an itemsExpression for this too
  defaultValue: "",
  // Advanced tab
  conditional: {
    show: void 0,
    when: "",
    eq: ""
  },
  // Validation tab
  validate: {
    required: !1,
    plugins: []
  },
  translatedErrors: {},
  registration: {
    attribute: ""
  }
};
const Y = ({
  options: o
}) => {
  const n = u(), {
    formType: l
  } = g(S), r = n.formatMessage({
    id: "FffJxu",
    defaultMessage: [{
      type: 0,
      value: "This will be the initial value for this field before user interaction."
    }]
  });
  return l === "appointment" ? null : /* @__PURE__ */ t(M, { name: "defaultValue", options: o, label: /* @__PURE__ */ t(E, { ...s.defaultValue }), tooltip: r, isClearable: !0 });
};
export {
  X as default
};