@kiwicom/orbit-components/lib/hooks/useMediaQuery/index.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").default;

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

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

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

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

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

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

var _QueryContext = _interopRequireWildcard(require("../../ThemeProvider/QueryContext"));

const QUERIES = ["isMediumMobile", "isLargeMobile", "isTablet", "isDesktop", "isLargeDesktop", "prefersReducedMotion"];

const useMediaQuery = () => {
  const theme = (0, _useTheme.default)();
  const contextValue = React.useContext(_QueryContext.default);
  const [result, setResult] = React.useState(contextValue); // if context value is anything other than initial, it's available

  const hasContext = React.useMemo(() => QUERIES.some(query => contextValue[query] !== _QueryContext.initialValue[query]), [contextValue]);
  React.useEffect(() => {
    let mqListMap;
    const listenerMap = {}; // if context is available, skip computing

    if (!hasContext && typeof window !== "undefined" && typeof window.matchMedia === "function") {
      const createMqList = (query, mediaQuery) => {
        const mqList = window.matchMedia(mediaQuery);

        listenerMap[query] = ({
          matches
        }) => {
          setResult(prev => {
            const next = (0, _objectSpread2.default)({}, prev);
            next[query] = matches;
            return next;
          });
        };

        if (typeof mqList.addEventListener === "function") {
          mqList.addEventListener("change", listenerMap[query]);
        } else {
          // for browsers like Safari 13
          mqList.addListener(listenerMap[query]);
        }

        return mqList;
      };

      mqListMap = {
        isMediumMobile: createMqList("isMediumMobile", (0, _mediaQuery.getBreakpointWidth)("mediumMobile", theme)),
        isLargeMobile: createMqList("isLargeMobile", (0, _mediaQuery.getBreakpointWidth)("largeMobile", theme)),
        isTablet: createMqList("isTablet", (0, _mediaQuery.getBreakpointWidth)("tablet", theme)),
        isDesktop: createMqList("isDesktop", (0, _mediaQuery.getBreakpointWidth)("desktop", theme)),
        isLargeDesktop: createMqList("isLargeDesktop", (0, _mediaQuery.getBreakpointWidth)("largeDesktop", theme)),
        prefersReducedMotion: createMqList("prefersReducedMotion", "(prefers-reduced-motion: reduce)")
      }; // initialize

      setResult(prev => {
        const next = (0, _objectSpread2.default)({}, prev);
        QUERIES.forEach(query => {
          next[query] = mqListMap[query].matches;
        });
        return QUERIES.every(query => next[query] === prev[query]) ? prev : next;
      });
    }

    return () => {
      if (mqListMap) {
        QUERIES.forEach(query => {
          if (typeof mqListMap[query].removeEventListener === "function") {
            mqListMap[query].removeEventListener("change", listenerMap[query]);
          } else {
            // for browsers like Safari 13
            mqListMap[query].removeListener(listenerMap[query]);
          }
        });
      }
    };
  }, [theme, hasContext]); // forward context if it's available

  return hasContext ? contextValue : result;
};

var _default = useMediaQuery;
exports.default = _default;