38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { useToastState, type ToastItem } from "./toastStore";
|
||
|
||
const iconMap: Record<string, string> = {
|
||
success: "✓",
|
||
error: "✕",
|
||
info: "ℹ",
|
||
};
|
||
|
||
function ToastItemView({ item, onDismiss }: { item: ToastItem; onDismiss: (id: number) => void }) {
|
||
return (
|
||
<div className={`app-toast app-toast--${item.type}`} role="alert">
|
||
<span className="app-toast__icon">{iconMap[item.type]}</span>
|
||
<span className="app-toast__msg">{item.message}</span>
|
||
{item.onRetry && (
|
||
<button type="button" className="app-toast__retry" onClick={item.onRetry}>
|
||
重试
|
||
</button>
|
||
)}
|
||
<button type="button" className="app-toast__close" onClick={() => onDismiss(item.id)} aria-label="关闭">
|
||
×
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function ToastContainer() {
|
||
const { items, dismiss } = useToastState();
|
||
if (!items.length) return null;
|
||
|
||
return (
|
||
<div className="app-toast-container" aria-live="polite">
|
||
{items.map((item) => (
|
||
<ToastItemView key={item.id} item={item} onDismiss={dismiss} />
|
||
))}
|
||
</div>
|
||
);
|
||
}
|