Skip to content

Instantly share code, notes, and snippets.

@SvitlanaShepitsena
Created December 22, 2016 23:46
Show Gist options
  • Save SvitlanaShepitsena/0fcb139c887fcd286a2d8d273b0fc49b to your computer and use it in GitHub Desktop.
Save SvitlanaShepitsena/0fcb139c887fcd286a2d8d273b0fc49b to your computer and use it in GitHub Desktop.
React Grid with Radium styles for 3 columns
import React, {PropTypes} from 'react';
import Radium from 'radium';
import withWidth2, {
X_SMALL,
SMALL,
H_SMALL,
MEDIUM,
X_MEDIUM,
LARGE
} from '../../../../../../../../../webapp/scripts/withWidth2.js';
class Grid_3col extends React.Component {
static propTypes = {
gridCol_1: PropTypes.object.isRequired,
gridCol_2: PropTypes.object.isRequired,
gridCol_3: PropTypes.object.isRequired,
rowPadding: PropTypes.number,
colPadding: PropTypes.number
};
getStyles() {
let {width, rowPadding, colPadding}= this.props;
const styles = {
gridRow: {
position: 'relative',
boxSizing: 'border-box',
width: '100%',
maxWidth: '100%'
},
gridCol: {
display: 'inline-block',
verticalAlign: 'top',
width: '33.33%'
},
rowContainer: {
padding: rowPadding ? rowPadding : "0px 5px"
},
colPadding: {
padding: colPadding ? colPadding : 5
}
};
if (width === X_SMALL || width === SMALL) {
styles.gridCol.width = '100%'
}
return styles;
}
render() {
const styles = this.getStyles();
return (
<div style={styles.rowContainer}>
<div style={styles.gridRow}>
<div style={styles.gridCol}>
<div style={styles.colPadding}>
{this.props.gridCol_1}
</div>
</div>
<div style={styles.gridCol}>
<div style={styles.colPadding}>
{this.props.gridCol_2}
</div>
</div>
<div style={styles.gridCol}>
<div style={styles.colPadding}>
{this.props.gridCol_3}
</div>
</div>
</div>
</div>
);
}
}
export default withWidth2()(Radium(Grid_3col));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment