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;