@kiwicom/orbit-components/es/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.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import * as React from "react";
import { getBreakpointWidth } from "../../utils/mediaQuery/index";
import useTheme from "../../hooks/useTheme/index";

var createBreakpoints = function createBreakpoints(theme) {
  return {
    isDesktop: getBreakpointWidth("desktop", theme),
    isLargeDesktop: getBreakpointWidth("largeDesktop", theme),
    isTablet: getBreakpointWidth("tablet", theme),
    isLargeMobile: getBreakpointWidth("largeMobile", theme),
    isMediumMobile: 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 _defineProperty({}, q, window.matchMedia(breakpoints[q]));
    });
  }

  return [];
};

var useMediaQueryContext = function useMediaQueryContext() {
  var theme = useTheme();
  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(_toConsumableArray(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(_toConsumableArray(Object.keys(mediaQueryLists).map(function (q) {
      var _mediaQueryLists$q;

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

  var _React$useState = React.useState(getValue),
      _React$useState2 = _slicedToArray(_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].addListener(handler);
      });
    };
  }, [getValue, mediaQueryLists]);
  return value;
};

export default useMediaQueryContext;