@darwish/hooks-core/lib/useSize.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var useEventListener_1 = __importDefault(require("./useEventListener"));
var useRafState_1 = __importDefault(require("./useRafState"));
/**
 * 监听一个容器的宽度和高度的变化。
 *
 * 注意：入参如果传入，就监听当前的DOM宽高的变化，否则则是窗口`window`的宽高变化
 * @param target DOM
 * @returns
 */
function useSize(target) {
    var isTarget = target !== undefined;
    var _a = (0, useRafState_1.default)({
        width: isTarget ? 0 : window.innerWidth,
        height: isTarget ? 0 : window.innerHeight,
    }), dimensions = _a[0], setDimensions = _a[1];
    (0, useEventListener_1.default)(window, "resize", function () {
        if (!isTarget) {
            setDimensions({
                width: window.innerWidth,
                height: window.innerHeight,
            });
        }
    });
    (0, react_1.useEffect)(function () {
        if (isTarget) {
            var resizeObserver_1 = new ResizeObserver(function (entries) {
                for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
                    var entrie = entries_1[_i];
                    var _a = entrie.contentRect, height = _a.height, width = _a.width;
                    setDimensions({ height: height, width: width });
                }
            });
            if (target.current) {
                resizeObserver_1.observe(target.current);
            }
            return function () {
                resizeObserver_1.disconnect();
            };
        }
    }, []);
    return dimensions;
}
exports.default = useSize;