@open-formulieren/formio-builder/lib/esm/components/ComponentEditForm.js

An opinionated Formio webform builder for Open Forms

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Form, Formik } from 'formik';
import { cloneDeep, merge } from 'lodash';
import { useContext } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { toFormikValidationSchema } from 'zod-formik-adapter';
import { BuilderContext } from '../context';
import { getRegistryEntry } from '../registry';
import GenericComponentPreview from './ComponentPreview';
const ButtonRow = ({ onSubmit, onCancel, onRemove }) => (_jsxs("div", Object.assign({ style: { marginTop: '10px' } }, { children: [_jsx("button", Object.assign({ type: "submit", className: "btn btn-success", style: { marginRight: '10px' }, onClick: event => {
                event.preventDefault();
                onSubmit();
            } }, { children: _jsx(FormattedMessage, { id: 'ErwGIQ', defaultMessage: [{ type: 0, value: "Save" }] }) })), _jsx("button", Object.assign({ className: "btn btn-secondary", style: { marginRight: '10px' }, onClick: onCancel }, { children: _jsx(FormattedMessage, { id: 'dJNdhr', defaultMessage: [{ type: 0, value: "Cancel" }] }) })), _jsx("button", Object.assign({ className: "btn btn-danger", onClick: onRemove }, { children: _jsx(FormattedMessage, { id: '+XwAuT', defaultMessage: [{ type: 0, value: "Remove" }] }) }))] })));
const ComponentEditForm = ({ isNew, component, builderInfo, onCancel, onRemove, onSubmit, }) => {
    const intl = useIntl();
    const builderContext = useContext(BuilderContext);
    const registryEntry = getRegistryEntry(component);
    const { edit: EditForm, editSchema: zodSchema } = registryEntry;
    const hasPreview = registryEntry.preview.panel !== null;
    let initialValues = 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 = cloneDeep(EditForm.defaultValues);
        initialValues = 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 (_jsx(Formik, Object.assign({ validateOnChange: false, validateOnBlur: true, initialValues: initialValues, initialStatus: { isNew }, onSubmit: (values, { setSubmitting }) => {
            onSubmit(values);
            setSubmitting(false);
        }, validationSchema: toFormikValidationSchema(zodSchema({ intl, builderContext })) }, { children: formik => {
            const component = formik.values;
            return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: "row" }, { children: [_jsx("div", Object.assign({ className: "col col-sm-6" }, { children: _jsx("p", Object.assign({ className: "lead" }, { children: _jsx(FormattedMessage, { id: 'D0hDzV', defaultMessage: [{ type: 1, value: "componentType" }, { type: 0, value: " component" }], values: { componentType: builderInfo.title } }) })) })), _jsx("div", Object.assign({ className: "col col-sm-6" }, { children: _jsx("div", Object.assign({ style: { marginRight: '20px', marginTop: '10px' }, className: "float-right" }, { children: _jsxs("a", Object.assign({ target: "_blank", href: "https://open-forms.readthedocs.io/en/stable/manual/forms/form_fields.html", rel: "nofollower noopener" }, { children: [_jsx("i", { className: "fa fa-window-restore" }), "\u00A0", _jsx(FormattedMessage, { id: 'YBY95E', defaultMessage: [{ type: 0, value: "Manual" }] })] })) })) }))] })), _jsx("div", Object.assign({ className: "row" }, { children: _jsx(Wrapper, Object.assign({ onSubmit: formik.submitForm, onCancel: onCancel, onRemove: onRemove, onComponentChange: formik.setValues, component: component }, { children: _jsxs(Form, Object.assign({ "data-testid": "componentEditForm" }, { children: [_jsx("div", Object.assign({ className: "formio-component formio-component-label-hidden" }, { children: _jsx("div", Object.assign({ className: "formio-form" }, { children: _jsx("div", Object.assign({ className: "formio-component-tabs" }, { children: _jsx(EditForm, { component: component }) })) })) })), _jsx("button", { type: "submit", style: { display: 'none' } })] })) })) }))] }));
        } })));
};
const LayoutWithPreview = ({ children, onSubmit, onCancel, onRemove, onComponentChange, component, }) => (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "col col-sm-6" }, { children: children })), _jsxs("div", Object.assign({ className: "col col-sm-6" }, { children: [_jsx(GenericComponentPreview, { onComponentChange: onComponentChange, component: component }), _jsx(ButtonRow, { onSubmit: onSubmit, onCancel: onCancel, onRemove: onRemove })] }))] }));
const LayoutWithoutPreview = ({ children, onSubmit, onCancel, onRemove, }) => (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ className: "col col-sm-12" }, { children: [children, _jsx(ButtonRow, { onSubmit: onSubmit, onCancel: onCancel, onRemove: onRemove })] })) }));
export default ComponentEditForm;