@re-flex/ui/Transitions/Core.js

Re-Flex ui library

import Box from "@re-flex/styled/Box";
import { css, useTheme } from "@re-flex/styles";
import Transition from "@re-flex/transition-group/Transition";
import clsx from "clsx";
import React from "react";
const outPhase = ["appear", "enter", "exit", "exited", "exiting"];
export const CoreTransition = ({ in: open, duration: timeOut, children, onEnter, onEntered, onEntering, onExit, onExited, onExiting, alwaysMounted = false, appear = false, inStyle, outStyle, ...boxProps }) => {
    const { transitions: { duration, easing }, } = useTheme();
    return (React.createElement(Transition, { appear: appear, duration: timeOut || duration.shorter, in: open, alwaysMounted: alwaysMounted, ...{ onEnter, onEntered, onEntering, onExit, onExited, onExiting } }, ({}, phase) => (React.createElement(Box, { ...boxProps, "data-role": "effect", sx: {
            transition: `all ${timeOut || duration.shorter}ms ${easing.easeInOut}`,
            ...(boxProps?.sx || {}),
        }, className: clsx(boxProps?.className, css(outPhase.includes(phase) ? outStyle : inStyle)) }, children))));
};