d4c6da57a1
将 useToast 从独立 state hook 改为 Context-based,在 layout 中 挂载 ToastProvider 全局渲染 Toast。QrInviteModal、RoomManageModal、 ShareCardModal 不再需要 onToast prop,直接 useToast() 调用即可。 父组件 TopNav、MatchResult、profile、blindbox 移除了本地 Toast 渲染和 onToast 传递逻辑。
30 lines
832 B
TypeScript
30 lines
832 B
TypeScript
"use client";
|
|
|
|
import { useState, useCallback, useRef } from "react";
|
|
import { ToastContext, type ToastPosition } from "@/hooks/useToast";
|
|
import Toast from "./Toast";
|
|
|
|
export default function ToastProvider({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const [message, setMessage] = useState("");
|
|
const [position, setPosition] = useState<ToastPosition>("top");
|
|
const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
|
|
|
|
const show = useCallback((msg: string, pos: ToastPosition = "top") => {
|
|
clearTimeout(timerRef.current);
|
|
setMessage(msg);
|
|
setPosition(pos);
|
|
timerRef.current = setTimeout(() => setMessage(""), 2200);
|
|
}, []);
|
|
|
|
return (
|
|
<ToastContext.Provider value={{ show }}>
|
|
{children}
|
|
<Toast message={message} position={position} />
|
|
</ToastContext.Provider>
|
|
);
|
|
}
|