boldr-ui/Layout/Row/Row.js

UI components for Boldr

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

if (typeof exports !== 'undefined') Object.defineProperty(exports, 'babelPluginFlowReactPropTypes_proptype_Props', {
  value: {
    reverse: require('prop-types').bool,
    className: require('prop-types').string,
    style: require('prop-types').object,
    children: typeof ReactChildren === 'function' ? require('prop-types').instanceOf(ReactChildren) : require('prop-types').any,
    xsStart: require('prop-types').bool,
    smStart: require('prop-types').bool,
    mdStart: require('prop-types').bool,
    lgStart: require('prop-types').bool,
    xsCenter: require('prop-types').bool,
    smCenter: require('prop-types').bool,
    mdCenter: require('prop-types').bool,
    lgCenter: require('prop-types').bool,
    xsEnd: require('prop-types').bool,
    smEnd: require('prop-types').bool,
    mdEnd: require('prop-types').bool,
    lgEnd: require('prop-types').bool,
    xsTop: require('prop-types').bool,
    smTop: require('prop-types').bool,
    mdTop: require('prop-types').bool,
    lgTop: require('prop-types').bool,
    xsMiddle: require('prop-types').bool,
    smMiddle: require('prop-types').bool,
    mdMiddle: require('prop-types').bool,
    lgMiddle: require('prop-types').bool,
    xsBottom: require('prop-types').bool,
    smBottom: require('prop-types').bool,
    mdBottom: require('prop-types').bool,
    lgBottom: require('prop-types').bool,
    xsAround: require('prop-types').bool,
    smAround: require('prop-types').bool,
    mdAround: require('prop-types').bool,
    lgAround: require('prop-types').bool,
    xsBetween: require('prop-types').bool,
    smBetween: require('prop-types').bool,
    mdBetween: require('prop-types').bool,
    lgBetween: require('prop-types').bool,
    componentClass: typeof ReactElement === 'function' ? require('prop-types').instanceOf(ReactElement).isRequired : require('prop-types').any.isRequired
  }
});
/* eslint-disable camelcase */

var Row = function (_PureComponent) {
  (0, _inherits3.default)(Row, _PureComponent);

  function Row() {
    (0, _classCallCheck3.default)(this, Row);
    return (0, _possibleConstructorReturn3.default)(this, (Row.__proto__ || (0, _getPrototypeOf2.default)(Row)).apply(this, arguments));
  }

  (0, _createClass3.default)(Row, [{
    key: 'render',
    value: function render() {
      var ComponentClass = this.props.componentClass;

      var classes = (0, _classnames2.default)({
        grid__row: true,
        'grid__row--reverse': this.props.reverse,

        'grid__row--xs-start': this.props.xsStart,
        'grid__row--sm-start': this.props.smStart,
        'grid__row--md-start': this.props.mdStart,
        'grid__row--lg-start': this.props.lgStart,

        'grid__row--xs-center': this.props.xsCenter,
        'grid__row--sm-center': this.props.smCenter,
        'grid__row--md-center': this.props.mdCenter,
        'grid__row--lg-center': this.props.lgCenter,

        'grid__row--xs-end': this.props.xsEnd,
        'grid__row--sm-end': this.props.smEnd,
        'grid__row--md-end': this.props.mdEnd,
        'grid__row--lg-end': this.props.lgEnd,

        'grid__row--xs-top': this.props.xsTop,
        'grid__row--sm-top': this.props.smTop,
        'grid__row--md-top': this.props.mdTop,
        'grid__row--lg-top': this.props.lgTop,

        'grid__row--xs-middle': this.props.xsMiddle,
        'grid__row--sm-middle': this.props.smMiddle,
        'grid__row--md-middle': this.props.mdMiddle,
        'grid__row--lg-middle': this.props.lgMiddle,

        'grid__row--xs-bottom': this.props.xsBottom,
        'grid__row--sm-bottom': this.props.smBottom,
        'grid__row--md-bottom': this.props.mdBottom,
        'grid__row--lg-bottom': this.props.lgBottom,

        'grid__row--xs-around': this.props.xsAround,
        'grid__row--sm-around': this.props.smAround,
        'grid__row--md-around': this.props.mdAround,
        'grid__row--lg-around': this.props.lgAround,

        'grid__row--xs-between': this.props.xsBetween,
        'grid__row--sm-between': this.props.smBetween,
        'grid__row--md-between': this.props.mdBetween,
        'grid__row--lg-between': this.props.lgBetween
      }, this.props.className);

      return _react2.default.createElement(
        ComponentClass,
        { className: classes, style: this.props.style },
        this.props.children
      );
    }
  }]);
  return Row;
}(_react.PureComponent);

Row.propTypes = process.env.NODE_ENV !== "production" ? {
  reverse: require('prop-types').bool,
  className: require('prop-types').string,
  style: require('prop-types').object,
  children: typeof ReactChildren === 'function' ? require('prop-types').instanceOf(ReactChildren) : require('prop-types').any,
  xsStart: require('prop-types').bool,
  smStart: require('prop-types').bool,
  mdStart: require('prop-types').bool,
  lgStart: require('prop-types').bool,
  xsCenter: require('prop-types').bool,
  smCenter: require('prop-types').bool,
  mdCenter: require('prop-types').bool,
  lgCenter: require('prop-types').bool,
  xsEnd: require('prop-types').bool,
  smEnd: require('prop-types').bool,
  mdEnd: require('prop-types').bool,
  lgEnd: require('prop-types').bool,
  xsTop: require('prop-types').bool,
  smTop: require('prop-types').bool,
  mdTop: require('prop-types').bool,
  lgTop: require('prop-types').bool,
  xsMiddle: require('prop-types').bool,
  smMiddle: require('prop-types').bool,
  mdMiddle: require('prop-types').bool,
  lgMiddle: require('prop-types').bool,
  xsBottom: require('prop-types').bool,
  smBottom: require('prop-types').bool,
  mdBottom: require('prop-types').bool,
  lgBottom: require('prop-types').bool,
  xsAround: require('prop-types').bool,
  smAround: require('prop-types').bool,
  mdAround: require('prop-types').bool,
  lgAround: require('prop-types').bool,
  xsBetween: require('prop-types').bool,
  smBetween: require('prop-types').bool,
  mdBetween: require('prop-types').bool,
  lgBetween: require('prop-types').bool,
  componentClass: typeof ReactElement === 'function' ? require('prop-types').instanceOf(ReactElement).isRequired : require('prop-types').any.isRequired
} : {};


Row.defaultProps = {
  componentClass: 'div'
};

exports.default = Row;