@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
49 lines (48 loc) • 6.33 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const formik_1 = require("formik");
const lodash_1 = require("lodash");
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const zod_formik_adapter_1 = require("zod-formik-adapter");
const context_1 = require("../context");
const registry_1 = require("../registry");
const ComponentPreview_1 = __importDefault(require("./ComponentPreview"));
const ButtonRow = ({ onSubmit, onCancel, onRemove }) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { marginTop: '10px' } }, { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ type: "submit", className: "btn btn-success", style: { marginRight: '10px' }, onClick: event => {
event.preventDefault();
onSubmit();
} }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ErwGIQ', defaultMessage: [{ type: 0, value: "Save" }] }) })), (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "btn btn-secondary", style: { marginRight: '10px' }, onClick: onCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'dJNdhr', defaultMessage: [{ type: 0, value: "Cancel" }] }) })), (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "btn btn-danger", onClick: onRemove }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: '+XwAuT', defaultMessage: [{ type: 0, value: "Remove" }] }) }))] })));
const ComponentEditForm = ({ isNew, component, builderInfo, onCancel, onRemove, onSubmit, }) => {
const intl = (0, react_intl_1.useIntl)();
const builderContext = (0, react_1.useContext)(context_1.BuilderContext);
const registryEntry = (0, registry_1.getRegistryEntry)(component);
const { edit: EditForm, editSchema: zodSchema } = registryEntry;
const hasPreview = registryEntry.preview.panel !== null;
let initialValues = (0, lodash_1.cloneDeep)(component);
if (isNew) {
// Formio.js mutates components when adding children (like fieldset layout component),
// which apparently goes all the way to our default value definition, which is
// supposed to be static.
// See https://github.com/open-formulieren/open-forms/issues/3761 for the problems
// it causes.
const defaultValues = (0, lodash_1.cloneDeep)(EditForm.defaultValues);
initialValues = (0, lodash_1.merge)(defaultValues, initialValues);
}
const Wrapper = hasPreview ? LayoutWithPreview : LayoutWithoutPreview;
// Markup (mostly) taken from formio's default templates - there's room for improvement here
// to de-bootstrapify it.
return ((0, jsx_runtime_1.jsx)(formik_1.Formik, Object.assign({ validateOnChange: false, validateOnBlur: true, initialValues: initialValues, initialStatus: { isNew }, onSubmit: (values, { setSubmitting }) => {
onSubmit(values);
setSubmitting(false);
}, validationSchema: (0, zod_formik_adapter_1.toFormikValidationSchema)(zodSchema({ intl, builderContext })) }, { children: formik => {
const component = formik.values;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "row" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col col-sm-6" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "lead" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'D0hDzV', defaultMessage: [{ type: 1, value: "componentType" }, { type: 0, value: " component" }], values: { componentType: builderInfo.title } }) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col col-sm-6" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { marginRight: '20px', marginTop: '10px' }, className: "float-right" }, { children: (0, jsx_runtime_1.jsxs)("a", Object.assign({ target: "_blank", href: "https://open-forms.readthedocs.io/en/stable/manual/forms/form_fields.html", rel: "nofollower noopener" }, { children: [(0, jsx_runtime_1.jsx)("i", { className: "fa fa-window-restore" }), "\u00A0", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'YBY95E', defaultMessage: [{ type: 0, value: "Manual" }] })] })) })) }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "row" }, { children: (0, jsx_runtime_1.jsx)(Wrapper, Object.assign({ onSubmit: formik.submitForm, onCancel: onCancel, onRemove: onRemove, onComponentChange: formik.setValues, component: component }, { children: (0, jsx_runtime_1.jsxs)(formik_1.Form, Object.assign({ "data-testid": "componentEditForm" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "formio-component formio-component-label-hidden" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "formio-form" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "formio-component-tabs" }, { children: (0, jsx_runtime_1.jsx)(EditForm, { component: component }) })) })) })), (0, jsx_runtime_1.jsx)("button", { type: "submit", style: { display: 'none' } })] })) })) }))] }));
} })));
};
const LayoutWithPreview = ({ children, onSubmit, onCancel, onRemove, onComponentChange, component, }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col col-sm-6" }, { children: children })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col col-sm-6" }, { children: [(0, jsx_runtime_1.jsx)(ComponentPreview_1.default, { onComponentChange: onComponentChange, component: component }), (0, jsx_runtime_1.jsx)(ButtonRow, { onSubmit: onSubmit, onCancel: onCancel, onRemove: onRemove })] }))] }));
const LayoutWithoutPreview = ({ children, onSubmit, onCancel, onRemove, }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col col-sm-12" }, { children: [children, (0, jsx_runtime_1.jsx)(ButtonRow, { onSubmit: onSubmit, onCancel: onCancel, onRemove: onRemove })] })) }));
exports.default = ComponentEditForm;