zent/es/utils/component/WindowResizeHandler.js

一套前端设计语言和基于React的实现

import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useEffect, useRef } from 'react';
import getViewportSize from '../dom/getViewportSize';
import WindowEventHandler from './WindowEventHandler';
import { useRunOnceInNextFrame } from '../nextFrame';
var RESIZE_OPTIONS = {
    passive: true,
};
export var WindowResizeHandler = function (_a) {
    var _b = _a.disableThrottle, disableThrottle = _b === void 0 ? false : _b, onResizeProp = _a.onResize;
    var prevViewportSize = useRef(null);
    var cb = useRef(onResizeProp);
    cb.current = onResizeProp;
    var onResizeCallback = useCallback(function (evt) {
        var viewportSize = getViewportSize();
        if (!prevViewportSize.current) {
            prevViewportSize.current = viewportSize;
        }
        var prev = prevViewportSize.current;
        var delta = {
            deltaX: viewportSize.width - prev.width,
            deltaY: viewportSize.height - prev.height,
        };
        if (delta.deltaX === 0 && delta.deltaY === 0) {
            return;
        }
        cb.current(evt, delta);
        prevViewportSize.current = viewportSize;
    }, []);
    var onResize = useRunOnceInNextFrame(onResizeCallback, disableThrottle);
    useEffect(function () {
        prevViewportSize.current = getViewportSize();
        return onResize.cancel;
    }, [onResize]);
    return (_jsx(WindowEventHandler, { eventName: "resize", listener: onResize, options: RESIZE_OPTIONS }, void 0));
};