@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
233 lines (232 loc) • 9.13 kB
JavaScript
import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { useFormikContext as b } from "formik";
import { useContext as n } from "react";
import { useIntl as d, FormattedMessage as o } from "react-intl";
import g from "../../components/builder/label.js";
import y from "../../components/builder/description.js";
import C from "../../components/builder/tooltip.js";
import M from "../../components/builder/autocomplete.js";
import T from "../../components/builder/placeholder.js";
import w, { useDeriveComponentKey as S } from "../../components/builder/key.js";
import E from "../../components/builder/multiple.js";
import P from "../../components/builder/hidden.js";
import x from "../../components/builder/clear-on-hide.js";
import D from "../../components/builder/is-sensitive-data.js";
import V from "../../components/builder/readonly.js";
import L from "../../components/builder/show-char-count.js";
import I from "../../components/builder/presentation-config.js";
import c from "../../components/builder/component-select.js";
import "@ckeditor/ckeditor5-react";
import "../../components/CKEditor.js";
import { Tabs as H, TabList as N, Tab as F, TabPanel as l } from "../../components/formio/tabs.js";
import "clsx";
import { useErrorChecker as A } from "../../utils/errors.js";
/* empty css */
import "@floating-ui/react";
/* empty css */
import { TextFieldMultiple as R } from "../../components/formio/textfield.js";
import h from "../../components/formio/checkbox.js";
import "../../components/formio/datefield.js";
import "../../components/formio/datetimefield.js";
import "../../components/formio/timefield.js";
import k from "../../components/formio/panel.js";
import "react-select";
import "dompurify";
import "../../components/formio/textarea.js";
import "../../components/formio/datagrid.js";
/* empty css */
import { BuilderContext as m } from "../../context.js";
/* empty css */
import q from "../../components/builder/simple-conditional.js";
import O from "../../components/builder/validate/required.js";
import K from "../../components/builder/validate/maxlength.js";
import j from "../../components/builder/validate/regex.js";
import B from "../../components/builder/validate/validator-select.js";
import U, { useManageValidatorsTranslations as W } from "../../components/builder/validate/i18n.js";
import z from "../../components/builder/registration/registration-attribute.js";
import { PrefillConfiguration as G } from "../../components/builder/prefill/index.js";
import { ComponentTranslations as J } from "../../components/builder/i18n.js";
import { Basic as Y, Advanced as Z, Validation as Q, Registration as X, Prefill as _, Translations as $ } from "../../components/builder/tabs.js";
import "@open-formulieren/monaco-json-editor";
import "react-use";
import "../../components/builder/values/values-src.js";
import "lodash";
/* empty css */
import { LABELS as p } from "../../components/builder/messages.js";
const ee = () => {
const t = d(), [r, i] = S(), {
values: u
} = b(), {
hasAnyError: a
} = A(), {
formType: v
} = n(m), f = v === "appointment";
return W(f ? ["required"] : ["required", "maxLength", "pattern"]), /* @__PURE__ */ s(H, { children: [
/* @__PURE__ */ s(N, { children: [
/* @__PURE__ */ e(Y, { hasErrors: a("label", "key", "description", "tooltip", "showInSummary", "showInEmail", "showInPDF", "multiple", "hidden", "clearOnHide", "isSensitiveData", "defaultValue", "autocomplete", "disabled", "placeholder", "showCharCount") }),
/* @__PURE__ */ e(Z, { hasErrors: a("conditional") }),
/* @__PURE__ */ e(Q, { hasErrors: a("validate") }),
/* @__PURE__ */ e(X, { hasErrors: a("registration") }),
/* @__PURE__ */ e(_, { hasErrors: a("prefill") }),
/* @__PURE__ */ e(F, { hasErrors: a("deriveStreetName", "deriveCity", "derivePostcode", "deriveHouseNumber"), hidden: f, children: /* @__PURE__ */ e(o, { id: "4/cCvG", defaultMessage: [{
type: 0,
value: "Location"
}] }) }),
/* @__PURE__ */ e($, { hasErrors: a("openForms.translations") })
] }),
/* @__PURE__ */ s(l, { children: [
/* @__PURE__ */ e(g, {}),
/* @__PURE__ */ e(w, { isManuallySetRef: r, generatedValue: i }),
/* @__PURE__ */ e(y, {}),
/* @__PURE__ */ e(C, {}),
/* @__PURE__ */ e(I, {}),
/* @__PURE__ */ e(E, {}),
/* @__PURE__ */ e(P, {}),
/* @__PURE__ */ e(x, {}),
/* @__PURE__ */ e(D, {}),
/* @__PURE__ */ e(te, { multiple: !!u.multiple }),
/* @__PURE__ */ e(M, {}),
/* @__PURE__ */ e(V, {}),
/* @__PURE__ */ e(T, {}),
/* @__PURE__ */ e(L, {})
] }),
/* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(q, {}) }),
/* @__PURE__ */ s(l, { children: [
/* @__PURE__ */ e(O, {}),
/* @__PURE__ */ e(B, {}),
/* @__PURE__ */ e(K, {}),
/* @__PURE__ */ e(j, {}),
/* @__PURE__ */ e(U, {})
] }),
/* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(z, {}) }),
/* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(G, {}) }),
/* @__PURE__ */ s(l, { children: [
/* @__PURE__ */ e("div", { className: "alert alert-info", children: /* @__PURE__ */ e(o, { id: "Ob4chA", defaultMessage: [{
type: 0,
value: "The location derivation options have known usability problems and do not work when used inside repeating groups. We recommend that you use the 'AddressNL' component instead. Existing forms will continue to function as before, but this feature will not receive further improvements."
}] }) }),
/* @__PURE__ */ s(k, { title: /* @__PURE__ */ e(o, { id: "s8ercf", defaultMessage: [{
type: 0,
value: "Configuration"
}] }), collapsible: !0, children: [
/* @__PURE__ */ e(oe, {}),
/* @__PURE__ */ e(re, {}),
/* @__PURE__ */ e(ie, {}),
/* @__PURE__ */ e(ae, {})
] })
] }),
/* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(J, { propertyLabels: {
label: t.formatMessage(p.label),
description: t.formatMessage(p.description),
tooltip: t.formatMessage(p.tooltip),
placeholder: t.formatMessage(p.placeholder)
} }) })
] });
};
ee.defaultValues = {
// basic tab
label: "",
key: "",
description: "",
tooltip: "",
showInSummary: !0,
showInEmail: !1,
showInPDF: !0,
multiple: !1,
hidden: !1,
clearOnHide: !0,
isSensitiveData: !1,
defaultValue: "",
autocomplete: "",
disabled: !1,
placeholder: "",
showCharCount: !1,
// location tab
deriveStreetName: !1,
deriveCity: !1,
derivePostcode: "",
deriveHouseNumber: "",
// Advanced tab
conditional: {
show: void 0,
when: "",
eq: ""
},
// Validation tab
validate: {
required: !1,
plugins: [],
maxLength: 1e3,
pattern: ""
},
translatedErrors: {},
registration: {
attribute: ""
},
prefill: {
plugin: "",
attribute: "",
identifierRole: "main"
}
};
const te = ({
multiple: t
}) => {
const r = d(), {
formType: i
} = n(m), u = r.formatMessage({
id: "FffJxu",
defaultMessage: [{
type: 0,
value: "This will be the initial value for this field before user interaction."
}]
});
return i === "appointment" ? null : /* @__PURE__ */ e(R, { name: "defaultValue", label: /* @__PURE__ */ e(o, { ...p.defaultValue }), tooltip: u, multiple: t });
}, oe = () => {
const t = d(), {
formType: r
} = n(m), i = t.formatMessage({
id: "W4PizY",
defaultMessage: [{
type: 0,
value: "If the postcode and house number are entered this field will autofill with the street name"
}]
});
return r === "appointment" ? null : /* @__PURE__ */ e(h, { name: "deriveStreetName", label: /* @__PURE__ */ e(o, { id: "asZV7t", defaultMessage: [{
type: 0,
value: "Derive street name"
}] }), tooltip: i });
}, re = () => {
const t = d(), {
formType: r
} = n(m), i = t.formatMessage({
id: "V6ClU9",
defaultMessage: [{
type: 0,
value: "If the postcode and house number are entered this field will autofill with the city"
}]
});
return r === "appointment" ? null : /* @__PURE__ */ e(h, { name: "deriveCity", label: /* @__PURE__ */ e(o, { id: "H4sILo", defaultMessage: [{
type: 0,
value: "Derive city"
}] }), tooltip: i });
}, ie = () => {
const {
formType: t
} = n(m);
return t === "appointment" ? null : /* @__PURE__ */ e(c, { name: "derivePostcode", label: /* @__PURE__ */ e(o, { id: "Uv58uI", defaultMessage: [{
type: 0,
value: "Postcode component"
}] }), isSearchable: !0, isClearable: !0 });
}, ae = () => {
const {
formType: t
} = n(m);
return t === "appointment" ? null : /* @__PURE__ */ e(c, { name: "deriveHouseNumber", label: /* @__PURE__ */ e(o, { id: "jLg5l6", defaultMessage: [{
type: 0,
value: "House number component"
}] }), isSearchable: !0, isClearable: !0 });
};
export {
ee as default
};