@primer/react/lib/hooks/useMedia.js

An implementation of GitHub's Primer Design System using React

'use strict';

var reactCompilerRuntime = require('react-compiler-runtime');
var React = require('react');
require('react/jsx-runtime');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

function useMedia(mediaQueryString, defaultState) {
  const $ = reactCompilerRuntime.c(12);
  const features = React.useContext(MatchMediaContext);
  let t0;
  if ($[0] !== defaultState || $[1] !== features || $[2] !== mediaQueryString) {
    t0 = () => {
      if (features[mediaQueryString] !== undefined) {
        return features[mediaQueryString];
      }
      {
        return defaultState;
      }
    };
    $[0] = defaultState;
    $[1] = features;
    $[2] = mediaQueryString;
    $[3] = t0;
  } else {
    t0 = $[3];
  }
  const [matches, setMatches] = React__default.default.useState(t0);
  let t1;
  let t2;
  if ($[4] !== features || $[5] !== mediaQueryString) {
    t1 = () => {
      if (features[mediaQueryString] !== undefined) {
        setMatches(features[mediaQueryString]);
      }
    };
    t2 = [features, mediaQueryString];
    $[4] = features;
    $[5] = mediaQueryString;
    $[6] = t1;
    $[7] = t2;
  } else {
    t1 = $[6];
    t2 = $[7];
  }
  React.useEffect(t1, t2);
  let t3;
  let t4;
  if ($[8] !== features || $[9] !== mediaQueryString) {
    t3 = () => {
      if (features[mediaQueryString] !== undefined) {
        return;
      }
      const listener = function listener(event) {
        setMatches(event.matches);
      };
      const mediaQueryList = window.matchMedia(mediaQueryString);
      if (mediaQueryList.addEventListener) {
        mediaQueryList.addEventListener("change", listener);
      } else {
        mediaQueryList.addListener(listener);
      }
      setMatches(mediaQueryList.matches);
      return () => {
        if (mediaQueryList.addEventListener) {
          mediaQueryList.removeEventListener("change", listener);
        } else {
          mediaQueryList.removeListener(listener);
        }
      };
    };
    t4 = [features, mediaQueryString];
    $[8] = features;
    $[9] = mediaQueryString;
    $[10] = t3;
    $[11] = t4;
  } else {
    t3 = $[10];
    t4 = $[11];
  }
  React.useEffect(t3, t4);
  return matches;
}
// Used to keep track of overrides to specific media query features, this should
// be used for development and demo purposes to emulate specific features if
// unavailable through devtools
const MatchMediaContext = /*#__PURE__*/React.createContext({});

exports.useMedia = useMedia;