@indoqa/style-system/lib/components/grid/Grid.js

A style system for React with Typescript typed theme support and several base components.

import * as React from 'react';
import { FelaComponent } from 'react-fela';
import { createBoxModelCSSProps, createMarginCSSProps, createPaddingCSSProps, createStylingCSSProps } from '../base';
import { createResponsiveStyles, mergeThemedStyles } from '../utils';
import { GridContext } from './GridContext';
function createBaseStyles(props, theme, outsideMediaQuery) {
    return {
        ...createBoxModelCSSProps(props),
        ...createMarginCSSProps(props, theme),
        ...createPaddingCSSProps(props, theme),
        ...createStylingCSSProps(props, theme),
    };
}
class GridContainer extends React.Component {
    render() {
        const gridStyle = ({ maxWidth, center, ...otherProps }) => ({
            margin: center ? 'auto' : 0,
            ...createResponsiveStyles(otherProps, createBaseStyles),
            boxSizing: 'border-box',
            maxWidth,
        });
        const { children, style, center, innerRef, testId, ...otherProps } = this.props;
        if (process.env.NODE_ENV !== 'production') {
            if (center && (otherProps.mx || otherProps.ml || otherProps.mr)) {
                console.warn('The Grid property center is set to true and one of the properties mx, ml or mr is set. ' +
                    'This might lead to unexpected behaviour.');
            }
        }
        const styles = mergeThemedStyles(gridStyle, style);
        return (React.createElement(FelaComponent, { style: styles, center: center, ...otherProps, "data-testid": testId }, ({ className }) => (React.createElement("div", { className: className, ref: innerRef, "data-testid": testId }, children))));
    }
}
export class Grid extends React.Component {
    render() {
        const { spacing, ...otherProps } = this.props;
        return (React.createElement(GridContainer, { ...otherProps },
            React.createElement(GridContext.Provider, { value: { spacing } }, this.props.children)));
    }
}
Grid.defaultProps = {
    maxWidth: 'none',
    center: false,
    spacing: 0,
};
//# sourceMappingURL=Grid.js.map