react-bootstrap
Version:
Bootstrap 3 components build with React
74 lines (63 loc) • 2 kB
JSX
var React = require('react');
var joinClasses = require('./utils/joinClasses');
var classSet = require('./utils/classSet');
var constants = require('./constants');
var Col = React.createClass({
propTypes: {
xs: React.PropTypes.number,
sm: React.PropTypes.number,
md: React.PropTypes.number,
lg: React.PropTypes.number,
xsOffset: React.PropTypes.number,
smOffset: React.PropTypes.number,
mdOffset: React.PropTypes.number,
lgOffset: React.PropTypes.number,
xsPush: React.PropTypes.number,
smPush: React.PropTypes.number,
mdPush: React.PropTypes.number,
lgPush: React.PropTypes.number,
xsPull: React.PropTypes.number,
smPull: React.PropTypes.number,
mdPull: React.PropTypes.number,
lgPull: React.PropTypes.number,
componentClass: React.PropTypes.node.isRequired
},
getDefaultProps: function () {
return {
componentClass: 'div'
};
},
render: function () {
var ComponentClass = this.props.componentClass;
var classes = {};
Object.keys(constants.SIZES).forEach(function (key) {
var size = constants.SIZES[key];
var prop = size;
var classPart = size + '-';
if (this.props[prop]) {
classes['col-' + classPart + this.props[prop]] = true;
}
prop = size + 'Offset';
classPart = size + '-offset-';
if (this.props[prop]) {
classes['col-' + classPart + this.props[prop]] = true;
}
prop = size + 'Push';
classPart = size + '-push-';
if (this.props[prop]) {
classes['col-' + classPart + this.props[prop]] = true;
}
prop = size + 'Pull';
classPart = size + '-pull-';
if (this.props[prop]) {
classes['col-' + classPart + this.props[prop]] = true;
}
}, this);
return (
<ComponentClass {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
{this.props.children}
</ComponentClass>
);
}
});
module.exports = Col;