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

Semantic UI form renderer based on dynamic form generation

import * as styles from '../editor_styles';
import { List } from '../editor_styles';
import { PaneContent } from '../editor_styles';
import React from 'react';
import names from 'classnames';
import { SplitPane } from 'react-multi-split-pane';
import { PropertyEditor } from '../properties/property_view';
import { EditorContext } from '../editor_context';
import { EditorState } from '../editor_state';
import { DatasetElements } from './dataset_elements';
import { DatasetTypes } from './dataset_types';
import { onSnapshot } from 'mobx-state-tree';
import { debounce } from '@tomino/toolbelt';
import { schemaDatasetToJS, setValue, getValue } from '../../helpers';
import { DynamicComponent } from '../../wrapper';
const emptySchema = JSON.stringify({ type: 'object', properties: {} });
function getSize(key, def) {
    try {
        return JSON.parse(localStorage.getItem(key)) || def;
    }
    catch { }
    return def;
}
export const DatasetEditor = controlProps => {
    const context = new EditorState();
    const props = controlProps.formElement.props || {};
    let schema;
    const saveSchema = React.useCallback(debounce((snap) => {
        setValue(controlProps, context, JSON.stringify(schemaDatasetToJS(snap, false)), 'source');
    }, 1000), [controlProps.owner, controlProps.formElement]);
    try {
        schema = JSON.parse(getValue(controlProps, context, 'source', emptySchema));
        context.load({
            schema
        }, false);
    }
    catch (ex) {
        return React.createElement("div", null,
            "Error parsing schema: ",
            ex.message);
    }
    onSnapshot(context.schema, saveSchema);
    return (React.createElement(DynamicComponent, Object.assign({}, controlProps, { style: {
            minHeight: props.height || '400px',
            resize: 'vertical',
            position: 'relative',
            border: '1px solid',
            overflowY: 'scroll'
        } }),
        React.createElement(EditorContext.Provider, { value: context },
            React.createElement(SplitPane, { className: names(styles.editorGrid), split: "vertical", minSize: 100, defaultSize: getSize('CORPIX.s-split', [280]), onDragFinished: size => localStorage.setItem('CORPIX.s-split', JSON.stringify(size)) },
                React.createElement(PaneContent, null,
                    React.createElement(List, null, props.allowCustomTypes ? (React.createElement(SplitPane, { className: "dataPanes", split: "horizontal", minSize: 100, defaultSize: getSize('CORPIX.s1-split-tools', [280]), onDragFinished: size => localStorage.setItem('CORPIX.s1-split-tools', JSON.stringify(size)) },
                        React.createElement(DatasetElements, { schema: context.schema, types: context.types, owner: context.data }),
                        React.createElement(DatasetTypes, { schema: context.schema, types: context.types }))) : (React.createElement(DatasetElements, { schema: context.schema, types: context.types, owner: context.data })))),
                React.createElement(PropertyEditor, null)))));
};
//# sourceMappingURL=dataset_editor.js.map