@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
61 lines • 3.71 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const styles = tslib_1.__importStar(require("../editor_styles"));
const editor_styles_1 = require("../editor_styles");
const editor_styles_2 = require("../editor_styles");
const react_1 = tslib_1.__importDefault(require("react"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_multi_split_pane_1 = require("react-multi-split-pane");
const property_view_1 = require("../properties/property_view");
const editor_context_1 = require("../editor_context");
const editor_state_1 = require("../editor_state");
const dataset_elements_1 = require("./dataset_elements");
const dataset_types_1 = require("./dataset_types");
const mobx_state_tree_1 = require("mobx-state-tree");
const toolbelt_1 = require("@tomino/toolbelt");
const helpers_1 = require("../../helpers");
const wrapper_1 = require("../../wrapper");
const emptySchema = JSON.stringify({ type: 'object', properties: {} });
function getSize(key, def) {
try {
return JSON.parse(localStorage.getItem(key)) || def;
}
catch { }
return def;
}
exports.DatasetEditor = controlProps => {
const context = new editor_state_1.EditorState();
const props = controlProps.formElement.props || {};
let schema;
const saveSchema = react_1.default.useCallback(toolbelt_1.debounce((snap) => {
helpers_1.setValue(controlProps, context, JSON.stringify(helpers_1.schemaDatasetToJS(snap, false)), 'source');
}, 1000), [controlProps.owner, controlProps.formElement]);
try {
schema = JSON.parse(helpers_1.getValue(controlProps, context, 'source', emptySchema));
context.load({
schema
}, false);
}
catch (ex) {
return react_1.default.createElement("div", null,
"Error parsing schema: ",
ex.message);
}
mobx_state_tree_1.onSnapshot(context.schema, saveSchema);
return (react_1.default.createElement(wrapper_1.DynamicComponent, Object.assign({}, controlProps, { style: {
minHeight: props.height || '400px',
resize: 'vertical',
position: 'relative',
border: '1px solid',
overflowY: 'scroll'
} }),
react_1.default.createElement(editor_context_1.EditorContext.Provider, { value: context },
react_1.default.createElement(react_multi_split_pane_1.SplitPane, { className: classnames_1.default(styles.editorGrid), split: "vertical", minSize: 100, defaultSize: getSize('CORPIX.s-split', [280]), onDragFinished: size => localStorage.setItem('CORPIX.s-split', JSON.stringify(size)) },
react_1.default.createElement(editor_styles_2.PaneContent, null,
react_1.default.createElement(editor_styles_1.List, null, props.allowCustomTypes ? (react_1.default.createElement(react_multi_split_pane_1.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_1.default.createElement(dataset_elements_1.DatasetElements, { schema: context.schema, types: context.types, owner: context.data }),
react_1.default.createElement(dataset_types_1.DatasetTypes, { schema: context.schema, types: context.types }))) : (react_1.default.createElement(dataset_elements_1.DatasetElements, { schema: context.schema, types: context.types, owner: context.data })))),
react_1.default.createElement(property_view_1.PropertyEditor, null)))));
};
//# sourceMappingURL=dataset_editor.js.map