@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
188 lines • 8.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const table_view_1 = require("./table_view");
const mobx_react_1 = require("mobx-react");
const editor_common_1 = require("../editor/editor_common");
const enums_1 = require("./enums");
const wrapper_1 = require("../wrapper");
const template_editor_1 = require("../vanilla/template_editor");
const editor_context_1 = require("../editor/editor_context");
const semantic_ui_react_1 = require("semantic-ui-react");
const layouts_common_editor_1 = require("../editor/layouts_common_editor");
const mobx_1 = require("mobx");
const templates = [
{ text: 'Component View', value: 'component' },
{ text: 'View Template', value: 'view' },
{ text: 'Edit Template', value: 'edit' },
{ text: 'Add Template', value: 'add' }
];
const Template = mobx_react_1.observer((props) => {
const editorState = React.useContext(editor_context_1.EditorContext);
let addDataset = table_view_1.createDataset(props.formElement.props.items, mobx_1.toJS(props.owner));
let formElement = props.formElement;
let template = formElement.elements[props.templateIndex];
let elements = template.elements;
let items = props.formElement.props.items;
editorState.project.state.selectedElement;
return (React.createElement(semantic_ui_react_1.Table, null,
React.createElement(semantic_ui_react_1.Table.Header, null,
React.createElement(semantic_ui_react_1.Table.Row, null, items.map((m, i) => (React.createElement(semantic_ui_react_1.Table.HeaderCell, { key: m.title + i }, m.title))))),
React.createElement(semantic_ui_react_1.Table.Body, null,
React.createElement(semantic_ui_react_1.Table.Row, null, items.map((m, i) => (React.createElement(semantic_ui_react_1.Table.Cell, { key: m.title + i }, elements.length > i && elements[i] ? (React.createElement(layouts_common_editor_1.EditorControl, { props: { ...props, owner: addDataset }, formElement: elements[i] })) : (React.createElement(layouts_common_editor_1.SingleDropCell, Object.assign({}, props, { formElement: template, className: "", id: i.toString(), elementIndex: i, editorState: editorState })))))))),
React.createElement(semantic_ui_react_1.Table.Body, null)));
});
const TableComponent = (props) => {
return (React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props, { hideLabel: true }),
React.createElement(template_editor_1.TemplateEditor, Object.assign({}, props, { extra: props.extra, Component: table_view_1.TableView.Component, Template: Template, options: templates }))));
};
exports.TableEditor = {
Component: mobx_react_1.observer(TableComponent),
title: 'Table',
control: 'Table',
icon: 'code',
bound: true,
valueProvider: 'value',
defaultChildren: [
{
elements: []
},
{
elements: []
},
{
elements: []
}
],
props: {
...editor_common_1.propGroup('Templates', {
allowAdd: editor_common_1.prop({ type: 'boolean' }),
allowEdit: editor_common_1.prop({ type: 'boolean' }),
allowDelete: editor_common_1.prop({ type: 'boolean' }),
customView: editor_common_1.prop({ type: 'boolean' })
}),
...editor_common_1.propGroup('Table', {
value: editor_common_1.boundProp(),
template: editor_common_1.prop({
control: 'Select',
props: {
options: templates,
default: 'component'
}
}),
propSource: editor_common_1.prop({}),
attached: editor_common_1.boundProp({
type: 'boolean',
control: 'Select',
props: {
options: [
{ text: '', value: '' },
{ text: 'Top', value: 'top' },
{ text: 'Bottom', value: 'bottom' },
{ text: 'Both', value: true }
]
}
}),
basic: editor_common_1.boundProp({
type: 'boolean',
control: 'Select',
props: {
options: [
{ text: '', value: '' },
{ text: 'Very', value: 'very' },
{ text: 'Normal', value: true }
]
}
}),
inverted: editor_common_1.boundProp({ type: 'boolean', control: 'Checkbox' }),
celled: editor_common_1.boundProp({ type: 'boolean' }),
collapsing: editor_common_1.boundProp({ type: 'boolean' }),
compact: editor_common_1.boundProp({
type: 'boolean',
control: 'Select',
props: {
options: [
{ text: '', value: '' },
{ text: 'Very', value: 'very' },
{ text: 'Normal', value: true }
]
}
}),
padded: editor_common_1.boundProp({
type: 'boolean',
control: 'Select',
props: {
options: [
{ text: '', value: '' },
{ text: 'Very', value: 'very' },
{ text: 'Normal', value: true }
]
}
}),
fixed: editor_common_1.boundProp({ type: 'boolean' }),
selectable: editor_common_1.boundProp({ type: 'boolean' }),
singleLine: editor_common_1.boundProp({ type: 'boolean' }),
sortable: editor_common_1.boundProp({ type: 'boolean' }),
stackable: editor_common_1.boundProp({ type: 'boolean' }),
striped: editor_common_1.boundProp({ type: 'boolean' }),
structured: editor_common_1.boundProp({ type: 'boolean' }),
textAlign: editor_common_1.boundProp({ control: 'Select', props: { options: enums_1.align } }),
verticalAlign: editor_common_1.boundProp({ control: 'Select', props: { options: enums_1.verticalAlign } })
}),
...editor_common_1.propGroup('Handlers', {
onCreate: editor_common_1.handlerProp(),
onAdd: editor_common_1.handlerProp(),
onSave: editor_common_1.handlerProp(),
onDelete: editor_common_1.handlerProp()
}),
items: editor_common_1.prop({
control: 'Table',
props: { text: 'Columns' },
elements: [
{
props: { placeholder: 'Title', value: { source: 'title' } }
},
{
props: {
value: { source: 'source' },
text: 'Source',
options: { handler: 'datasetSource' }
},
control: 'Select'
},
{
control: 'Select',
props: {
text: 'Type',
value: { source: 'type' },
options: [
{
value: 'string',
text: 'String'
},
{
value: 'number',
text: 'Number'
},
{
value: 'boolean',
text: 'Boolean'
}
]
}
}
],
type: 'array',
items: {
type: 'object',
properties: {
title: { type: 'string' },
source: { type: 'string' },
type: { type: 'string' }
}
}
})
}
};
//# sourceMappingURL=table_editor.js.map