Arnošt Pleskot
75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
import clsx from "clsx";
|
|
import { useCallback, useEffect, useRef } from "react";
|
|
import { CloseIcon } from "./icons";
|
|
import Spinner from "./Spinner";
|
|
import "./Toast.scss";
|
|
import { ToolButton } from "./ToolButton";
|
|
|
|
const DEFAULT_TOAST_TIMEOUT = 5000;
|
|
|
|
export const Toast = ({
|
|
message,
|
|
onClose,
|
|
closable = false,
|
|
spinner = true,
|
|
// To prevent autoclose, pass duration as Infinity
|
|
duration = DEFAULT_TOAST_TIMEOUT,
|
|
}: {
|
|
message: string;
|
|
onClose: () => void;
|
|
closable?: boolean;
|
|
spinner?: boolean;
|
|
duration?: number;
|
|
}) => {
|
|
const timerRef = useRef<number>(0);
|
|
const shouldAutoClose = duration !== Infinity;
|
|
const scheduleTimeout = useCallback(() => {
|
|
if (!shouldAutoClose) {
|
|
return;
|
|
}
|
|
timerRef.current = window.setTimeout(() => onClose(), duration);
|
|
}, [onClose, duration, shouldAutoClose]);
|
|
|
|
useEffect(() => {
|
|
if (!shouldAutoClose) {
|
|
return;
|
|
}
|
|
scheduleTimeout();
|
|
return () => clearTimeout(timerRef.current);
|
|
}, [scheduleTimeout, message, duration, shouldAutoClose]);
|
|
|
|
const onMouseEnter = shouldAutoClose
|
|
? () => clearTimeout(timerRef?.current)
|
|
: undefined;
|
|
const onMouseLeave = shouldAutoClose ? scheduleTimeout : undefined;
|
|
return (
|
|
<div
|
|
className="Toast"
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
>
|
|
{spinner && (
|
|
<div className="Toast__spinner">
|
|
<Spinner />
|
|
</div>
|
|
)}
|
|
<p
|
|
className={clsx("Toast__message", {
|
|
"Toast__message--spinner": spinner,
|
|
})}
|
|
>
|
|
{message}
|
|
</p>
|
|
{closable && (
|
|
<ToolButton
|
|
icon={CloseIcon}
|
|
aria-label="close"
|
|
type="icon"
|
|
onClick={onClose}
|
|
className="close"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|