@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
188 lines (187 loc) • 6.32 kB
JavaScript
import { jsx as e, Fragment as v, jsxs as i } from "react/jsx-runtime";
import { JSONEditor as I } from "@open-formulieren/monaco-json-editor";
import { useFormikContext as P } from "formik";
import { useContext as y, useRef as k, useState as L, useEffect as N } from "react";
import { FormattedMessage as C, useIntl as O, defineMessage as a } from "react-intl";
import A from "../../components/PreviewModeToggle.js";
import { Tabs as b, TabList as M, Tab as S, TabPanel as n } from "../../components/formio/tabs.js";
import "clsx";
import { useErrorChecker as T } 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 R from "../../components/formio/select.js";
import "dompurify";
import "../../components/formio/textarea.js";
import "../../components/formio/datagrid.js";
/* empty css */
import "../../components/builder/messages.js";
import { BuilderContext as E } from "../../context.js";
import j from "../../components/builder/key.js";
import D from "../../components/builder/hidden.js";
import K 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 "./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 "../selectboxes/index.js";
import "../signature/index.js";
import "../softRequiredErrors/index.js";
import "../textarea/index.js";
import "../textfield/index.js";
import "../time/index.js";
import q from "../../components/builder/rich-text.js";
import $ from "../../components/builder/simple-conditional.js";
import "react-use";
import "lodash";
import "../../components/builder/prefill/identifierRole.js";
import "../../components/builder/i18n.js";
import { Advanced as B } from "../../components/builder/tabs.js";
import "../../components/builder/values/values-src.js";
/* empty css */
const J = () => {
const {
uniquifyKey: r,
supportedLanguageCodes: s,
theme: t
} = y(E), m = k(!1), {
values: o,
setFieldValue: p,
setValues: w
} = P(), F = r(o.key), {
hasAnyError: u
} = T(), [d, x] = L("rich"), c = s[0] ?? "nl";
N(() => {
var h, f, g;
const l = (g = (f = (h = o.openForms) == null ? void 0 : h.translations) == null ? void 0 : f[c]) == null ? void 0 : g.html;
l === void 0 && o.html ? p(`openForms.translations.${c}.html`, o.html) : o.html !== l && p("html", l);
});
const {
html: H,
...V
} = o;
return /* @__PURE__ */ e(v, { children: /* @__PURE__ */ i("div", { className: "card panel preview-panel", children: [
/* @__PURE__ */ e("div", { className: "card-header d-flex justify-content-end", children: /* @__PURE__ */ e(A, { previewMode: d, setPreviewMode: x }) }),
/* @__PURE__ */ e("div", { className: "card-body", children: d === "JSON" ? /* @__PURE__ */ e(I, { height: "45vh", value: V, onChange: w, theme: t }) : /* @__PURE__ */ i(v, { children: [
/* @__PURE__ */ e(G, {}),
/* @__PURE__ */ i(b, { children: [
/* @__PURE__ */ i(M, { children: [
/* @__PURE__ */ e(S, { hasErrors: u("key", "hidden", "showInSummary", "showInEmail", "showInPDF", "customClass"), children: /* @__PURE__ */ e(C, { id: "d3V6A+", defaultMessage: [{
type: 0,
value: "Display"
}] }) }),
/* @__PURE__ */ e(B, { hasErrors: u("conditional") })
] }),
/* @__PURE__ */ i(n, { children: [
/* @__PURE__ */ e(j, { isManuallySetRef: m, generatedValue: F }),
/* @__PURE__ */ e(D, {}),
/* @__PURE__ */ e(K, {}),
/* @__PURE__ */ e(_, {})
] }),
/* @__PURE__ */ e(n, { children: /* @__PURE__ */ e($, {}) })
] })
] }) })
] }) });
};
J.defaultValues = {
// Display tab
html: "",
key: "",
hidden: !1,
showInSummary: !1,
showInEmail: !1,
showInPDF: !0,
customClass: "",
// Advanced tab
conditional: {
show: void 0,
when: "",
eq: ""
}
};
const U = [{
value: "warning",
label: a({
id: "axygDt",
defaultMessage: [{
type: 0,
value: "Warning"
}]
})
}, {
value: "info",
label: a({
id: "XMV3t2",
defaultMessage: [{
type: 0,
value: "Info"
}]
})
}, {
value: "error",
label: a({
id: "uVVO4b",
defaultMessage: [{
type: 0,
value: "Error"
}]
})
}, {
value: "success",
label: a({
id: "ifG3sd",
defaultMessage: [{
type: 0,
value: "Success"
}]
})
}], _ = () => {
const r = O(), s = U.map((t) => ({
value: t.value,
label: r.formatMessage(t.label)
}));
return /* @__PURE__ */ e(R, { name: "customClass", label: /* @__PURE__ */ e(C, { id: "3h215E", defaultMessage: [{
type: 0,
value: "CSS class"
}] }), options: s, valueProperty: "value", isClearable: !0 });
}, G = () => {
const {
supportedLanguageCodes: r
} = y(E), {
hasAnyError: s
} = T();
return /* @__PURE__ */ i(b, { children: [
/* @__PURE__ */ e(M, { children: r.map((t) => /* @__PURE__ */ e(S, { hasErrors: s(`openForms.translations.${t}`), children: t.toUpperCase() }, t)) }),
r.map((t, m) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(q, { name: `openForms.translations.${t}.html`, required: m === 0, supportsBackendTemplating: !0 }) }, t))
] });
};
export {
J as default
};