@formio/react/lib/components/FormBuilder.js

React renderer for form.io forms.

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormBuilder = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const js_1 = require("@formio/js");
const structured_clone_1 = __importDefault(require("@ungap/structured-clone"));
const toggleEventHandlers = (builder, handlers, shouldAttach = true) => {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    const fn = shouldAttach ? 'on' : 'off';
    const { onSaveComponent, onEditComponent, onUpdateComponent, onDeleteComponent, onChange, } = handlers;
    (_a = builder.instance) === null || _a === void 0 ? void 0 : _a[fn]('saveComponent', (component, original, parent, path, index, isNew, originalComponentSchema) => {
        var _a;
        onSaveComponent === null || onSaveComponent === void 0 ? void 0 : onSaveComponent(component, parent, index, originalComponentSchema);
        onChange === null || onChange === void 0 ? void 0 : onChange((0, structured_clone_1.default)((_a = builder.instance) === null || _a === void 0 ? void 0 : _a.form));
    });
    (_b = builder.instance) === null || _b === void 0 ? void 0 : _b[fn]('updateComponent', (component) => {
        onUpdateComponent === null || onUpdateComponent === void 0 ? void 0 : onUpdateComponent(component);
        onChange === null || onChange === void 0 ? void 0 : onChange((0, structured_clone_1.default)(builder.instance.form));
    });
    (_c = builder.instance) === null || _c === void 0 ? void 0 : _c[fn]('removeComponent', (component, parent, path, index) => {
        var _a;
        onDeleteComponent === null || onDeleteComponent === void 0 ? void 0 : onDeleteComponent(component, parent, path, index);
        onChange === null || onChange === void 0 ? void 0 : onChange((0, structured_clone_1.default)((_a = builder.instance) === null || _a === void 0 ? void 0 : _a.form));
    });
    (_d = builder.instance) === null || _d === void 0 ? void 0 : _d[fn]('cancelComponent', (component) => {
        var _a;
        onUpdateComponent === null || onUpdateComponent === void 0 ? void 0 : onUpdateComponent(component);
        onChange === null || onChange === void 0 ? void 0 : onChange((0, structured_clone_1.default)((_a = builder.instance) === null || _a === void 0 ? void 0 : _a.form));
    });
    (_e = builder.instance) === null || _e === void 0 ? void 0 : _e[fn]('editComponent', (component) => {
        var _a;
        onEditComponent === null || onEditComponent === void 0 ? void 0 : onEditComponent(component);
        onChange === null || onChange === void 0 ? void 0 : onChange((0, structured_clone_1.default)((_a = builder.instance) === null || _a === void 0 ? void 0 : _a.form));
    });
    (_f = builder.instance) === null || _f === void 0 ? void 0 : _f[fn]('addComponent', () => {
        var _a;
        onChange === null || onChange === void 0 ? void 0 : onChange((0, structured_clone_1.default)((_a = builder.instance) === null || _a === void 0 ? void 0 : _a.form));
    });
    (_g = builder.instance) === null || _g === void 0 ? void 0 : _g[fn]('pdfUploaded', () => {
        var _a;
        onChange === null || onChange === void 0 ? void 0 : onChange((0, structured_clone_1.default)((_a = builder.instance) === null || _a === void 0 ? void 0 : _a.form));
    });
    (_h = builder.instance) === null || _h === void 0 ? void 0 : _h[fn]('setDisplay', () => {
        var _a;
        onChange === null || onChange === void 0 ? void 0 : onChange((0, structured_clone_1.default)((_a = builder.instance) === null || _a === void 0 ? void 0 : _a.form));
    });
};
const createBuilderInstance = async (BuilderConstructor, formSource, element, options = {}) => {
    const builder = BuilderConstructor
        ? new BuilderConstructor(element, formSource, options)
        : new js_1.FormBuilder(element, formSource, options);
    await builder.ready;
    return builder;
};
const FormBuilder = (_a) => {
    var { options, Builder, initialForm, onBuilderReady } = _a, handlers = __rest(_a, ["options", "Builder", "initialForm", "onBuilderReady"]);
    const renderElement = (0, react_1.useRef)(null);
    const [builderInstance, setBuilderInstance] = (0, react_1.useState)(null);
    const isMounted = (0, react_1.useRef)(false);
    const currentFormSourceJsonProp = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(() => {
        return () => {
            var _a;
            if (builderInstance) {
                (_a = builderInstance.instance) === null || _a === void 0 ? void 0 : _a.destroy(true);
                builderInstance.destroy(true);
            }
        };
    }, [builderInstance]);
    (0, react_1.useEffect)(() => {
        isMounted.current = true;
        return () => {
            isMounted.current = false;
        };
    }, []);
    (0, react_1.useEffect)(() => {
        if (typeof initialForm === 'object' &&
            currentFormSourceJsonProp.current &&
            js_1.Utils._.isEqual(currentFormSourceJsonProp.current, initialForm)) {
            return;
        }
        const createInstance = async () => {
            var _a;
            if (!renderElement.current) {
                console.warn('FormBuilder render element not found, cannot render builder.');
                return;
            }
            currentFormSourceJsonProp.current =
                initialForm && typeof initialForm !== 'string'
                    ? (0, structured_clone_1.default)(initialForm)
                    : null;
            const builder = await createBuilderInstance(Builder, currentFormSourceJsonProp.current || initialForm, renderElement.current, options);
            if (builder) {
                if (!isMounted.current) {
                    (_a = builder.instance) === null || _a === void 0 ? void 0 : _a.destroy(true);
                    builder.destroy(true);
                }
                if (onBuilderReady) {
                    onBuilderReady(builder);
                }
                setBuilderInstance((prevInstance) => {
                    var _a;
                    if (prevInstance) {
                        (_a = prevInstance.instance) === null || _a === void 0 ? void 0 : _a.destroy(true);
                        prevInstance.destroy(true);
                    }
                    return builder;
                });
            }
            else {
                console.warn('Failed to create form builder instance');
            }
        };
        createInstance();
    }, [Builder, initialForm, onBuilderReady, options]);
    (0, react_1.useEffect)(() => {
        if (builderInstance && Object.keys(handlers).length > 0) {
            toggleEventHandlers(builderInstance, handlers);
        }
        return () => {
            if (builderInstance) {
                toggleEventHandlers(builderInstance, handlers, false);
            }
        };
    }, [builderInstance, handlers]);
    return (0, jsx_runtime_1.jsx)("div", { ref: renderElement });
};
exports.FormBuilder = FormBuilder;