@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
185 lines • 7.31 kB
JavaScript
import * as React from 'react';
import { TableView, createDataset } from './table_view';
import { observer } from 'mobx-react';
import { prop, propGroup, handlerProp, boundProp } from '../editor/editor_common';
import { align, verticalAlign } from './enums';
import { DynamicComponent } from '../wrapper';
import { TemplateEditor } from '../vanilla/template_editor';
import { EditorContext } from '../editor/editor_context';
import { Table } from 'semantic-ui-react';
import { EditorControl, SingleDropCell } from '../editor/layouts_common_editor';
import { toJS } from '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 = observer((props) => {
const editorState = React.useContext(EditorContext);
let addDataset = createDataset(props.formElement.props.items, 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(Table, null,
React.createElement(Table.Header, null,
React.createElement(Table.Row, null, items.map((m, i) => (React.createElement(Table.HeaderCell, { key: m.title + i }, m.title))))),
React.createElement(Table.Body, null,
React.createElement(Table.Row, null, items.map((m, i) => (React.createElement(Table.Cell, { key: m.title + i }, elements.length > i && elements[i] ? (React.createElement(EditorControl, { props: { ...props, owner: addDataset }, formElement: elements[i] })) : (React.createElement(SingleDropCell, Object.assign({}, props, { formElement: template, className: "", id: i.toString(), elementIndex: i, editorState: editorState })))))))),
React.createElement(Table.Body, null)));
});
const TableComponent = (props) => {
return (React.createElement(DynamicComponent, Object.assign({}, props, { hideLabel: true }),
React.createElement(TemplateEditor, Object.assign({}, props, { extra: props.extra, Component: TableView.Component, Template: Template, options: templates }))));
};
export const TableEditor = {
Component: observer(TableComponent),
title: 'Table',
control: 'Table',
icon: 'code',
bound: true,
valueProvider: 'value',
defaultChildren: [
{
elements: []
},
{
elements: []
},
{
elements: []
}
],
props: {
...propGroup('Templates', {
allowAdd: prop({ type: 'boolean' }),
allowEdit: prop({ type: 'boolean' }),
allowDelete: prop({ type: 'boolean' }),
customView: prop({ type: 'boolean' })
}),
...propGroup('Table', {
value: boundProp(),
template: prop({
control: 'Select',
props: {
options: templates,
default: 'component'
}
}),
propSource: prop({}),
attached: boundProp({
type: 'boolean',
control: 'Select',
props: {
options: [
{ text: '', value: '' },
{ text: 'Top', value: 'top' },
{ text: 'Bottom', value: 'bottom' },
{ text: 'Both', value: true }
]
}
}),
basic: boundProp({
type: 'boolean',
control: 'Select',
props: {
options: [
{ text: '', value: '' },
{ text: 'Very', value: 'very' },
{ text: 'Normal', value: true }
]
}
}),
inverted: boundProp({ type: 'boolean', control: 'Checkbox' }),
celled: boundProp({ type: 'boolean' }),
collapsing: boundProp({ type: 'boolean' }),
compact: boundProp({
type: 'boolean',
control: 'Select',
props: {
options: [
{ text: '', value: '' },
{ text: 'Very', value: 'very' },
{ text: 'Normal', value: true }
]
}
}),
padded: boundProp({
type: 'boolean',
control: 'Select',
props: {
options: [
{ text: '', value: '' },
{ text: 'Very', value: 'very' },
{ text: 'Normal', value: true }
]
}
}),
fixed: boundProp({ type: 'boolean' }),
selectable: boundProp({ type: 'boolean' }),
singleLine: boundProp({ type: 'boolean' }),
sortable: boundProp({ type: 'boolean' }),
stackable: boundProp({ type: 'boolean' }),
striped: boundProp({ type: 'boolean' }),
structured: boundProp({ type: 'boolean' }),
textAlign: boundProp({ control: 'Select', props: { options: align } }),
verticalAlign: boundProp({ control: 'Select', props: { options: verticalAlign } })
}),
...propGroup('Handlers', {
onCreate: handlerProp(),
onAdd: handlerProp(),
onSave: handlerProp(),
onDelete: handlerProp()
}),
items: 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