@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
222 lines (221 loc) • 8.39 kB
JavaScript
import { jsxs as m, jsx as e } from "react/jsx-runtime";
import { useFormikContext as v } from "formik";
import { useContext as s } from "react";
import { useIntl as d, FormattedMessage as l } 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 S, { useDeriveComponentKey as w } from "../../components/builder/key.js";
import P from "../../components/builder/multiple.js";
import E from "../../components/builder/hidden.js";
import D from "../../components/builder/clear-on-hide.js";
import V from "../../components/builder/is-sensitive-data.js";
import x from "../../components/builder/readonly.js";
import I from "../../components/builder/show-char-count.js";
import L 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 F, Tab as N, TabPanel as a } from "../../components/formio/tabs.js";
import "clsx";
import { useErrorChecker as R } from "../../utils/errors.js";
/* empty css */
import "@floating-ui/react";
/* empty css */
import { TextFieldMultiple as A } from "../../components/formio/textfield.js";
import h from "../../components/formio/checkbox.js";
import { BuilderContext as n } from "../../context.js";
import k from "../../components/formio/panel.js";
import "react-select";
import "dompurify";
import "../../components/formio/datagrid.js";
/* empty css */
import q from "../../components/builder/simple-conditional.js";
import K from "../../components/builder/validate/required.js";
import O 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 z } from "../../components/builder/validate/i18n.js";
import G from "../../components/builder/registration/registration-attribute.js";
import { PrefillConfiguration as J } from "../../components/builder/prefill/index.js";
import { ComponentTranslations as W } 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, o] = w(), {
values: u
} = v(), {
hasAnyError: i
} = R(), {
formType: b
} = s(n), f = b === "appointment";
return z(f ? ["required"] : ["required", "maxLength", "pattern"]), /* @__PURE__ */ m(H, { children: [
/* @__PURE__ */ m(F, { children: [
/* @__PURE__ */ e(Y, { hasErrors: i("label", "key", "description", "tooltip", "showInSummary", "showInEmail", "showInPDF", "multiple", "hidden", "clearOnHide", "isSensitiveData", "defaultValue", "autocomplete", "disabled", "placeholder", "showCharCount") }),
/* @__PURE__ */ e(Z, { hasErrors: i("conditional") }),
/* @__PURE__ */ e(Q, { hasErrors: i("validate") }),
/* @__PURE__ */ e(X, { hasErrors: i("registration") }),
/* @__PURE__ */ e(_, { hasErrors: i("prefill") }),
/* @__PURE__ */ e(N, { hasErrors: i("deriveStreetName", "deriveCity", "derivePostcode", "deriveHouseNumber"), hidden: f, children: /* @__PURE__ */ e(l, { id: "4/cCvG", defaultMessage: [{
type: 0,
value: "Location"
}] }) }),
/* @__PURE__ */ e($, { hasErrors: i("openForms.translations") })
] }),
/* @__PURE__ */ m(a, { children: [
/* @__PURE__ */ e(g, {}),
/* @__PURE__ */ e(S, { isManuallySetRef: r, generatedValue: o }),
/* @__PURE__ */ e(y, {}),
/* @__PURE__ */ e(C, {}),
/* @__PURE__ */ e(L, {}),
/* @__PURE__ */ e(P, {}),
/* @__PURE__ */ e(E, {}),
/* @__PURE__ */ e(D, {}),
/* @__PURE__ */ e(V, {}),
/* @__PURE__ */ e(te, { multiple: !!u.multiple }),
/* @__PURE__ */ e(M, {}),
/* @__PURE__ */ e(x, {}),
/* @__PURE__ */ e(T, {}),
/* @__PURE__ */ e(I, {})
] }),
/* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(q, {}) }),
/* @__PURE__ */ m(a, { children: [
/* @__PURE__ */ e(K, {}),
/* @__PURE__ */ e(B, {}),
/* @__PURE__ */ e(O, {}),
/* @__PURE__ */ e(j, {}),
/* @__PURE__ */ e(U, {})
] }),
/* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(G, {}) }),
/* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(J, {}) }),
/* @__PURE__ */ e(a, { children: /* @__PURE__ */ m(k, { title: /* @__PURE__ */ e(l, { id: "s8ercf", defaultMessage: [{
type: 0,
value: "Configuration"
}] }), collapsible: !0, children: [
/* @__PURE__ */ e(re, {}),
/* @__PURE__ */ e(oe, {}),
/* @__PURE__ */ e(ie, {}),
/* @__PURE__ */ e(ae, {})
] }) }),
/* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(W, { 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: o
} = s(n), u = r.formatMessage({
id: "FffJxu",
defaultMessage: [{
type: 0,
value: "This will be the initial value for this field before user interaction."
}]
});
return o === "appointment" ? null : /* @__PURE__ */ e(A, { name: "defaultValue", label: /* @__PURE__ */ e(l, { ...p.defaultValue }), tooltip: u, multiple: t });
}, re = () => {
const t = d(), {
formType: r
} = s(n), o = 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(l, { id: "asZV7t", defaultMessage: [{
type: 0,
value: "Derive street name"
}] }), tooltip: o });
}, oe = () => {
const t = d(), {
formType: r
} = s(n), o = 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(l, { id: "H4sILo", defaultMessage: [{
type: 0,
value: "Derive city"
}] }), tooltip: o });
}, ie = () => {
const {
formType: t
} = s(n);
return t === "appointment" ? null : /* @__PURE__ */ e(c, { name: "derivePostcode", label: /* @__PURE__ */ e(l, { id: "Uv58uI", defaultMessage: [{
type: 0,
value: "Postcode component"
}] }), isSearchable: !0, isClearable: !0 });
}, ae = () => {
const {
formType: t
} = s(n);
return t === "appointment" ? null : /* @__PURE__ */ e(c, { name: "deriveHouseNumber", label: /* @__PURE__ */ e(l, { id: "jLg5l6", defaultMessage: [{
type: 0,
value: "House number component"
}] }), isSearchable: !0, isClearable: !0 });
};
export {
ee as default
};