@alicloud/console-base-rc-pagination/build/cjs/model/hook/use-effect-resize-observer.js

ConsoleBase 组件 - 分页

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useEffectResizeObserver;
var _react = require("react");
var _useModelState2 = _interopRequireDefault(require("./_use-model-state"));
var _useDispatchSetWidth = _interopRequireDefault(require("./use-dispatch-set-width"));
/**
 * 在 full 的时候，容易因宽度变化导致 UI 发生错乱，监听大小变化，必要的时候强行改 theme
 */
function useEffectResizeObserver() {
  var _useModelState = (0, _useModelState2.default)(),
    domUi = _useModelState.domUi;
  var dispatchSetWidth = (0, _useDispatchSetWidth.default)();
  var resizeObserver = (0, _react.useMemo)(function () {
    // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
    if (typeof ResizeObserver !== 'function' || !domUi) {
      return null;
    }
    return new ResizeObserver(function () {
      return dispatchSetWidth(domUi.getBoundingClientRect().width);
    });
  }, [domUi, dispatchSetWidth]);
  (0, _react.useEffect)(function () {
    if (!domUi) {
      return;
    }
    if (resizeObserver) {
      resizeObserver.observe(domUi);
      return function () {
        return resizeObserver.unobserve(domUi);
      };
    }
  }, [domUi, resizeObserver]);
}