antd/lib/grid/hooks/useBreakpoint.js

An enterprise-class UI design language and React components implementation

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _responsiveObserver = _interopRequireDefault(require("../../_util/responsiveObserver"));
function useBreakpoint(refreshOnChange = true, defaultScreens = {}) {
  const [initialScreens] = (0, _react.useState)(defaultScreens);
  const screensRef = (0, _react.useRef)(defaultScreens);
  const responsiveObserver = (0, _responsiveObserver.default)();
  const subscribe = (0, _react.useCallback)(onStoreChange => {
    const token = responsiveObserver.subscribe(supportScreens => {
      screensRef.current = supportScreens;
      onStoreChange();
    });
    return () => {
      responsiveObserver.unsubscribe(token);
    };
  }, [responsiveObserver]);
  const getSnapshot = (0, _react.useCallback)(() => {
    if (refreshOnChange) {
      return responsiveObserver.getSnapshot?.() ?? initialScreens;
    }
    return initialScreens;
  }, [responsiveObserver, refreshOnChange, initialScreens]);
  const getServerSnapshot = (0, _react.useCallback)(() => {
    return responsiveObserver.getServerSnapshot?.() ?? initialScreens;
  }, [responsiveObserver, initialScreens]);
  const screens = (0, _react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
  // Disabled refresh still exposes the latest breakpoints on the next parent render.
  return refreshOnChange ? screens : screensRef.current;
}
var _default = exports.default = useBreakpoint;