@dnb/eufemia/cjs/shared/useMediaQuery.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useMediaQuery;
var _react = require("react");
var _componentHelper = require("./component-helper.js");
var _Context = _interopRequireDefault(require("./Context.js"));
var _MediaQueryUtils = require("./MediaQueryUtils.js");
var _useIsomorphicLayoutEffect = require("./helpers/useIsomorphicLayoutEffect.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function useMediaQuery(props) {
  var _mediaQueryList$curre;
  const context = (0, _react.useContext)(_Context.default);
  const {
    query,
    when,
    not,
    matchOnSSR,
    disabled,
    correctRange = true,
    log
  } = props;
  let matches = (0, _react.useMemo)(() => {
    if (disabled) {
      return false;
    }
    return (0, _componentHelper.isTrue)(matchOnSSR) && !(0, _MediaQueryUtils.isMatchMediaSupported)();
  }, [disabled, matchOnSSR]);
  const mediaQueryList = (0, _react.useRef)((0, _MediaQueryUtils.makeMediaQueryList)({
    query,
    when,
    not
  }, context.breakpoints, {
    disabled,
    correctRange,
    log
  }));
  if ((_mediaQueryList$curre = mediaQueryList.current) !== null && _mediaQueryList$curre !== void 0 && _mediaQueryList$curre.matches) {
    matches = true;
  }
  const [match, matchUpdate] = (0, _react.useState)(matches);
  const listenerRef = (0, _react.useRef)();
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
    if (disabled) {
      return;
    }
    if (typeof listenerRef.current === 'function') {
      var _mediaQueryList$curre2;
      listenerRef.current();
      mediaQueryList.current = (0, _MediaQueryUtils.makeMediaQueryList)({
        query,
        when,
        not
      }, context.breakpoints, {
        disabled,
        correctRange,
        log
      });
      matchUpdate((_mediaQueryList$curre2 = mediaQueryList.current) === null || _mediaQueryList$curre2 === void 0 ? void 0 : _mediaQueryList$curre2.matches);
    }
    listenerRef.current = (0, _MediaQueryUtils.createMediaQueryListener)(mediaQueryList.current, match => matchUpdate(match));
    return listenerRef.current;
  }, [query, when, not, disabled]);
  return Boolean(match);
}
//# sourceMappingURL=useMediaQuery.js.map