react-component-transition
Version:
Easy animations between react component transitions.
33 lines (32 loc) • 1.92 kB
JavaScript
import { __assign } from "tslib";
import React, { useContext } from "react";
import { ComponentTransitionContext } from "./context";
import { Transition, LazyTransition } from "../transition";
export var ComponentTransition = function (props) {
var context = useContext(ComponentTransitionContext);
var forceExit = (context === null || context === void 0 ? void 0 : context.exitKeys.indexOf(context.contextId)) > -1;
var forceEnter = (context === null || context === void 0 ? void 0 : context.enterKeys.indexOf(context.contextId)) > -1;
var animateOnMount = props.animateOnMount, children = props.children, lazy = props.lazy, onEnterFinished = props.onEnterFinished, onExitFinished = props.onExitFinished;
var handleEnterFinished = function () {
if (onEnterFinished) {
onEnterFinished();
}
if ((context === null || context === void 0 ? void 0 : context.contextId) && (context === null || context === void 0 ? void 0 : context.onEnterFinished)) {
context.onEnterFinished(context.contextId);
}
};
var handleExitFinished = function () {
if (onExitFinished) {
onExitFinished();
}
if ((context === null || context === void 0 ? void 0 : context.contextId) && (context === null || context === void 0 ? void 0 : context.onExitFinished)) {
context.onExitFinished(context.contextId);
}
};
var Component = lazy ? LazyTransition : Transition;
return (
// Clear context for nested transitions
React.createElement(ComponentTransitionContext.Provider, { value: null },
React.createElement(Component, __assign({}, props, { animateOnMount: forceEnter || animateOnMount, onEnterFinished: handleEnterFinished, onExitFinished: handleExitFinished }), forceExit ? null : children)));
};
ComponentTransition.displayName = "ComponentTransition";