@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
180 lines (179 loc) • 6.64 kB
JavaScript
import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { useFormikContext as c } from "formik";
import { useContext as n } from "react";
import { useIntl as m, FormattedMessage as d } from "react-intl";
import h from "../../components/builder/label.js";
import g from "../../components/builder/description.js";
import y from "../../components/builder/tooltip.js";
import b from "../../components/builder/autocomplete.js";
import x from "../../components/builder/placeholder.js";
import T, { useDeriveComponentKey as w } from "../../components/builder/key.js";
import C from "../../components/builder/multiple.js";
import M from "../../components/builder/hidden.js";
import E from "../../components/builder/clear-on-hide.js";
import v from "../../components/builder/is-sensitive-data.js";
import V from "../../components/builder/readonly.js";
import S from "../../components/builder/show-char-count.js";
import A from "../../components/builder/presentation-config.js";
import "formiojs";
import { BuilderContext as p } from "../../context.js";
import { Tabs as D, TabList as F, TabPanel as l } from "../../components/formio/tabs.js";
import "clsx";
import { useErrorChecker as L } from "../../utils/errors.js";
/* empty css */
import "@floating-ui/react";
/* empty css */
import "@formio/vanilla-text-mask";
import I from "../../components/formio/checkbox.js";
import "lodash";
/* empty css */
import "react-select";
import { NumberField as k } from "../../components/formio/number.js";
import { TextAreaMultiple as P } from "../../components/formio/textarea.js";
import "../../components/formio/datagrid.js";
import "@ckeditor/ckeditor5-react";
import "../../components/CKEditor.js";
/* empty css */
import R from "../../components/builder/simple-conditional.js";
import q from "../../components/builder/validate/required.js";
import H from "../../components/builder/validate/maxlength.js";
import K from "../../components/builder/validate/regex.js";
import O from "../../components/builder/validate/validator-select.js";
import N, { useManageValidatorsTranslations as j } from "../../components/builder/validate/i18n.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 z, Validation as G, Translations as Q } from "../../components/builder/tabs.js";
import "@open-formulieren/monaco-json-editor";
import "../../components/builder/values/values-src.js";
/* empty css */
import { LABELS as a } from "../../components/builder/messages.js";
const U = () => {
const t = m(), [o, r] = w(), {
values: u
} = c(), {
hasAnyError: i
} = L(), {
formType: f
} = n(p);
return j(f === "appointment" ? ["required"] : ["required", "maxLength", "pattern"]), /* @__PURE__ */ s(D, { children: [
/* @__PURE__ */ s(F, { children: [
/* @__PURE__ */ e(J, { hasErrors: i("label", "key", "description", "tooltip", "showInSummary", "showInEmail", "showInPDF", "multiple", "hidden", "clearOnHide", "isSensitiveData", "defaultValue", "autocomplete", "disabled", "placeholder", "showCharCount", "autoExpand", "rows") }),
/* @__PURE__ */ e(z, { hasErrors: i("conditional") }),
/* @__PURE__ */ e(G, { hasErrors: i("validate") }),
/* @__PURE__ */ e(Q, { hasErrors: i("openForms.translations") })
] }),
/* @__PURE__ */ s(l, { children: [
/* @__PURE__ */ e(h, {}),
/* @__PURE__ */ e(T, { isManuallySetRef: o, generatedValue: r }),
/* @__PURE__ */ e(g, {}),
/* @__PURE__ */ e(y, {}),
/* @__PURE__ */ e(A, {}),
/* @__PURE__ */ e(C, {}),
/* @__PURE__ */ e(M, {}),
/* @__PURE__ */ e(E, {}),
/* @__PURE__ */ e(v, {}),
/* @__PURE__ */ e(W, { multiple: !!u.multiple }),
/* @__PURE__ */ e(b, {}),
/* @__PURE__ */ e(V, {}),
/* @__PURE__ */ e(x, {}),
/* @__PURE__ */ e(S, {}),
/* @__PURE__ */ e(X, {}),
/* @__PURE__ */ e(Y, {})
] }),
/* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(R, {}) }),
/* @__PURE__ */ s(l, { children: [
/* @__PURE__ */ e(q, {}),
/* @__PURE__ */ e(O, {}),
/* @__PURE__ */ e(H, {}),
/* @__PURE__ */ e(K, {}),
/* @__PURE__ */ e(N, {})
] }),
/* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(B, { propertyLabels: {
label: t.formatMessage(a.label),
description: t.formatMessage(a.description),
tooltip: t.formatMessage(a.tooltip),
placeholder: t.formatMessage(a.placeholder)
} }) })
] });
};
U.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: "",
autoExpand: !1,
showCharCount: !1,
rows: 3,
// Advanced tab
conditional: {
show: void 0,
when: "",
eq: ""
},
// Validation tab
validate: {
required: !1,
plugins: [],
maxLength: 1e4,
pattern: ""
},
translatedErrors: {}
};
const W = ({
multiple: t
}) => {
const o = m(), {
formType: r
} = n(p), u = o.formatMessage({
id: "FffJxu",
defaultMessage: [{
type: 0,
value: "This will be the initial value for this field before user interaction."
}]
});
return r === "appointment" ? null : /* @__PURE__ */ e(P, { name: "defaultValue", label: /* @__PURE__ */ e(d, { ...a.defaultValue }), tooltip: u, multiple: t });
}, X = () => {
const t = m(), {
formType: o
} = n(p), r = t.formatMessage({
id: "jV58dA",
defaultMessage: [{
type: 0,
value: "This will make the text area auto expand its height as the user is typing into the area."
}]
});
return o === "appointment" ? null : /* @__PURE__ */ e(I, { name: "autoExpand", label: /* @__PURE__ */ e(d, { id: "LJckD5", defaultMessage: [{
type: 0,
value: "Auto Expand"
}] }), tooltip: r });
}, Y = () => {
const t = m(), {
formType: o
} = n(p), r = t.formatMessage({
id: "KwatvH",
defaultMessage: [{
type: 0,
value: "The number of rows for this text area."
}]
});
return o === "appointment" ? null : /* @__PURE__ */ e(k, { name: "rows", label: /* @__PURE__ */ e(d, { id: "pDVNSf", defaultMessage: [{
type: 0,
value: "Number of rows"
}] }), tooltip: r });
};
export {
U as default
};