@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
44 lines • 2.17 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const common_1 = require("../common");
const mobx_react_1 = require("mobx-react");
const layouts_common_1 = require("./layouts_common");
const wrapper_1 = require("../wrapper");
const context_1 = require("../context");
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 ? common_1.css([itemCSS]) : '';
}
exports.itemCSS = itemCSS;
const StackComponent = props => {
const context = React.useContext(context_1.Context);
const controls = layouts_common_1.processControls(props) || [];
const itemsCss = itemCSS(props.formElement, props.formElement.props.layout);
return (React.createElement(React.Fragment, null,
React.createElement(wrapper_1.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 })))));
};
exports.StackView = {
Component: mobx_react_1.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