@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
244 lines (243 loc) • 8.82 kB
JavaScript
import { jsxs as c, jsx as e } from "react/jsx-runtime";
import { useFormikContext as v } from "formik";
import { isEqual as C } from "lodash";
import { useContext as f, useLayoutEffect as M } from "react";
import { useIntl as h, FormattedMessage as g } from "react-intl";
import T from "../../components/builder/label.js";
import E from "../../components/builder/description.js";
import F from "../../components/builder/tooltip.js";
import { BuilderContext as y } from "../../context.js";
import { Tabs as k, TabList as w, TabPanel as p } from "../../components/formio/tabs.js";
import "clsx";
import { useErrorChecker as D } from "../../utils/errors.js";
/* empty css */
import "@floating-ui/react";
/* empty css */
import "../../components/formio/textfield.js";
import "../../components/formio/datefield.js";
import "../../components/formio/datetimefield.js";
import "../../components/formio/timefield.js";
/* empty css */
import "react-select";
import { SelectBoxes as I } from "../../components/formio/selectboxes.js";
import { NumberField as S } from "../../components/formio/number.js";
import "../../components/formio/textarea.js";
import "../../components/formio/datagrid.js";
/* empty css */
import { LABELS as d } from "../../components/builder/messages.js";
import O, { useDeriveComponentKey as A } from "../../components/builder/key.js";
import K from "../../components/builder/hidden.js";
import P from "../../components/builder/clear-on-hide.js";
import q from "../../components/builder/is-sensitive-data.js";
import L from "../../components/builder/presentation-config.js";
import "../addressNL/index.js";
import "../bsn/index.js";
import "../checkbox/index.js";
import "../children/index.js";
import "../columns/index.js";
import "../content/index.js";
import "../cosignV1/index.js";
import "../cosignV2/index.js";
import "../currency/index.js";
import "../customerProfile/index.js";
import "../date/index.js";
import "../datetime/index.js";
import "../editgrid/index.js";
import "../email/index.js";
import "../fieldset/index.js";
import "../file/index.js";
import "../iban/index.js";
import "../licenseplate/index.js";
import "../map/index.js";
import "../npFamilyMembers/index.js";
import "../number/index.js";
import "../partners/index.js";
import "../phonenumber/index.js";
import "../postcode/index.js";
import "../radio/index.js";
import "../select/index.js";
import "./index.js";
import "../signature/index.js";
import "../softRequiredErrors/index.js";
import "../textarea/index.js";
import "../textfield/index.js";
import "../time/index.js";
import "@ckeditor/ckeditor5-react";
import "../../components/CKEditor.js";
/* empty css */
import B from "../../components/builder/simple-conditional.js";
import R from "../../components/builder/validate/required.js";
import j from "../../components/builder/validate/validator-select.js";
import H, { useManageValidatorsTranslations as G } from "../../components/builder/validate/i18n.js";
import J from "../../components/builder/registration/registration-attribute.js";
import "react-use";
import "../../components/builder/prefill/identifierRole.js";
import { ComponentTranslations as N } from "../../components/builder/i18n.js";
import { Basic as z, Advanced as Q, Validation as W, Registration as U, Translations as X } from "../../components/builder/tabs.js";
import { ValuesConfig as Y } from "../../components/builder/values/values-config.js";
/* empty css */
import { ValuesTranslations as Z } from "../../components/builder/values/i18n.js";
import { checkIsManualOptions as _ } from "./helpers.js";
const $ = () => {
const t = h(), [r, i] = A(), {
values: m,
setFieldValue: n
} = v(), {
hasAnyError: a
} = D(), {
formType: b
} = f(y), {
openForms: {
dataSrc: s
},
defaultValue: u
} = m;
G(b === "appointment" ? ["required"] : ["required", "minSelectedCount", "maxSelectedCount"]);
const l = _(m), o = l ? m.values || [] : [];
return M(() => {
s !== "variable" || C(u, {}) || n("defaultValue", {});
}, [s]), /* @__PURE__ */ c(k, { children: [
/* @__PURE__ */ c(w, { children: [
/* @__PURE__ */ e(z, { hasErrors: a("label", "key", "description", "tooltip", "showInSummary", "showInEmail", "showInPDF", "hidden", "clearOnHide", "isSensitiveData", "openForms.dataSrc", "openForms.itemsExpression", "values", "defaultValue") }),
/* @__PURE__ */ e(Q, { hasErrors: a("conditional") }),
/* @__PURE__ */ e(W, { hasErrors: a("validate") }),
/* @__PURE__ */ e(U, { hasErrors: a("registration") }),
/* @__PURE__ */ e(X, { hasErrors: a("openForms.translations") })
] }),
/* @__PURE__ */ c(p, { children: [
/* @__PURE__ */ e(T, {}),
/* @__PURE__ */ e(O, { isManuallySetRef: r, generatedValue: i }),
/* @__PURE__ */ e(E, {}),
/* @__PURE__ */ e(F, {}),
/* @__PURE__ */ e(L, {}),
/* @__PURE__ */ e(K, {}),
/* @__PURE__ */ e(P, {}),
/* @__PURE__ */ e(q, {}),
/* @__PURE__ */ e(Y, { name: "values", withOptionDescription: !0 }),
l && /* @__PURE__ */ e(ee, { options: o })
] }),
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(B, {}) }),
/* @__PURE__ */ c(p, { children: [
/* @__PURE__ */ e(R, {}),
/* @__PURE__ */ e(j, {}),
/* @__PURE__ */ e(te, {}),
/* @__PURE__ */ e(oe, {}),
/* @__PURE__ */ e(H, {})
] }),
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(J, {}) }),
/* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(N, { propertyLabels: {
label: t.formatMessage(d.label),
description: t.formatMessage(d.description),
tooltip: t.formatMessage(d.tooltip)
}, children: /* @__PURE__ */ e(Z, { name: "values", withOptionDescription: !0 }) }) })
] });
};
$.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 ee = ({
options: t
}) => {
const r = h(), {
getFieldProps: i,
setFieldValue: m
} = v(), {
value: n = {}
} = i("defaultValue"), {
formType: a
} = f(y), b = r.formatMessage({
id: "FffJxu",
defaultMessage: [{
type: 0,
value: "This will be the initial value for this field before user interaction."
}]
});
return M(() => {
const s = t.map((o) => o.value), u = new Set(Object.keys(n));
if (u.size === s.length && s.every((o) => u.has(o))) return;
const l = {};
s.forEach((o) => {
const x = Object.prototype.hasOwnProperty.call(n, o) ? n[o] : !1;
l[o] = x;
}), m("defaultValue", l);
}, [t]), a === "appointment" ? null : /* @__PURE__ */ e(I, { name: "defaultValue", options: t, label: /* @__PURE__ */ e(g, { ...d.defaultValue }), tooltip: b });
}, te = () => {
const t = h(), {
formType: r
} = f(y), i = t.formatMessage({
id: "BVuE94",
defaultMessage: [{
type: 0,
value: "If specified, the user must check at least this many options."
}]
});
return r === "appointment" ? null : /* @__PURE__ */ e(S, { name: "validate.minSelectedCount", label: /* @__PURE__ */ e(g, { id: "dbAJfK", defaultMessage: [{
type: 0,
value: "Minimum selected checkboxes"
}] }), placeholder: t.formatMessage({
id: "oGBVo2",
defaultMessage: [{
type: 0,
value: "Minimum selected checkboxes (e.g. 1)"
}]
}), tooltip: i, min: 1, step: 1 });
}, oe = () => {
const t = h(), {
formType: r
} = f(y), i = t.formatMessage({
id: "sR9GVQ",
defaultMessage: [{
type: 0,
value: "If specified, the user must check at most this many options."
}]
});
return r === "appointment" ? null : /* @__PURE__ */ e(S, { name: "validate.maxSelectedCount", label: /* @__PURE__ */ e(g, { id: "aWwaAq", defaultMessage: [{
type: 0,
value: "Maximum selected checkboxes"
}] }), placeholder: t.formatMessage({
id: "VNGD7o",
defaultMessage: [{
type: 0,
value: "Maximum selected checkboxes (e.g. 1)"
}]
}), tooltip: i, min: 1, step: 1 });
};
export {
$ as default
};