@tomino/dynamic-form-semantic-ui/dist/cjs/layouts/grid_view.js

Semantic UI form renderer based on dynamic form generation

"use strict";
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");
const helpers_1 = require("../helpers");
exports.grid = common_1.css `
  display: grid;
  position: relative;
`;
function sortGrid(context, props) {
    return function (a, b) {
        return helpers_1.getPropValue(props, a, context, 'row') < helpers_1.getPropValue(props, b, context, 'row')
            ? -1
            : helpers_1.getPropValue(props, a, context, 'row') > helpers_1.getPropValue(props, b, context, 'row')
                ? 1
                : helpers_1.getPropValue(props, a, context, 'column') < helpers_1.getPropValue(props, b, context, 'column')
                    ? -1
                    : 1;
    };
}
exports.sortGrid = sortGrid;
function createColumnStyles(props, formElement, context) {
    return {
        gridColumn: `${helpers_1.getPropValue(props, formElement, context, 'column')} / span ${helpers_1.getPropValue(props, formElement, context, 'width', 1)}`,
        gridRow: `${helpers_1.getPropValue(props, formElement, context, 'row')} / span ${helpers_1.getPropValue(props, formElement, context, 'height') || 1}`,
        justifySelf: helpers_1.getPropValue(props, formElement, context, 'justifySelf'),
        alignSelf: helpers_1.getPropValue(props, formElement, context, 'alignSelf')
    };
}
exports.createColumnStyles = createColumnStyles;
function createGridStyles(props, context, readOnly) {
    let gridTemplateColumns = (readOnly && helpers_1.getValue(props, context, 'templateColumnsReadOnly')
        ? helpers_1.getValue(props, context, 'templateColumnsReadOnly')
        : helpers_1.getValue(props, context, 'templateColumns')
            ? helpers_1.getValue(props, context, 'templateColumns')
            : `repeat(${readOnly && helpers_1.getValue(props, context, 'columnsReadOnly')
                ? helpers_1.getValue(props, context, 'columnsReadOnly')
                : helpers_1.getValue(props, context, 'columns', 1)}, 1fr)`);
    let gridTemplateRows = (readOnly && helpers_1.getValue(props, context, 'templateRowsReadOnly')
        ? helpers_1.getValue(props, context, 'templateRowsReadOnly')
        : helpers_1.getValue(props, context, 'templateRows')
            ? helpers_1.getValue(props, context, 'templateRows')
            : `repeat(${readOnly && helpers_1.getValue(props, context, 'rowsReadOnly')
                ? helpers_1.getValue(props, context, 'rowsReadOnly')
                : helpers_1.getValue(props, context, 'rows') || 1}, auto)`);
    return {
        gridTemplateColumns,
        gridTemplateRows,
        gridAutoColumns: helpers_1.getValue(props, context, 'columnSize') || '20px',
        gridAutoRows: helpers_1.getValue(props, context, 'rowSize') || '20px',
        alignItems: helpers_1.getValue(props, context, 'alignItems'),
        justifyItems: helpers_1.getValue(props, context, 'justifyItems'),
        gridGap: helpers_1.getValue(props, context, 'gap')
    };
}
exports.createGridStyles = createGridStyles;
exports.Grid = props => {
    const controls = layouts_common_1.processControls(props);
    const { EditorCell, className, ...rest } = props;
    const context = React.useContext(context_1.Context);
    return (React.createElement(wrapper_1.DynamicComponent, Object.assign({}, rest, { className: className, style: createGridStyles(props, context, props.readOnly), styleName: exports.grid }), (props.controls || controls).map((element, i) => EditorCell ? (React.createElement(EditorCell, Object.assign({}, rest, { key: i, style: createColumnStyles(props, element, context), formElement: element, parentFormElement: props.formElement }), props.catalogue.createComponent(props, element, context))) : (React.createElement("div", { key: i, style: createColumnStyles(props, element, context) }, props.catalogue.createComponent(props, element, context))))));
};
exports.GridView = {
    Component: mobx_react_1.observer(exports.Grid),
    toString(owner, props, context) {
        const sort = sortGrid(context, props);
        let sorted = props.formElement.elements.sort(sort);
        return sorted
            .map(s => props.catalogue.components[s.control].toString(owner, props, context))
            .join('\n');
    }
};
//# sourceMappingURL=grid_view.js.map