@vimeo/iris/utils/hooks/usePortal_DEPRECATED/useMountAnimations.esm.js

Vimeo Design System

import { _ as __read, c as __assign } from '../../../tslib.es6-7f0e734f.js';
import { useState, useRef, useMemo } from 'react';
import { useIsomorphicEffect } from '../useIsomorphicEffect.esm.js';
import { getComputedStyles } from '../../DOM/getComputedStyles.esm.js';
import { animate } from '../../DOM/animate.esm.js';
import { onEvent } from '../../events/onEvent.esm.js';

var initialState = {
    active: false,
    exiting: false,
    duration: 0.3,
};
function useMountAnimations(_a, _b) {
    var onOpen = _a.onOpen, onClose = _a.onClose, forceActive = _a.forceActive, _c = _a.animation, animation = _c === void 0 ? defaultAnimation : _c;
    var childRef = _b.childRef, screenRef = _b.screenRef;
    var _d = __read(useState(initialState), 2), state = _d[0], stateSet = _d[1];
    var active = state.active, exiting = state.exiting, duration = state.duration;
    var lastForceActive = useRef(forceActive);
    var element = childRef.current;
    var controlled = forceActive === true || forceActive === false;
    var forcedClose = !forceActive && lastForceActive.current;
    useIsomorphicEffect(function () {
        if (element) {
            var curDuration_1 = parseFloat(getComputedStyles(element, ['animation-duration'])['animation-duration']);
            if (curDuration_1 && duration !== curDuration_1) {
                stateSet(function (state) { return (__assign(__assign({}, state), { duration: curDuration_1 })); });
            }
        }
    }, [duration, element]);
    var animateExit = useMemo(function () {
        return function (ref, _a) {
            var enter = _a.enter, exit = _a.exit;
            animate(ref, transition(enter, duration), transition(exit, duration));
        };
    }, [duration]);
    useIsomorphicEffect(function () {
        if (!controlled && element && exiting) {
            animateExit(childRef, animation);
            if (screen)
                animateExit(screenRef, defaultAnimation);
        }
        if (controlled) {
            if (forcedClose) {
                animateExit(childRef, animation);
                if (screen)
                    animateExit(screenRef, defaultAnimation);
                stateSet(function (state) { return (__assign(__assign({}, state), { exiting: true })); });
            }
            lastForceActive.current = forceActive;
        }
    }, [
        animateExit,
        animation,
        childRef,
        controlled,
        element,
        exiting,
        forceActive,
        forcedClose,
        screenRef,
    ]);
    var open = onEvent(function () {
        if (!active) {
            stateSet(function (state) { return (__assign(__assign({}, state), { exiting: false, active: true })); });
        }
    }, onOpen);
    var close = onEvent(function () {
        if (active) {
            stateSet(function (state) { return (__assign(__assign({}, state), { active: true, exiting: true })); });
        }
    }, onClose);
    function finish() {
        if (exiting) {
            stateSet(function (state) { return (__assign(__assign({}, state), { exiting: false, active: false })); });
        }
    }
    var animationProps = {
        onAnimationStart: function () {
            return stateSet(function (state) { return (__assign(__assign({}, state), { active: true })); });
        },
        onTransitionEnd: function () { return finish(); },
        onAnimationEnd: function () { return finish(); },
    };
    if (controlled) {
        if (exiting || forcedClose) {
            return { open: open, close: close, active: true, animationProps: animationProps };
        }
        else {
            return { open: open, close: close, active: forceActive, animationProps: animationProps };
        }
    }
    return { open: open, close: close, active: active, animationProps: animationProps };
}
var transition = function (keys, dur) { return (__assign(__assign({}, keys), { transition: Object.keys(keys)
        .map(function (key) { return key + ' ' + dur + 's'; })
        .join(', ') })); };
var defaultAnimation = {
    enter: { opacity: 1 },
    exit: { opacity: 0 },
};

export { useMountAnimations };