35 lines
775 B
TypeScript
35 lines
775 B
TypeScript
|
import React, { useCallback, useEffect, useRef } from "react";
|
||
|
|
import { TOAST_TIMEOUT } from "../constants";
|
||
|
|
import "./Toast.scss";
|
||
|
|
|
||
|
|
export const Toast = ({
|
||
|
|
message,
|
||
|
|
clearToast,
|
||
|
|
}: {
|
||
|
|
message: string;
|
||
|
|
clearToast: () => void;
|
||
|
|
}) => {
|
||
|
|
const timerRef = useRef<number>(0);
|
||
|
|
|
||
|
|
const scheduleTimeout = useCallback(
|
||
|
|
() =>
|
||
|
|
(timerRef.current = window.setTimeout(() => clearToast(), TOAST_TIMEOUT)),
|
||
|
|
[clearToast],
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
scheduleTimeout();
|
||
|
|
return () => clearTimeout(timerRef.current);
|
||
|
|
}, [scheduleTimeout, message]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="Toast"
|
||
|
|
onMouseEnter={() => clearTimeout(timerRef?.current)}
|
||
|
|
onMouseLeave={scheduleTimeout}
|
||
|
|
>
|
||
|
|
<p className="Toast__message">{message}</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|