refactor: Toast 升级为全局 Context,消除 onToast prop 透传

将 useToast 从独立 state hook 改为 Context-based,在 layout 中
挂载 ToastProvider 全局渲染 Toast。QrInviteModal、RoomManageModal、
ShareCardModal 不再需要 onToast prop,直接 useToast() 调用即可。
父组件 TopNav、MatchResult、profile、blindbox 移除了本地 Toast
渲染和 onToast 传递逻辑。
This commit is contained in:
2026-02-26 17:57:34 +08:00
parent b98920858c
commit d4c6da57a1
10 changed files with 68 additions and 55 deletions
+12 -14
View File
@@ -1,17 +1,15 @@
import { useState, useCallback, useRef } from "react";
import { createContext, useContext } from "react";
export function useToast(duration = 2200) {
const [message, setMessage] = useState("");
const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
export type ToastPosition = "top" | "bottom";
const show = useCallback(
(msg: string) => {
clearTimeout(timerRef.current);
setMessage(msg);
timerRef.current = setTimeout(() => setMessage(""), duration);
},
[duration],
);
return { message, show } as const;
export interface ToastContextValue {
show: (msg: string, position?: ToastPosition) => void;
}
export const ToastContext = createContext<ToastContextValue | null>(null);
export function useToast() {
const ctx = useContext(ToastContext);
if (!ctx) throw new Error("useToast must be used within ToastProvider");
return ctx;
}