@re-flex/transition-group/CSSTransition.js

Re-flex UI Transtion Controller Package

import { cloneElement, useMemo } from "react";
import useUseTransition, { Phase } from "./useTransition";
var Suffix;
(function (Suffix) {
    Suffix["APPEAR"] = "-appear";
    Suffix["APPEAR_ACTIVE"] = "-appear-active";
    Suffix["APPEAR_DONE"] = "-appear-done";
    Suffix["ENTER"] = "-enter";
    Suffix["ENTER_ACTIVE"] = "-enter-active";
    Suffix["ENTER_DONE"] = "-enter-done";
    Suffix["EXIT"] = "-exit";
    Suffix["EXIT_ACTIVE"] = "-exit-active";
    Suffix["EXIT_DONE"] = "-exit-done";
})(Suffix || (Suffix = {}));
const appendSuffix = (className, suffix) => `${className}${suffix}`;
const joinClassNames = (...classNames) => classNames.filter((className) => !!className).join(" ");
const createClassName = (transition, classNames) => {
    const classes = typeof classNames === "string"
        ? {
            appear: appendSuffix(classNames, Suffix.APPEAR),
            appearActive: appendSuffix(classNames, Suffix.APPEAR_ACTIVE),
            appearDone: appendSuffix(classNames, Suffix.APPEAR_DONE),
            enter: appendSuffix(classNames, Suffix.ENTER),
            enterActive: appendSuffix(classNames, Suffix.ENTER_ACTIVE),
            enterDone: appendSuffix(classNames, Suffix.ENTER_DONE),
            exit: appendSuffix(classNames, Suffix.EXIT),
            exitActive: appendSuffix(classNames, Suffix.EXIT_ACTIVE),
            exitDone: appendSuffix(classNames, Suffix.EXIT_DONE),
        }
        : classNames;
    switch (true) {
        case transition.appear:
            return joinClassNames(classes.appear);
        case transition.appearActive:
            return joinClassNames(classes.appear, classes.appearActive);
        case transition.appearDone:
            return joinClassNames(classes.appearDone);
        case transition.enter:
            return joinClassNames(classes.enter);
        case transition.enterActive:
            return joinClassNames(classes.enter, classes.enterActive);
        case transition.enterDone:
            return joinClassNames(classes.enterDone);
        case transition.exit:
            return joinClassNames(classes.exit);
        case transition.exitActive:
            return joinClassNames(classes.exit, classes.exitActive);
        case transition.exitDone:
            return joinClassNames(classes.exitDone);
        default:
            return "";
    }
};
export default ({ children, classNames, alwaysMounted, ...transitionProps }) => {
    const [transitionState, phase] = useUseTransition(transitionProps);
    const { className } = children.props;
    const generatedElement = useMemo(() => {
        const finalClassName = joinClassNames(className, createClassName(transitionState, classNames));
        return cloneElement(children, {
            className: finalClassName,
        });
    }, [className, classNames, transitionState]);
    return (alwaysMounted || phase !== Phase.EXITED) && generatedElement;
};