@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
126 lines • 7.47 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_test_renderer_1 = tslib_1.__importDefault(require("react-test-renderer"));
const propertyHandlers = tslib_1.__importStar(require("../../editor/properties/property_panel.handlers"));
const semantic_ui_react_1 = require("semantic-ui-react");
const dynamic_form_1 = require("@tomino/dynamic-form");
const mobx_react_1 = require("mobx-react");
require("prismjs/themes/prism.css");
require("prismjs/themes/prism-dark.css");
const form_view_1 = require("../../form_view");
const catalogue_editor_1 = require("../../catalogue_editor");
const tool_box_1 = require("../../editor/toolbox/tool_box");
const form_view_2 = require("../form_view");
const catalogue_1 = require("../../catalogue");
const property_view_1 = require("../../editor/properties/property_view");
const error_boundary_1 = require("../../vanilla/error_boundary");
const context_1 = require("../../context");
const editor_context_1 = require("../../editor/editor_context");
const editor_state_1 = require("../../editor/editor_state");
const catalogue_2 = require("../../editor/catalogue");
const catalogue_editor_2 = require("../../editor/catalogue_editor");
const helpers_1 = require("../../helpers");
const mobx_1 = require("mobx");
const outline_view_1 = require("../../editor/outline/outline_view");
const editor_styles_1 = require("../../editor/editor_styles");
const componentCatalogue = helpers_1.merge(catalogue_1.catalogue, catalogue_2.catalogue);
const editorComponentCatalogue = helpers_1.merge(catalogue_editor_1.catalogueEditor, catalogue_editor_2.catalogueEditor);
exports.d = 2;
function testStandard(formDefinition, schema, formData) {
const component = prepareComponent(formDefinition, schema, formData, {
addEditor: false,
showReadOnly: false
});
const wrapper = react_test_renderer_1.default.create(component());
require('chai')
.expect(wrapper)
.toMatchSnapshot();
}
exports.testStandard = testStandard;
function testReadonly(formDefinition, schema, formData) {
const component = prepareComponent(formDefinition, schema, formData, {
addEditor: false,
showReadOnly: true,
showStandard: false
});
const wrapper = react_test_renderer_1.default.create(component());
require('chai')
.expect(wrapper)
.toMatchSnapshot();
}
exports.testReadonly = testReadonly;
function testEditor(formDefinition, schema, formData) {
const component = prepareComponent(formDefinition, schema, formData, {
addEditor: true,
showReadOnly: false,
showStandard: false,
showProperties: false,
showToolBox: false
});
const wrapper = react_test_renderer_1.default.create(component());
require('chai')
.expect(wrapper)
.toMatchSnapshot();
}
exports.testEditor = testEditor;
function prepareComponent(formDefinition, schema, data, { addEditor = false, showToolBox = true, showReadOnly = false, showStandard = true, showProperties = true, showOutline = false, validate = false, handlers = {} } = {}) {
return function component() {
const form = new dynamic_form_1.FormModel(formDefinition, schema, data);
let context = null;
if (addEditor) {
context = new editor_state_1.EditorState(componentCatalogue, editorComponentCatalogue, handlers);
context.load({
form: form.formDefinition,
schema
}, false);
if (validate) {
form.validateWithReport();
}
}
return (react_1.default.createElement(TestComponent, { form: form, context: context, handlers: handlers, showToolbox: showToolBox, showOutline: showOutline, showStandard: showStandard, showReadOnly: showReadOnly, showProperties: showProperties }));
};
}
exports.prepareComponent = prepareComponent;
let TestComponent = class TestComponent extends react_1.default.Component {
render() {
const { form, context, handlers } = this.props;
return (react_1.default.createElement(error_boundary_1.ErrorBoundary, null,
react_1.default.createElement(context_1.Context.Provider, { value: {
auth: mobx_1.observable({ user: null }),
alert: null,
app: {},
authToken: null
} },
react_1.default.createElement(semantic_ui_react_1.Segment, null,
this.props.showStandard && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(semantic_ui_react_1.Header, { content: "Standard", dividing: true }),
react_1.default.createElement(form_view_2.SemanticFormView, { formElement: form, owner: form.dataSet, readOnly: false, handlers: handlers, catalogue: componentCatalogue }))),
this.props.showReadonly && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(semantic_ui_react_1.Header, { content: "Readonly", dividing: true }),
react_1.default.createElement(form_view_2.SemanticFormView, { formElement: form, owner: form.dataSet, readOnly: true, handlers: handlers, catalogue: componentCatalogue }))),
context && (react_1.default.createElement(editor_context_1.EditorContext.Provider, { value: context },
react_1.default.createElement(semantic_ui_react_1.Header, { content: "Editor", dividing: true }),
react_1.default.createElement("div", { style: { display: 'flex' } },
this.props.showToolbox && (react_1.default.createElement("div", { style: { position: 'relative', flexBasis: '200px', paddingRight: '12px' } },
react_1.default.createElement(tool_box_1.ToolBox, { catalogue: catalogue_editor_1.catalogueEditor }))),
this.props.showOutline && (react_1.default.createElement("div", { style: { position: 'relative', flexBasis: '200px', paddingRight: '12px' } },
react_1.default.createElement(editor_styles_1.List, null,
react_1.default.createElement(outline_view_1.OutlineView, { catalogue: catalogue_editor_1.catalogueEditor })))),
react_1.default.createElement("div", { style: { flex: '1' } },
react_1.default.createElement(form_view_1.FormView, { formElement: context.form, owner: form.dataSet, readOnly: false, handlers: handlers, catalogue: editorComponentCatalogue })),
context && this.props.showProperties && (react_1.default.createElement("div", { style: {
padding: '12px',
flexBasis: '350px',
minHeight: '600px',
position: 'relative'
} },
react_1.default.createElement(property_view_1.PropertyEditor, { handlers: propertyHandlers }))))))))));
}
};
TestComponent = tslib_1.__decorate([
mobx_react_1.observer
], TestComponent);
exports.TestComponent = TestComponent;
//# sourceMappingURL=common.js.map