react-misc-toolbox/dist/MatchMediaListener.js

'use strict';

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

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _recompose = require('recompose');

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

var MatchMediaListener = function MatchMediaListener(_ref) {
  var children = _ref.children,
      matchQueryString = _ref.matchQueryString,
      defaultMatches = _ref.defaultMatches;

  var _useState = (0, _react.useState)({
    matches: defaultMatches,
    mediaQueryList: null
  }),
      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  var mediaQueryList = state.mediaQueryList,
      matches = state.matches;


  var listener = function listener(e) {
    setState({ matches: e.matches });
  };

  (0, _react.useEffect)(function () {
    setState({
      matches: window.matchMedia(matchQueryString).matches,
      mediaQueryList: window.matchMedia(matchQueryString)
    });
    mediaQueryList && mediaQueryList.addListener(listener);

    return function () {
      mediaQueryList && mediaQueryList.removeListener(listener);
    };
  });

  return children({ matches: matches });
};

MatchMediaListener.propTypes = {
  matchQueryString: _propTypes2.default.string.isRequired
};
MatchMediaListener.defaultProps = {
  defaultMatches: false
};

var enhance = (0, _recompose.compose)((0, _recompose.onlyUpdateForKeys)(['children']));

exports.default = enhance(MatchMediaListener);