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:
@@ -0,0 +1,29 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user