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

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../../tslib.es6-3ec409b7.js');
var React = require('react');
var utils_hooks_useIsomorphicEffect = require('../useIsomorphicEffect.js');
var utils_DOM_getComputedStyles = require('../../DOM/getComputedStyles.js');
var utils_DOM_animate = require('../../DOM/animate.js');
var utils_events_onEvent = require('../../events/onEvent.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 = tslib_es6.__read(React.useState(initialState), 2), state = _d[0], stateSet = _d[1];
    var active = state.active, exiting = state.exiting, duration = state.duration;
    var lastForceActive = React.useRef(forceActive);
    var element = childRef.current;
    var controlled = forceActive === true || forceActive === false;
    var forcedClose = !forceActive && lastForceActive.current;
    utils_hooks_useIsomorphicEffect.useIsomorphicEffect(function () {
        if (element) {
            var curDuration_1 = parseFloat(utils_DOM_getComputedStyles.getComputedStyles(element, ['animation-duration'])['animation-duration']);
            if (curDuration_1 && duration !== curDuration_1) {
                stateSet(function (state) { return (tslib_es6.__assign(tslib_es6.__assign({}, state), { duration: curDuration_1 })); });
            }
        }
    }, [duration, element]);
    var animateExit = React.useMemo(function () {
        return function (ref, _a) {
            var enter = _a.enter, exit = _a.exit;
            utils_DOM_animate.animate(ref, transition(enter, duration), transition(exit, duration));
        };
    }, [duration]);
    utils_hooks_useIsomorphicEffect.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 (tslib_es6.__assign(tslib_es6.__assign({}, state), { exiting: true })); });
            }
            lastForceActive.current = forceActive;
        }
    }, [
        animateExit,
        animation,
        childRef,
        controlled,
        element,
        exiting,
        forceActive,
        forcedClose,
        screenRef,
    ]);
    var open = utils_events_onEvent.onEvent(function () {
        if (!active) {
            stateSet(function (state) { return (tslib_es6.__assign(tslib_es6.__assign({}, state), { exiting: false, active: true })); });
        }
    }, onOpen);
    var close = utils_events_onEvent.onEvent(function () {
        if (active) {
            stateSet(function (state) { return (tslib_es6.__assign(tslib_es6.__assign({}, state), { active: true, exiting: true })); });
        }
    }, onClose);
    function finish() {
        if (exiting) {
            stateSet(function (state) { return (tslib_es6.__assign(tslib_es6.__assign({}, state), { exiting: false, active: false })); });
        }
    }
    var animationProps = {
        onAnimationStart: function () {
            return stateSet(function (state) { return (tslib_es6.__assign(tslib_es6.__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 (tslib_es6.__assign(tslib_es6.__assign({}, keys), { transition: Object.keys(keys)
        .map(function (key) { return key + ' ' + dur + 's'; })
        .join(', ') })); };
var defaultAnimation = {
    enter: { opacity: 1 },
    exit: { opacity: 0 },
};

exports.useMountAnimations = useMountAnimations;