Home Reference Source Repository

src/material/LayoutContainer.js

import React from 'react';
import PropTypes from 'prop-types';

function getStyles(props, context) {
    const {
        style,
        noPadding,
        flexLayout,
        flex,
    } = props;

    const styles = {
        padding: noPadding ? 0 : context.muiTheme.baseTheme.spacing.desktopGutter,
    };

    if (flexLayout) {
        styles.display = 'flex';
        styles.flexDirection = flexLayout;
        styles.alignItems = 'baseline';
    }

    if (flex) {
        styles.flex = flex;
    }
    return Object.assign(styles, style);
}

/**
 * @desc
 * Default styles:
 * ```
 * {
 *   padding: context.muiTheme.baseTheme.spacing.desktopGutter
 * }
 * ```
 */
class LayoutContainer extends React.Component {
    /**
     * @type {Object}
     * @property {Node} children child nodes
     * @property {string} id DOM id
     * @property {string} className DOM class
     * @property {Object} style inline styles
     * @property {boolean} noPadding remove padding
     * @property {string} flexLayout type of layout [row|column|row-reverse|column-reverse]
     * @property {string} flex css flex string
     */
    static propTypes = {
        children: PropTypes.node,
        className: PropTypes.string,
        id: PropTypes.string,
        style: PropTypes.object,
        noPadding: PropTypes.bool,
        flexLayout: PropTypes.string,
        flex: PropTypes.string,
    };

    /**
     * @type {Object}
     * @property {Object} muiTheme theme
     */
    static contextTypes = {
        muiTheme: PropTypes.object.isRequired,
    };

    /**
     * @return {Node}
     */
    render() {
        const styles = getStyles(this.props, this.context);
        const classes = [];
        if (this.props.flexLayout) { classes.push(this.props.flexLayout); }
        if (this.props.className) { classes.push(this.props.className); }
        return (
            <div id={this.props.id} className={ classes.join(' ')} style={styles}>
                { this.props.children }
            </div>
        );
    }
}

export default LayoutContainer;