react-component-transition/build/cjs/transition/animation-hooks/use-container-rectangle.js

Easy animations between react component transitions.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useContainerRectangle = void 0;
var react_1 = require("react");
var types_1 = require("./types");
var useContainerRectangle = function (props) {
    var prevClientRect = react_1.useRef(null);
    var nextClientRect = react_1.useRef(null);
    var transitionState = props.transitionState, getElement = props.getElement, onFinish = props.onFinish;
    if (getElement() && transitionState === types_1.TransitionState.Exit) {
        prevClientRect.current = getElement().getBoundingClientRect();
    }
    react_1.useLayoutEffect(function () {
        if (getElement() && transitionState === types_1.TransitionState.ContainerRect) {
            nextClientRect.current = getElement().getBoundingClientRect();
            onFinish();
        }
    }, [transitionState]);
    return {
        prevClientRect: prevClientRect.current,
        nextClientRect: nextClientRect.current,
    };
};
exports.useContainerRectangle = useContainerRectangle;