Sha256: 59c22da6dd1cf0be4e82829825fcefdee12d12b61cd4fdce4c4c998af985e388
Contents?: true
Size: 1.31 KB
Versions: 3
Compression:
Stored size: 1.31 KB
Contents
import React, { useEffect, useRef, useState } from "react"; import useToastStore from "../stores/useToastStore"; interface ToastProps { error: string, notice: string } export default function Toast(props: ToastProps) { const [fadeout, setFadeout] = useState(false); const { toasts, error, notice, next } = useToastStore((state) => state); const timerRef = useRef<number | null>(null); const toast = toasts[0]; useEffect(() => { if (props.error) { error(props.error); } if (props.notice) { notice(props.notice); } }, [props.error, props.notice]); useEffect(() => { setFadeout(false); if (toast && !timerRef.current) { timerRef.current = setTimeout(() => { setFadeout(true); timerRef.current = setTimeout(() => { timerRef.current = null; setFadeout(false); next(); }, 500); }, 4000); } return () => { clearTimeout(timerRef.current); }; }, [toast]); const classNames = ["toast"]; if (toast) { classNames.push(toast.type); if (fadeout) { classNames.push("fadeout"); } } return ( <div className="toast-wrapper" aria-live="polite"> {toast && ( <div className={classNames.join(" ")}> {toast.message} </div> )} </div> ); }
Version data entries
3 entries across 3 versions & 1 rubygems
Version | Path |
---|---|
pages_core-3.12.4 | app/javascript/components/Toast.tsx |
pages_core-3.12.3 | app/javascript/components/Toast.tsx |
pages_core-3.12.2 | app/javascript/components/Toast.tsx |