All files / src/components/Grid/Grid index.jsx

66.67% Statements 10/15
25% Branches 1/4
57.14% Functions 4/7
66.67% Lines 10/15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63                      1x 1x 1x 1x       1x                                     1x       1x       1x           2x           2x          
import gridBig from './grid-big.postcss';
import gridCompact from './grid-compact.postcss';
import styles from './style.postcss';
 
import React, { PureComponent } from 'react';
import classnames from 'classnames';
import mediaQuery from 'domain/MediaQuery';
import PropTypes from 'prop-types';
 
class Grid extends PureComponent {
  constructor(props) {
    super(props);
    this._queryListener = this._queryListener.bind(this);
    this._query = mediaQuery('(min-width: 640px)');
    this.state = { grid: this._getGrid(this._query) };
  }
 
  getChildContext() {
    return { grid: this.state.grid };
  }
 
  componentDidMount() {
    this._query.addListener(this._queryListener);
  }
 
  componentWillUnmount() {
    this._query.removeListener(this._queryListener);
  }
 
  _queryListener(mql) {
    const newGrid = this._getGrid(mql);
    if (newGrid !== this.state.grid) {
      this.setState({ grid: newGrid });
    }
  }
 
  _getGrid(query) {
    return query.matches ? gridBig : gridCompact;
  }
 
  render() {
    const classes = classnames(this.state.grid['container-fluid'],
        styles.Grid,
        this.props.className,
        { [styles.__outerMargin]: this.props.outerMargin });
    return <div className={classes}>
      {this.props.children}
    </div>;
  }
}
 
Grid.propTypes = {
  children: PropTypes.node,
  outerMargin: PropTypes.bool,
  className: PropTypes.string,
};
 
Grid.childContextTypes = {
  grid: PropTypes.object,
};
 
export default Grid;