48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
// @/components/ui/use-toast.tsx
|
|
|
|
import { useState } from "react";
|
|
|
|
import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
|
|
|
|
interface ToasterToast extends ToastProps {
|
|
id: string;
|
|
description?: string;
|
|
onOpenChange?: (open: boolean) => void;
|
|
}
|
|
|
|
const useToast = () => {
|
|
const [toasts, setToasts] = useState<ToasterToast[]>([]);
|
|
|
|
const showToast = (props: ToastProps) => {
|
|
const id = Math.random().toString(36).substr(2, 9);
|
|
const newToast: ToasterToast = {
|
|
...props,
|
|
id,
|
|
onOpenChange: (open) => {
|
|
if (!open) dismiss(id);
|
|
},
|
|
};
|
|
setToasts((prevToasts) => [...prevToasts, newToast]);
|
|
|
|
// 设置定时器，五秒后移除该 Toast
|
|
setTimeout(() => {
|
|
removeToast(id);
|
|
}, 2000);
|
|
};
|
|
|
|
const removeToast = (id: string) => {
|
|
setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
|
|
};
|
|
|
|
const dismiss = (id: string) => {
|
|
setToasts((prevToasts) =>
|
|
prevToasts.map((toast) =>
|
|
toast.id === id ? { ...toast, onOpenChange: undefined } : toast
|
|
)
|
|
);
|
|
};
|
|
|
|
return { toasts, showToast, removeToast };
|
|
};
|
|
|
|
export { useToast, ToastProps, ToastActionElement }; |