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

Re-flex UI Transtion Controller Package

import { cloneElement, useMemo } from "react";
import useUseTransition, { Phase } from "./useTransition";
const createStyle = (transition, styles) => {
    switch (true) {
        case transition.appear:
            return styles.appear;
        case transition.appearActive:
            return { ...styles.appear, ...styles.appearActive };
        case transition.appearDone:
            return styles.appearDone;
        case transition.enter:
            return styles.enter;
        case transition.enterActive:
            return { ...styles.enter, ...styles.enterActive };
        case transition.enterDone:
            return styles.enterDone;
        case transition.exit:
            return styles.exit;
        case transition.exitActive:
            return { ...styles.exit, ...styles.exitActive };
        case transition.exitDone:
            return styles.exitDone;
        default:
            return {};
    }
};
export default ({ children, styles, alwaysMounted, ...transitionProps }) => {
    const [transitionState, phase] = useUseTransition(transitionProps);
    const style = children.props?.style;
    const generatedElement = useMemo(() => {
        const finalStyle = {
            ...createStyle(transitionState, styles),
            ...style,
        };
        return cloneElement(children, {
            style: finalStyle,
        });
    }, [style, styles, transitionState, children]);
    return (alwaysMounted || phase !== Phase.EXITED) && generatedElement;
};