@re-flex/ui/Transition/Beta.js

Re-Flex ui library

import { css } from "@re-flex/styles";
import clsx from "clsx";
import React from "react";
import useTransition from "../hooks/useTransition";
const Transition = ({ className, defaultStyle = {}, in: isActive, from = {}, to = {}, duration = 200, children, delay = 0, onEnd, ...otherProps }) => {
    const transitionStatus = useTransition(Boolean(isActive), duration);
    return (React.createElement("div", { ...otherProps, className: clsx(className, css({ transition: `all ${duration}ms linear ${delay}ms` }), css(defaultStyle), {
            [css(to)]: transitionStatus === "entering" || transitionStatus === "entered",
            [css(from)]: (transitionStatus === "entering" ||
                transitionStatus === "entered") === false,
        }), "data-transition-action": transitionStatus, onTransitionEnd: (e) => {
            if (!!onEnd) {
                let timeout = setTimeout(() => {
                    onEnd(e);
                    clearTimeout(timeout);
                }, 30);
            }
        } }, children));
};
export default Transition;