@onesy/ui-react/useMediaQuery/useMediaQuery.js

UI for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
const useMediaQuery = (props, options) => {
  var _ref, _element$ownerDocumen;
  const element = options === null || options === void 0 ? void 0 : options.element;
  const [root, setRoot] = _react.default.useState();
  const [matches, setMatches] = _react.default.useState((options === null || options === void 0 ? void 0 : options.initial) !== undefined ? options.initial : (0, _utils.isEnvironment)('browser') && ((_ref = (element === null || element === void 0 || (_element$ownerDocumen = element.ownerDocument) === null || _element$ownerDocumen === void 0 ? void 0 : _element$ownerDocumen.defaultView) || window) === null || _ref === void 0 || (_ref = _ref.matchMedia(props)) === null || _ref === void 0 ? void 0 : _ref.matches));
  const refs = {
    root: _react.default.useRef(root),
    responsive: _react.default.useRef({}),
    matches: _react.default.useRef(matches)
  };
  refs.matches.current = matches;

  // Root
  _react.default.useEffect(() => {
    var _element$ownerDocumen2;
    const rootNew = (element === null || element === void 0 || (_element$ownerDocumen2 = element.ownerDocument) === null || _element$ownerDocumen2 === void 0 ? void 0 : _element$ownerDocumen2.defaultView) || window;
    setRoot(rootNew);
    refs.root.current = rootNew;
  }, [element]);
  const method = event => {
    if (refs.matches.current !== event.matches) setMatches(event.matches);
  };

  // Watch
  _react.default.useEffect(() => {
    if (!root) return;
    const mediaQuery = root.matchMedia(props);

    // Add new event listener
    mediaQuery.addEventListener('change', method);
    if (refs.matches.current !== (mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.matches)) setMatches(mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.matches);
    return () => {
      // Remove event listener
      if (mediaQuery) mediaQuery.removeEventListener('change', method);
    };
  }, [root, props]);
  return matches;
};
useMediaQuery.displayName = 'onesy-UseMediaQuery';
var _default = exports.default = useMediaQuery;