rc-hooks/es/useSize/ResizeObserver.js

React Hooks Library.

import { __assign } from "tslib";
import { throttle, isBrowser } from 'ut2';
// Minimum delay before invoking the update of observers.
var REFRESH_DELAY = 50;
// ref: https://github.com/que-etc/resize-observer-polyfill/blob/master/src/ResizeObserverController.js
// A list of substrings of CSS properties used to find transition events that
// might affect dimensions of observed elements.
var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
var defaultObserverOptions = {
    characterData: true, // 监视指定目标节点或子节点树中节点所包含的字符数据的变化
    childList: true, // 观察目标子节点的变化，是否有添加或者删除
    attributes: true, // 观察属性变动
    subtree: true // 观察后代节点，默认为 false
};
var ResizeObserver = /** @class */ (function () {
    function ResizeObserver(callback) {
        var _this = this;
        this.refresh = function () {
            if (_this.targetNode) {
                _this.callback([
                    {
                        target: _this.targetNode
                    }
                ], {});
            }
        };
        this.onTransitionEnd_ = function (_a) {
            var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
            var isReflowProperty = transitionKeys.some(function (key) {
                return propertyName.indexOf(key) > -1;
            });
            if (isReflowProperty) {
                _this.throttleRefresh();
            }
        };
        this.observe = function (targetNode, options) {
            if (!isBrowser) {
                return;
            }
            _this.targetNode = targetNode;
            document.addEventListener('transitionend', _this.onTransitionEnd_);
            window.addEventListener('resize', _this.throttleRefresh);
            _this.observer.observe(document, __assign(__assign({}, defaultObserverOptions), options));
        };
        this.disconnect = function () {
            if (!isBrowser) {
                return;
            }
            _this.throttleRefresh.cancel();
            _this.targetNode = null;
            document.removeEventListener('transitionend', _this.onTransitionEnd_);
            window.removeEventListener('resize', _this.throttleRefresh);
            _this.observer.disconnect();
        };
        this.throttleRefresh = throttle(this.refresh, REFRESH_DELAY);
        this.targetNode = null;
        this.callback = callback;
        this.observer = new MutationObserver(this.throttleRefresh);
    }
    return ResizeObserver;
}());
export default ResizeObserver;