web2468/src/components/MailNew.jsx

import {useEffect, useState} from "react";
import Spring from "@components/Spring";
import Lottie from "lottie-react";
import mailnew from "@assets/newmail.json";
const objInfo={
    timerIds:[]
}
const MailNew = ({...props}) => {
    const [isShow, setIsShow] = useState(false);
    const show=()=>{
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const resetTimer=()=>{
        if (objInfo.timerIds){
            for (let i = 0; i < objInfo.timerIds; i++) {
                clearTimeout(objInfo.timerIds[i]);
            }
            objInfo.timerIds=[];
        }
    }
    useEffect(()=>{
        const mailNew={
            show,
            hide
        };
        global.mailNew=mailNew;
    },[])
    useEffect(() => {
        resetTimer();
        if (isShow){
            let timer=setTimeout(()=>{
                setIsShow(false);
            },4000);
            objInfo.timerIds.push(timer);
        }
    },[isShow])
    return (
        <>
            {
                isShow?(
                    <Spring {...props} className="d-flex align-items-center justify-content-center flex-1 w-100 h-100 top_view">
                        <Lottie loop={false} autoplay={true} className="top_view"  animationData={mailnew}  />
                    </Spring>
                ):(<></>)
            }
        </>
    )
}
export default MailNew;