rc-hooks/lib/useSize/index.js

React Hooks Library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var ResizeObserver_1 = tslib_1.__importDefault(require("./ResizeObserver"));
var getRef_1 = tslib_1.__importDefault(require("../utils/getRef"));
var useLatest_1 = tslib_1.__importDefault(require("../useLatest"));
/**
 * 获取并监听 dom 节点的宽高。
 *
 * @param {Object} ref `dom` 节点引用。
 * @returns {Object} 返回 `dom` 节点的宽高。
 * @example
 * const ref = useRef<HTMLDivElement>(null);
 * const size = useSize(ref);
 *
 * return (
 *   <>
 *     <h1 ref={ref}>Hello, world</h1>
 *     <p>rect value: {JSON.stringify(size)}</p>
 *   </>
 * );
 */
function useSize(ref) {
    var latestRef = (0, useLatest_1.default)(ref);
    var _a = tslib_1.__read((0, react_1.useState)(function () {
        var target = (0, getRef_1.default)(ref);
        return {
            width: target === null || target === void 0 ? void 0 : target.clientWidth,
            height: target === null || target === void 0 ? void 0 : target.clientHeight
        };
    }), 2), size = _a[0], setSize = _a[1];
    var sizeLatestRef = (0, useLatest_1.default)(size);
    (0, react_1.useEffect)(function () {
        var target = (0, getRef_1.default)(latestRef.current);
        function refresh(el) {
            var width = el === null || el === void 0 ? void 0 : el.clientWidth;
            var height = el === null || el === void 0 ? void 0 : el.clientHeight;
            if (width !== sizeLatestRef.current.width || height !== sizeLatestRef.current.height) {
                setSize({
                    width: width,
                    height: height
                });
            }
        }
        if (!target) {
            return function () { };
        }
        refresh(target);
        var observer = new ResizeObserver_1.default(function (mutationsList) {
            mutationsList.forEach(function (mutation) {
                refresh(mutation.target);
            });
        });
        observer.observe(target);
        return function () {
            observer.disconnect();
        };
    }, [latestRef, sizeLatestRef]);
    return size;
}
exports.default = useSize;