@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
120 lines • 6.45 kB
JavaScript
import * as tslib_1 from "tslib";
import React from 'react';
import renderer from 'react-test-renderer';
import * as propertyHandlers from '../../editor/properties/property_panel.handlers';
import { Header, Segment } from 'semantic-ui-react';
import { FormModel } from '@tomino/dynamic-form';
import { observer } from 'mobx-react';
import 'prismjs/themes/prism.css';
import 'prismjs/themes/prism-dark.css';
import { FormView } from '../../form_view';
import { catalogueEditor } from '../../catalogue_editor';
import { ToolBox } from '../../editor/toolbox/tool_box';
import { SemanticFormView } from '../form_view';
import { catalogue } from '../../catalogue';
import { PropertyEditor } from '../../editor/properties/property_view';
import { ErrorBoundary } from '../../vanilla/error_boundary';
import { Context } from '../../context';
import { EditorContext } from '../../editor/editor_context';
import { EditorState } from '../../editor/editor_state';
import { catalogue as editorCatalogue } from '../../editor/catalogue';
import { catalogueEditor as editorCatalogueEditor } from '../../editor/catalogue_editor';
import { merge } from '../../helpers';
import { observable } from 'mobx';
import { OutlineView } from '../../editor/outline/outline_view';
import { List } from '../../editor/editor_styles';
const componentCatalogue = merge(catalogue, editorCatalogue);
const editorComponentCatalogue = merge(catalogueEditor, editorCatalogueEditor);
export const d = 2;
export function testStandard(formDefinition, schema, formData) {
const component = prepareComponent(formDefinition, schema, formData, {
addEditor: false,
showReadOnly: false
});
const wrapper = renderer.create(component());
require('chai')
.expect(wrapper)
.toMatchSnapshot();
}
export function testReadonly(formDefinition, schema, formData) {
const component = prepareComponent(formDefinition, schema, formData, {
addEditor: false,
showReadOnly: true,
showStandard: false
});
const wrapper = renderer.create(component());
require('chai')
.expect(wrapper)
.toMatchSnapshot();
}
export function testEditor(formDefinition, schema, formData) {
const component = prepareComponent(formDefinition, schema, formData, {
addEditor: true,
showReadOnly: false,
showStandard: false,
showProperties: false,
showToolBox: false
});
const wrapper = renderer.create(component());
require('chai')
.expect(wrapper)
.toMatchSnapshot();
}
export 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 FormModel(formDefinition, schema, data);
let context = null;
if (addEditor) {
context = new EditorState(componentCatalogue, editorComponentCatalogue, handlers);
context.load({
form: form.formDefinition,
schema
}, false);
if (validate) {
form.validateWithReport();
}
}
return (React.createElement(TestComponent, { form: form, context: context, handlers: handlers, showToolbox: showToolBox, showOutline: showOutline, showStandard: showStandard, showReadOnly: showReadOnly, showProperties: showProperties }));
};
}
let TestComponent = class TestComponent extends React.Component {
render() {
const { form, context, handlers } = this.props;
return (React.createElement(ErrorBoundary, null,
React.createElement(Context.Provider, { value: {
auth: observable({ user: null }),
alert: null,
app: {},
authToken: null
} },
React.createElement(Segment, null,
this.props.showStandard && (React.createElement(React.Fragment, null,
React.createElement(Header, { content: "Standard", dividing: true }),
React.createElement(SemanticFormView, { formElement: form, owner: form.dataSet, readOnly: false, handlers: handlers, catalogue: componentCatalogue }))),
this.props.showReadonly && (React.createElement(React.Fragment, null,
React.createElement(Header, { content: "Readonly", dividing: true }),
React.createElement(SemanticFormView, { formElement: form, owner: form.dataSet, readOnly: true, handlers: handlers, catalogue: componentCatalogue }))),
context && (React.createElement(EditorContext.Provider, { value: context },
React.createElement(Header, { content: "Editor", dividing: true }),
React.createElement("div", { style: { display: 'flex' } },
this.props.showToolbox && (React.createElement("div", { style: { position: 'relative', flexBasis: '200px', paddingRight: '12px' } },
React.createElement(ToolBox, { catalogue: catalogueEditor }))),
this.props.showOutline && (React.createElement("div", { style: { position: 'relative', flexBasis: '200px', paddingRight: '12px' } },
React.createElement(List, null,
React.createElement(OutlineView, { catalogue: catalogueEditor })))),
React.createElement("div", { style: { flex: '1' } },
React.createElement(FormView, { formElement: context.form, owner: form.dataSet, readOnly: false, handlers: handlers, catalogue: editorComponentCatalogue })),
context && this.props.showProperties && (React.createElement("div", { style: {
padding: '12px',
flexBasis: '350px',
minHeight: '600px',
position: 'relative'
} },
React.createElement(PropertyEditor, { handlers: propertyHandlers }))))))))));
}
};
TestComponent = tslib_1.__decorate([
observer
], TestComponent);
export { TestComponent };
//# sourceMappingURL=common.js.map