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:
+12
-14
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user