@tomino/dynamic-form-semantic-ui/dist/cjs/editor/form_editor_editor.js

Semantic UI form renderer based on dynamic form generation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const form_editor_1 = require("./form_editor");
const editor_state_1 = require("./editor_state");
const editor_context_1 = require("./editor_context");
const editor_common_1 = require("./editor_common");
const common_1 = require("../common");
const toolbelt_1 = require("@tomino/toolbelt");
const mobx_state_tree_1 = require("mobx-state-tree");
const helpers_1 = require("../helpers");
const wrapper_1 = require("../wrapper");
const white_1 = require("./themes/white");
const black_1 = require("./themes/black");
const FormEditorComponent = (props) => {
    const context = react_1.default.useContext(editor_context_1.EditorContext);
    const controlProps = props.formElement.props;
    const ref = react_1.default.useRef(null);
    const saveSchema = react_1.default.useCallback(toolbelt_1.debounce((snap) => {
        const serialised = JSON.stringify(helpers_1.schemaDatasetToJS(snap, false));
        if (controlProps.schemaSaveHandler) {
            helpers_1.simpleHandle(props, controlProps.schemaSaveHandler, context, { schema: serialised });
        }
        else if (common_1.sourceValue(controlProps.schemaSource)) {
            helpers_1.setValue(props, context, serialised, 'schemaSource');
        }
    }, 1000), [controlProps.schemaSaveHandler, controlProps.schemaSource, props.handlers, props.owner]);
    const saveForm = react_1.default.useCallback(toolbelt_1.debounce((snap) => {
        const serialised = JSON.stringify(helpers_1.formDatasetToJS(snap));
        if (controlProps.formSaveHandler) {
            common_1.handle(props.handlers, controlProps.formSaveHandler, props.owner, props, props.formElement, context, { form: serialised });
        }
        else if (controlProps.formSource) {
            helpers_1.setValue(props, context, serialised, 'formSource');
        }
    }, 1000), [controlProps.formSaveHandler, controlProps.formSource, props.handlers, props.owner]);
    if (!controlProps.schemaSource || !controlProps.formSource) {
        return (react_1.default.createElement(wrapper_1.DynamicComponent, Object.assign({}, props), "Please bind the editor to form and schema sources or implement their handlers."));
    }
    if (controlProps.maximiseHandler) {
        window[controlProps.maximiseHandler] = function () {
            const style = ref.current.style;
            if (style.position === 'fixed') {
                style.position = 'relative';
            }
            else {
                style.position = 'fixed';
                style.top = '0px';
                style.left = '0px';
                style.right = '0px';
                style.bottom = '0px';
                style.zIndex = 10000;
            }
        };
    }
    const newContext = new editor_state_1.EditorState(context.componentCatalogue, context.editorCatalogue, context.handlers, context.types, context.manager.storage);
    const schemaString = helpers_1.getValue(props, context, 'schemaSource');
    const formString = helpers_1.getValue(props, context, 'formSource');
    const schema = schemaString ? JSON.parse(schemaString) : { type: 'object', properties: {} };
    const form = formString ? JSON.parse(formString) : { control: 'Form', elements: [] };
    newContext.theme = controlProps.theme === 'light' ? white_1.white : black_1.black;
    newContext.load({
        schema,
        form
    }, false);
    mobx_state_tree_1.onSnapshot(newContext.schema, saveSchema);
    mobx_state_tree_1.onSnapshot(newContext.form, saveForm);
    return (react_1.default.createElement(wrapper_1.DynamicComponent, Object.assign({}, props),
        react_1.default.createElement("div", { ref: ref, style: {
                minHeight: controlProps.editorHeight || '600px',
                resize: 'vertical',
                position: 'relative',
                border: '1px solid',
                overflowY: 'scroll'
            } },
            react_1.default.createElement(form_editor_1.FormEditor, Object.assign({}, props, { label: "Form Editor", Component: form_editor_1.FormEditor, context: newContext, showTopMenu: controlProps.showTopMenu })))));
};
exports.FormEditorEditor = {
    Component: FormEditorComponent,
    title: 'Form Editor',
    control: 'FormEditor',
    icon: 'wpforms',
    props: editor_common_1.propGroup('Form Editor', {
        formSource: editor_common_1.boundProp({}),
        formSaveHandler: editor_common_1.handlerProp({}),
        schemaSource: editor_common_1.boundProp({}),
        schemaSaveHandler: editor_common_1.handlerProp({}),
        maximiseHandler: editor_common_1.prop({}),
        showTopMenu: editor_common_1.prop({ type: 'boolean' }),
        editorHeight: editor_common_1.prop({ type: 'string' }),
        theme: editor_common_1.prop({
            control: 'Select',
            props: {
                options: [{ text: 'Light', value: 'light' }, { text: 'Dark', value: 'dark' }]
            }
        })
    })
};
exports.default = FormEditorComponent;
//# sourceMappingURL=form_editor_editor.js.map