react-columns/lib/index.js

React component for rendering columns from a list of children with horizontal ordering

'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _mq = require('./mq');

var _mapNodesToColumns = require('./mapNodesToColumns');

var _mapNodesToColumns2 = _interopRequireDefault(_mapNodesToColumns);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Columns = function (_Component) {
  _inherits(Columns, _Component);

  function Columns(props) {
    _classCallCheck(this, Columns);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.setColumns = _this.setColumns.bind(_this);
    _this.state = {};
    return _this;
  }

  Columns.prototype.componentDidMount = function componentDidMount() {
    this.updateColumns(this.props);
  };

  Columns.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var queriesChanged = this.props.queries !== nextProps.queries;
    var columnsChanged = this.props.columns !== nextProps.columns;
    if (queriesChanged || columnsChanged) {
      this.updateColumns(nextProps);
    }
  };

  Columns.prototype.componentWillUnmount = function componentWillUnmount() {
    this.removeColumnListeners();
  };

  Columns.prototype.updateColumns = function updateColumns(props) {
    if (props.queries.length) {
      this.removeColumnListeners();
      this._columns = (0, _mq.mediaQueryMapper)({
        queries: props.queries,
        valueKey: 'columns',
        defaultValue: props.queries.length ? 1 : props.columns,
        onChange: this.setColumns
      });
      this.setColumns();
    }
  };

  Columns.prototype.setColumns = function setColumns() {
    var _this2 = this;

    this.setState(function () {
      return {
        columns: _this2._columns.getValue()
      };
    });
  };

  Columns.prototype.removeColumnListeners = function removeColumnListeners() {
    if (this._columns) {
      this._columns.removeListeners();
    }
  };

  Columns.prototype.renderColumns = function renderColumns(columns) {
    var _props = this.props,
        children = _props.children,
        dimensions = _props.dimensions,
        gap = _props.gap;

    var columnStyles = {
      boxSizing: 'border-box',
      float: 'left',
      width: 1 / columns * 100 + '%',
      paddingLeft: gap,
      paddingRight: gap
    };
    var renderedColumns = children;

    if (columns > 1) {
      var columnsContainers = (0, _mapNodesToColumns2.default)({ children: children, columns: columns, dimensions: dimensions });
      renderedColumns = columnsContainers.map(function (column, i) {
        return _react2.default.createElement(
          'div',
          { key: i, style: columnStyles },
          column
        );
      });
    }

    return renderedColumns;
  };

  Columns.prototype.render = function render() {
    var _props2 = this.props,
        className = _props2.className,
        gap = _props2.gap,
        rootStyles = _props2.rootStyles;
    var _state$columns = this.state.columns,
        columns = _state$columns === undefined ? this.props.columns : _state$columns;

    var rowStyles = columns === 1 ? {} : {
      marginLeft: 'calc(' + gap + ' * -1)',
      marginRight: 'calc(' + gap + ' * -1)'
    };

    return _react2.default.createElement(
      'div',
      { className: className, style: rootStyles },
      _react2.default.createElement(
        'div',
        { style: rowStyles },
        this.renderColumns(columns),
        _react2.default.createElement('div', { style: { clear: 'both' } })
      )
    );
  };

  return Columns;
}(_react.Component);

Columns.defaultProps = {
  className: '',
  rootStyles: {
    overflowX: 'hidden'
  },
  queries: [],
  columns: 3,
  gap: '0px'
};

Columns.propTypes = process.env.NODE_ENV !== "production" ? {
  className: _propTypes2.default.string,
  rootStyles: _propTypes2.default.object,
  queries: _propTypes2.default.array,
  columns: _propTypes2.default.number,
  gap: _propTypes2.default.string
} : {};

exports.default = Columns;
module.exports = exports['default'];