@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
40 lines • 1.96 kB
JavaScript
import * as React from 'react';
import { css } from '../common';
import { observer } from 'mobx-react';
import { processControls } from './layouts_common';
import { DynamicComponent } from '../wrapper';
import { Context } from '../context';
export function itemCSS(formElement, layout) {
let itemCSS = layout === 'row' ||
(formElement.props.padding && formElement.props.padding != '0px') ||
(formElement.props.gap && formElement.props.gap != '0px')
? `padding: ${formElement.props.padding};
margin: ${formElement.props.gap};
display: ${layout === 'row' ? 'inline-block' : 'block'};
:first-of-type label,
:first-of-type {
margin-top: 0px;
padding-top: 0px;
}
label: item-${layout};
`
: '';
return itemCSS ? css([itemCSS]) : '';
}
const StackComponent = props => {
const context = React.useContext(Context);
const controls = processControls(props) || [];
const itemsCss = itemCSS(props.formElement, props.formElement.props.layout);
return (React.createElement(React.Fragment, null,
React.createElement(DynamicComponent, Object.assign({}, props), controls.map((element, i) => itemsCss ? (React.createElement("div", { className: itemsCss, key: i }, props.catalogue.createComponent(props, element, context, null))) : (React.createElement(React.Fragment, { key: i }, props.catalogue.createComponent(props, element, context, itemsCss))))),
props.formElement.elements.length === 0 && props.EmptyCell && (React.createElement(props.EmptyCell, Object.assign({}, props, { className: itemsCss })))));
};
export const StackView = {
Component: observer(StackComponent),
toString(owner, props, catalogue) {
return props.formElement.elements
.map(s => catalogue.components[s.control].toString(s, owner, catalogue))
.join('\n');
}
};
//# sourceMappingURL=stack_view.js.map