@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
66 lines • 2.49 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");
exports.stack = common_1.css `
position: relative;
display: flex;
label: stack;
`;
const containerBasis = {
display: 'flex'
};
function createContainerFlexStyle(props) {
if (!props) {
return containerBasis;
}
return {
...containerBasis,
flexWrap: props.wrap,
flexDirection: props.layout,
justifyContent: props.justifyContent,
alignItems: props.alignItems,
alignContent: props.alignContent
};
}
exports.createContainerFlexStyle = createContainerFlexStyle;
const itemBasis = {
flex: 'none'
};
function createItemFlexStyle(props) {
if (!props) {
return itemBasis;
}
return {
flex: !props.basis && !props.grow && !props.shrink ? 'none' : '',
flexBasis: props.basis,
flexGrow: props.grow,
flexShrink: props.shrink,
alignSelf: props.alignSelf
};
}
exports.createItemFlexStyle = createItemFlexStyle;
const FlexComponent = props => {
const context = React.useContext(context_1.Context);
const control = props.formElement;
const controlProps = control.props;
const controls = layouts_common_1.processControls(props);
const className = common_1.css({ padding: controlProps.gap, label: 'gap' });
return (React.createElement(wrapper_1.DynamicComponent, Object.assign({}, props, { style: createContainerFlexStyle(controlProps) }),
controls.map((element, i) => (React.createElement("div", { key: i, style: createItemFlexStyle(element.props), className: className }, props.catalogue.createComponent(props, element, context)))),
props.formElement.elements.length === 0 && props.EmptyCell && (React.createElement(props.EmptyCell, Object.assign({}, props, { className: className })))));
};
exports.FlexView = {
Component: mobx_react_1.observer(FlexComponent),
toString(owner, props, context, catalogue) {
return props.formElement.elements
.map(s => props.catalogue.components[s.control].toString(owner, props, context, catalogue))
.join('\n');
}
};
//# sourceMappingURL=flex_view.js.map