@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
120 lines (119 loc) • 4.49 kB
JavaScript
import { jsx as e, jsxs as n, Fragment as p } from "react/jsx-runtime";
import { Formik as C, Form as x } from "formik";
import { cloneDeep as f, merge as F } from "lodash";
import { useContext as S } from "react";
import { useIntl as E, FormattedMessage as r } from "react-intl";
import { toFormikValidationSchema as M } from "zod-formik-adapter";
import { BuilderContext as R } from "../context.js";
import { getRegistryEntry as V } from "../registry/index.js";
import T from "./ComponentPreview.js";
const v = ({
onSubmit: t,
onCancel: o,
onRemove: a
}) => /* @__PURE__ */ n("div", { style: {
marginTop: "10px"
}, children: [
/* @__PURE__ */ e("button", { type: "submit", className: "btn btn-success", style: {
marginRight: "10px"
}, onClick: (l) => {
l.preventDefault(), t();
}, children: /* @__PURE__ */ e(r, { id: "ErwGIQ", defaultMessage: [{
type: 0,
value: "Save"
}] }) }),
/* @__PURE__ */ e("button", { className: "btn btn-secondary", style: {
marginRight: "10px"
}, onClick: o, children: /* @__PURE__ */ e(r, { id: "dJNdhr", defaultMessage: [{
type: 0,
value: "Cancel"
}] }) }),
/* @__PURE__ */ e("button", { className: "btn btn-danger", onClick: a, children: /* @__PURE__ */ e(r, { id: "+XwAuT", defaultMessage: [{
type: 0,
value: "Remove"
}] }) })
] }), Y = ({
isNew: t,
component: o,
onCancel: a,
onRemove: l,
onSubmit: m
}) => {
const c = E(), g = S(R), u = V(o.type), {
edit: h,
editSchema: y,
builderInfo: b
} = u, N = u.preview.panel !== null;
let d = f(o);
if (t) {
const i = f(h.defaultValues);
d = F(i, d);
}
const w = N ? k : B;
return /* @__PURE__ */ e(C, { validateOnChange: !1, validateOnBlur: !0, initialValues: d, initialStatus: {
isNew: t
}, onSubmit: (i, {
setSubmitting: s
}) => {
m(i), s(!1);
}, validationSchema: M(y({
intl: c,
builderContext: g
})), children: (i) => {
const s = i.values;
return /* @__PURE__ */ n(p, { children: [
/* @__PURE__ */ n("div", { className: "row", children: [
/* @__PURE__ */ e("div", { className: "col col-sm-6", children: /* @__PURE__ */ e("p", { className: "lead", children: /* @__PURE__ */ e(r, { id: "D0hDzV", defaultMessage: [{
type: 1,
value: "componentType"
}, {
type: 0,
value: " component"
}], values: {
componentType: b.title
} }) }) }),
/* @__PURE__ */ e("div", { className: "col col-sm-6", children: /* @__PURE__ */ e("div", { style: {
marginRight: "20px",
marginTop: "10px"
}, className: "float-right", children: /* @__PURE__ */ n("a", { target: "_blank", href: "https://open-forms.readthedocs.io/en/stable/manual/forms/form_fields.html", rel: "nofollower noopener noreferrer", children: [
/* @__PURE__ */ e("i", { className: "fa fa-window-restore" }),
" ",
/* @__PURE__ */ e(r, { id: "YBY95E", defaultMessage: [{
type: 0,
value: "Manual"
}] })
] }) }) })
] }),
/* @__PURE__ */ e("div", { className: "row", children: /* @__PURE__ */ e(w, { onSubmit: i.submitForm, onCancel: a, onRemove: l, onComponentChange: i.setValues, component: s, children: /* @__PURE__ */ n(x, { "data-testid": "componentEditForm", children: [
/* @__PURE__ */ e("div", { className: "formio-component formio-component-label-hidden", children: /* @__PURE__ */ e("div", { className: "formio-form", children: /* @__PURE__ */ e("div", { className: "formio-component-tabs", children: /* @__PURE__ */ e(h, { component: s }) }) }) }),
/* @__PURE__ */ e("button", { type: "submit", style: {
display: "none"
} })
] }) }) })
] });
} });
}, k = ({
children: t,
onSubmit: o,
onCancel: a,
onRemove: l,
onComponentChange: m,
component: c
}) => /* @__PURE__ */ n(p, { children: [
/* @__PURE__ */ e("div", { className: "col col-sm-6", children: t }),
/* @__PURE__ */ n("div", { className: "col col-sm-6", children: [
/* @__PURE__ */ e(T, { onComponentChange: m, component: c }),
/* @__PURE__ */ e(v, { onSubmit: o, onCancel: a, onRemove: l })
] })
] }), B = ({
children: t,
onSubmit: o,
onCancel: a,
onRemove: l
}) => /* @__PURE__ */ e(p, { children: /* @__PURE__ */ n("div", { className: "col col-sm-12", children: [
t,
/* @__PURE__ */ e(v, { onSubmit: o, onCancel: a, onRemove: l })
] }) });
export {
Y as default
};