@tomino/dynamic-form-semantic-ui/dist/mjs/layouts/flex_view.js

Semantic UI form renderer based on dynamic form generation

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 const stack = css `
  position: relative;
  display: flex;
  label: stack;
`;
const containerBasis = {
    display: 'flex'
};
export function createContainerFlexStyle(props) {
    if (!props) {
        return containerBasis;
    }
    return {
        ...containerBasis,
        flexWrap: props.wrap,
        flexDirection: props.layout,
        justifyContent: props.justifyContent,
        alignItems: props.alignItems,
        alignContent: props.alignContent
    };
}
const itemBasis = {
    flex: 'none'
};
export 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
    };
}
const FlexComponent = props => {
    const context = React.useContext(Context);
    const control = props.formElement;
    const controlProps = control.props;
    const controls = processControls(props);
    const className = css({ padding: controlProps.gap, label: 'gap' });
    return (React.createElement(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 })))));
};
export const FlexView = {
    Component: 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