eeff292
import { IconX as X } from '@tabler/icons-react'
import { createContext, type ReactNode, useCallback, useContext, useMemo, useRef, useState } from 'react'
export interface ToastAction {
label: string
onClick: () => void
}
export interface ToastInput {
title: string
description?: string
action?: ToastAction
/** 毫秒；0 表示不自动关闭。 */
timeout?: number
}
interface Toast extends ToastInput {
id: number
}
interface ToastApi {
push(input: ToastInput): number
dismiss(id: number): void
}
const ToastContext = createContext<ToastApi | null>(null)
export function ToastProvider({ children }: { children: ReactNode }) {
const [items, setItems] = useState<Toast[]>([])
const seq = useRef(0)
const timers = useRef(new Map<number, number>())
const dismiss = useCallback((id: number) => {
setItems((current) => current.filter((item) => item.id !== id))
const timer = timers.current.get(id)
if (timer) {
window.clearTimeout(timer)
timers.current.delete(id)
}
}, [])
const push = useCallback(
(input: ToastInput) => {
seq.current += 1
const id = seq.current
setItems((current) => [...current.slice(-4), { ...input, id }])
const timeout = input.timeout ?? 6_000
if (timeout > 0) {
const timer = window.setTimeout(() => dismiss(id), timeout)
timers.current.set(id, timer)
}
return id
},
[dismiss],
)
const value = useMemo<ToastApi>(() => ({ push, dismiss }), [push, dismiss])
return (
<ToastContext.Provider value={value}>
{children}
<div className="pointer-events-none fixed inset-x-0 top-3 z-[70] flex flex-col items-center gap-2 px-3 sm:items-end sm:pr-4">
{items.map((item) => (
<div
key={item.id}
role="status"
className="pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-xl border border-shell-hairline bg-shell-surface px-3.5 py-3 shadow-lg"
>
<div className="min-w-0 flex-1">
<p className="truncate text-[13px] font-semibold text-foreground">{item.title}</p>
{item.description ? (
<p className="mt-0.5 line-clamp-2 text-[12px] text-shell-ink-muted">{item.description}</p>
) : null}
{item.action ? (
<button
type="button"
onClick={() => {
item.action?.onClick()
dismiss(item.id)
}}
className="mt-2 rounded-md bg-shell-action px-2.5 py-1 text-[12px] font-semibold text-white"
>
{item.action.label}
</button>
) : null}
</div>
<button
type="button"
aria-label="关闭"
onClick={() => dismiss(item.id)}
className="rounded-md p-1 text-shell-ink-muted hover:bg-shell-field"
>
<X className="h-3.5 w-3.5" />
</button>
</div>
))}
</div>
</ToastContext.Provider>
)
}
const NOOP: ToastApi = { push: () => 0, dismiss: () => {} }
export function useToast(): ToastApi {
return useContext(ToastContext) ?? NOOP
}