rsuite/cjs/useMediaQuery/useMediaQuery.js

A suite of react components

'use client';
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
exports.useMediaQuery = useMediaQuery;
var _canUseDOM = _interopRequireDefault(require("dom-lib/canUseDOM"));
var _styledSystem = require("../internals/styled-system");
var _react = require("react");
var _breakpoints = require("./breakpoints");
// Create enhanced breakpoint system using shared breakpoint values
const breakpointSystem = (0, _breakpoints.createBreakpoints)(_styledSystem.breakpointValues);

// Create media query map that combines legacy breakpoints with enhanced conditions
const mediaQuerySizeMap = breakpointSystem.createMediaQueryMap();

/**
 * Create a MediaQueryList object or a mock for server-side rendering
 */
const matchMedia = query => {
  if (_canUseDOM.default) {
    return window.matchMedia(query);
  }
  return {
    matches: false,
    media: query
  };
};

/**
 * React hook that tracks state of a CSS media query
 * @version 5.48.0
 * @unstable Please note that this API is not stable and may change in the future.
 * @see https://rsuitejs.com/components/use-media-query
 * @param query - The media query string or array of query strings
 * @param enabled - Whether to enable the media query, defaults to true
 */
function useMediaQuery(query, enabled = true) {
  const queryKey = JSON.stringify(Array.isArray(query) ? query : [query]);
  const store = (0, _react.useMemo)(() => {
    const mediaQueries = JSON.parse(queryKey).map(query => mediaQuerySizeMap[query] || query);
    const serverSnapshot = mediaQueries.map(() => false);
    let snapshot = serverSnapshot;
    return {
      subscribe: callback => {
        if (!enabled) {
          return () => {};
        }
        const list = mediaQueries.map(query => matchMedia(query));
        list.forEach(query => query.addEventListener('change', callback));
        return () => {
          list.forEach(query => query.removeEventListener('change', callback));
        };
      },
      getSnapshot: () => {
        if (!enabled) {
          return serverSnapshot;
        }
        const nextSnapshot = mediaQueries.map(query => matchMedia(query).matches);
        if (nextSnapshot.some((matches, index) => matches !== snapshot[index])) {
          snapshot = nextSnapshot;
        }
        return snapshot;
      },
      getServerSnapshot: () => serverSnapshot
    };
  }, [queryKey, enabled]);
  return (0, _react.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getServerSnapshot);
}
var _default = exports.default = useMediaQuery;