Class Media

modules/Media.js:17–183

* Conditionally renders based on whether or not a media query matches.

 * Conditionally renders based on whether or not a media query matches.
 */
class Media extends React.Component {
  static propTypes = {
    defaultMatches: PropTypes.oneOfType([
      PropTypes.bool,
      PropTypes.objectOf(PropTypes.bool)
    ]),
    query: queryType,
    queries: PropTypes.objectOf(queryType),
    render: PropTypes.func,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
    targetWindow: PropTypes.object,
    onChange: PropTypes.func
  };

  queries = [];

  constructor(props) {
    super(props);

    invariant(
      !(!props.query && !props.queries) || (props.query && props.queries),
      '<Media> must be supplied with either "query" or "queries"'
    );

    invariant(
      props.defaultMatches === undefined ||
        !props.query ||
        typeof props.defaultMatches === "boolean",
      "<Media> when query is set, defaultMatches must be a boolean, received " +
        typeof props.defaultMatches
    );

    invariant(
      props.defaultMatches === undefined ||
        !props.queries ||
        typeof props.defaultMatches === "object",
      "<Media> when queries is set, defaultMatches must be a object of booleans, received " +
        typeof props.defaultMatches
    );

    if (typeof window !== "object") {
      // In case we're rendering on the server, apply the default matches
      let matches;
      if (props.defaultMatches !== undefined) {
        matches = props.defaultMatches;
      } else if (props.query) {
        matches = true;
      } /* if (props.queries) */ else {
        matches = Object.keys(this.props.queries).reduce(
          (acc, key) => ({ ...acc, [key]: true }),
          {}
        );
      }
      this.state = {
        matches
      };
      return;
    }