@kiwicom/orbit-components/lib/hooks/useMediaQuery.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = require("react");

var _useTheme = _interopRequireDefault(require("./useTheme"));

var _index = require("../utils/mediaQuery/index");

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

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var debounce = function debounce(callback, time) {
  var interval;
  return function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    clearTimeout(interval);
    interval = setTimeout(function () {
      callback.apply(void 0, args);
    }, time);
  };
};

var useMediaQuery = function useMediaQuery() {
  var theme = (0, _useTheme.default)();

  var _useState = (0, _react.useState)([{
    media: (0, _index.getBreakpointWidth)("largeDesktop", theme),
    mapping: "isLargeDesktop",
    matches: null
  }, {
    media: (0, _index.getBreakpointWidth)("desktop", theme),
    mapping: "isDesktop",
    matches: null
  }, {
    media: (0, _index.getBreakpointWidth)("largeMobile", theme),
    mapping: "isLargeMobile",
    matches: null
  }, {
    media: (0, _index.getBreakpointWidth)("mediumMobile", theme),
    mapping: "isMediumMobile",
    matches: null
  }, {
    media: (0, _index.getBreakpointWidth)("tablet", theme),
    mapping: "isTablet",
    matches: null
  }]),
      _useState2 = _slicedToArray(_useState, 2),
      breakpointList = _useState2[0],
      setBreakpointList = _useState2[1];

  var mediaList = [];

  if (typeof window !== "undefined") {
    // Tie listener to all MediaQueryList items
    mediaList = breakpointList.map(function (breakpoint) {
      return window.matchMedia(breakpoint.media);
    });
  }

  var findMatch = function findMatch(mediaToMatch, list) {
    var regex = /\d+/; // $FlowFixMe

    var res = list.find(function (el) {
      return el.media.match(regex)[0] === mediaToMatch.match(regex)[0];
    });

    if (res) {
      return res.matches;
    }

    return null;
  };

  var updateMatch = function updateMatch() {
    setBreakpointList(breakpointList.map(function (breakpoint) {
      return _objectSpread({}, breakpoint, {
        matches: findMatch(breakpoint.media, mediaList)
      });
    }));
  };

  (0, _react.useEffect)(function () {
    if (typeof window !== "undefined") {
      // Initial value
      updateMatch(); // Tie listener to all MediaQueryList items

      mediaList.forEach(function (mediaListItem) {
        return mediaListItem.addListener(debounce(updateMatch, 150));
      });
    }

    return function () {
      if (typeof window !== "undefined") {
        // cleanup
        mediaList.forEach(function (mediaListItem) {
          return mediaListItem.removeListener(updateMatch);
        });
      }
    }; // can't have dependencies
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // Flatten to object and return

  return Object.assign.apply(Object, [{
    isDesktop: null,
    isLargeDesktop: null,
    isTablet: null,
    isLargeMobile: null,
    isMediumMobile: null
  }].concat(_toConsumableArray(breakpointList.map(function (item) {
    return _defineProperty({}, item.mapping, item.matches);
  }))));
};

var _default = useMediaQuery;
exports.default = _default;