@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
55 lines (54 loc) • 2.22 kB
JavaScript
import { jsx as r, jsxs as m } from "react/jsx-runtime";
import { JSONEditor as c } from "@open-formulieren/monaco-json-editor";
import f from "clsx";
import { Formik as v } from "formik";
import { useState as w, useContext as h } from "react";
import { FormattedMessage as y } from "react-intl";
import P from "./PreviewModeToggle.js";
import g from "./error/ErrorBoundary.js";
import { BuilderContext as x } from "../context.js";
import { getRegistryEntry as C } from "../registry/index.js";
import { hasOwnProperty as d } from "../types/index.js";
const N = ({
component: e,
initialValues: a,
onComponentChange: i,
children: l
}) => {
const [t, o] = w("rich"), n = h(x);
return /* @__PURE__ */ m("div", { className: "card panel preview-panel", children: [
/* @__PURE__ */ m("div", { className: "card-header d-flex justify-content-between align-items-center", children: [
/* @__PURE__ */ r("h4", { className: "card-title mb-0", children: /* @__PURE__ */ r(y, { id: "Qjl92W", defaultMessage: [{
type: 0,
value: "Preview"
}] }) }),
/* @__PURE__ */ r(P, { previewMode: t, setPreviewMode: o })
] }),
t === "JSON" ? /* @__PURE__ */ r(c, { wrapperProps: {
className: "json-editor"
}, value: e, onChange: i, theme: n.theme }) : /* @__PURE__ */ r("div", { className: "card-body", children: /* @__PURE__ */ r(v, { enableReinitialize: !0, initialValues: a, onSubmit: () => {
throw new Error("Can't submit preview form");
}, children: /* @__PURE__ */ r("div", { className: f("component-preview", `component-preview--${e.type}`), "data-testid": "componentPreview", children: /* @__PURE__ */ r(g, { children: l }) }) }) })
] });
}, J = ({
component: e,
onComponentChange: a
}) => {
const {
key: i
} = e, l = C(e), {
preview: {
panel: t
},
defaultValue: o = ""
} = l;
if (t === null)
return null;
const n = d(e, "multiple") ? e.multiple : !1, s = d(e, "defaultValue") ? e.defaultValue : o, p = n ? s ?? [] : s ?? o, u = i ? {
[i]: p
} : {};
return /* @__PURE__ */ r(N, { onComponentChange: a, component: e, initialValues: u, children: /* @__PURE__ */ r(t, { component: e }) });
};
export {
J as default
};