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

Semantic UI form renderer based on dynamic form generation

import React from 'react';
import { FormEditor } from './form_editor';
import { EditorState } from './editor_state';
import { EditorContext } from './editor_context';
import { propGroup, boundProp, prop, handlerProp } from './editor_common';
import { handle, sourceValue } from '../common';
import { debounce } from '@tomino/toolbelt';
import { onSnapshot } from 'mobx-state-tree';
import { schemaDatasetToJS, formDatasetToJS, setValue, getValue, simpleHandle } from '../helpers';
import { DynamicComponent } from '../wrapper';
import { white } from './themes/white';
import { black } from './themes/black';
const FormEditorComponent = (props) => {
    const context = React.useContext(EditorContext);
    const controlProps = props.formElement.props;
    const ref = React.useRef(null);
    const saveSchema = React.useCallback(debounce((snap) => {
        const serialised = JSON.stringify(schemaDatasetToJS(snap, false));
        if (controlProps.schemaSaveHandler) {
            simpleHandle(props, controlProps.schemaSaveHandler, context, { schema: serialised });
        }
        else if (sourceValue(controlProps.schemaSource)) {
            setValue(props, context, serialised, 'schemaSource');
        }
    }, 1000), [controlProps.schemaSaveHandler, controlProps.schemaSource, props.handlers, props.owner]);
    const saveForm = React.useCallback(debounce((snap) => {
        const serialised = JSON.stringify(formDatasetToJS(snap));
        if (controlProps.formSaveHandler) {
            handle(props.handlers, controlProps.formSaveHandler, props.owner, props, props.formElement, context, { form: serialised });
        }
        else if (controlProps.formSource) {
            setValue(props, context, serialised, 'formSource');
        }
    }, 1000), [controlProps.formSaveHandler, controlProps.formSource, props.handlers, props.owner]);
    if (!controlProps.schemaSource || !controlProps.formSource) {
        return (React.createElement(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 EditorState(context.componentCatalogue, context.editorCatalogue, context.handlers, context.types, context.manager.storage);
    const schemaString = getValue(props, context, 'schemaSource');
    const formString = 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 : black;
    newContext.load({
        schema,
        form
    }, false);
    onSnapshot(newContext.schema, saveSchema);
    onSnapshot(newContext.form, saveForm);
    return (React.createElement(DynamicComponent, Object.assign({}, props),
        React.createElement("div", { ref: ref, style: {
                minHeight: controlProps.editorHeight || '600px',
                resize: 'vertical',
                position: 'relative',
                border: '1px solid',
                overflowY: 'scroll'
            } },
            React.createElement(FormEditor, Object.assign({}, props, { label: "Form Editor", Component: FormEditor, context: newContext, showTopMenu: controlProps.showTopMenu })))));
};
export const FormEditorEditor = {
    Component: FormEditorComponent,
    title: 'Form Editor',
    control: 'FormEditor',
    icon: 'wpforms',
    props: propGroup('Form Editor', {
        formSource: boundProp({}),
        formSaveHandler: handlerProp({}),
        schemaSource: boundProp({}),
        schemaSaveHandler: handlerProp({}),
        maximiseHandler: prop({}),
        showTopMenu: prop({ type: 'boolean' }),
        editorHeight: prop({ type: 'string' }),
        theme: prop({
            control: 'Select',
            props: {
                options: [{ text: 'Light', value: 'light' }, { text: 'Dark', value: 'dark' }]
            }
        })
    })
};
export default FormEditorComponent;
//# sourceMappingURL=form_editor_editor.js.map