@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
72 lines • 3.94 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';
import { getValue, getPropValue } from '../helpers';
export const grid = css `
display: grid;
position: relative;
`;
export function sortGrid(context, props) {
return function (a, b) {
return getPropValue(props, a, context, 'row') < getPropValue(props, b, context, 'row')
? -1
: getPropValue(props, a, context, 'row') > getPropValue(props, b, context, 'row')
? 1
: getPropValue(props, a, context, 'column') < getPropValue(props, b, context, 'column')
? -1
: 1;
};
}
export function createColumnStyles(props, formElement, context) {
return {
gridColumn: `${getPropValue(props, formElement, context, 'column')} / span ${getPropValue(props, formElement, context, 'width', 1)}`,
gridRow: `${getPropValue(props, formElement, context, 'row')} / span ${getPropValue(props, formElement, context, 'height') || 1}`,
justifySelf: getPropValue(props, formElement, context, 'justifySelf'),
alignSelf: getPropValue(props, formElement, context, 'alignSelf')
};
}
export function createGridStyles(props, context, readOnly) {
let gridTemplateColumns = (readOnly && getValue(props, context, 'templateColumnsReadOnly')
? getValue(props, context, 'templateColumnsReadOnly')
: getValue(props, context, 'templateColumns')
? getValue(props, context, 'templateColumns')
: `repeat(${readOnly && getValue(props, context, 'columnsReadOnly')
? getValue(props, context, 'columnsReadOnly')
: getValue(props, context, 'columns', 1)}, 1fr)`);
let gridTemplateRows = (readOnly && getValue(props, context, 'templateRowsReadOnly')
? getValue(props, context, 'templateRowsReadOnly')
: getValue(props, context, 'templateRows')
? getValue(props, context, 'templateRows')
: `repeat(${readOnly && getValue(props, context, 'rowsReadOnly')
? getValue(props, context, 'rowsReadOnly')
: getValue(props, context, 'rows') || 1}, auto)`);
return {
gridTemplateColumns,
gridTemplateRows,
gridAutoColumns: getValue(props, context, 'columnSize') || '20px',
gridAutoRows: getValue(props, context, 'rowSize') || '20px',
alignItems: getValue(props, context, 'alignItems'),
justifyItems: getValue(props, context, 'justifyItems'),
gridGap: getValue(props, context, 'gap')
};
}
export const Grid = props => {
const controls = processControls(props);
const { EditorCell, className, ...rest } = props;
const context = React.useContext(Context);
return (React.createElement(DynamicComponent, Object.assign({}, rest, { className: className, style: createGridStyles(props, context, props.readOnly), styleName: 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))))));
};
export const GridView = {
Component: observer(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