@kiwicom/orbit-components/lib/ThemeProvider/QueryContext/useMediaQueryContext.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var React = _interopRequireWildcard(require("react"));

var _mediaQuery = require("../../utils/mediaQuery");

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

var createBreakpoints = function createBreakpoints(theme) {
  return {
    isDesktop: (0, _mediaQuery.getBreakpointWidth)("desktop", theme),
    isLargeDesktop: (0, _mediaQuery.getBreakpointWidth)("largeDesktop", theme),
    isTablet: (0, _mediaQuery.getBreakpointWidth)("tablet", theme),
    isLargeMobile: (0, _mediaQuery.getBreakpointWidth)("largeMobile", theme),
    isMediumMobile: (0, _mediaQuery.getBreakpointWidth)("mediumMobile", theme),
    prefersReducedMotion: "(prefers-reduced-motion: reduce)"
  };
};

var createMediaQueryList = function createMediaQueryList(breakpoints) {
  if (typeof window !== "undefined") {
    /* $FlowFixMe(>=0.115.0) This comment suppresses an error found when upgrading Flow to
     * v0.115.0. To view the error, delete this comment and run Flow. */
    return Object.keys(breakpoints).map(function (q) {
      return (0, _defineProperty2.default)({}, q, window.matchMedia(breakpoints[q]));
    });
  }

  return [];
};

var useMediaQueryContext = function useMediaQueryContext() {
  var theme = (0, _useTheme.default)();
  var breakpoints = React.useMemo(function () {
    return createBreakpoints(theme);
  }, [theme]);
  var mediaQueryLists = React.useMemo(function () {
    return Object.assign.apply(Object, [{
      isDesktop: {},
      isLargeDesktop: {},
      isTablet: {},
      isLargeMobile: {},
      isMediumMobile: {},
      prefersReducedMotion: {}
    }].concat((0, _toConsumableArray2.default)(createMediaQueryList(breakpoints))));
  }, [breakpoints]);
  var getValue = React.useCallback(function () {
    return Object.assign.apply(Object, [{
      isDesktop: false,
      isLargeDesktop: false,
      isTablet: false,
      isLargeMobile: false,
      isMediumMobile: false,
      prefersReducedMotion: false
    }].concat((0, _toConsumableArray2.default)(Object.keys(mediaQueryLists).map(function (q) {
      var _mediaQueryLists$q;

      return (0, _defineProperty2.default)({}, q, (_mediaQueryLists$q = mediaQueryLists[q]) === null || _mediaQueryLists$q === void 0 ? void 0 : _mediaQueryLists$q.matches);
    }))));
  }, [mediaQueryLists]);

  var _React$useState = React.useState(getValue),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      value = _React$useState2[0],
      setValue = _React$useState2[1];

  React.useEffect(function () {
    var handler = function handler() {
      return setValue(getValue);
    };

    Object.keys(mediaQueryLists).forEach(function (mql) {
      mediaQueryLists[mql].addListener(handler);
    });
    return function () {
      Object.keys(mediaQueryLists).forEach(function (mql) {
        return mediaQueryLists[mql].removeListener(handler);
      });
    };
  }, [getValue, mediaQueryLists]);
  return value;
};

var _default = useMediaQueryContext;
exports.default = _default;