refactor: 提取 useToast hook + Toast 组件,消除 4 处重复的通知逻辑
将 state + setTimeout 自动消失逻辑封装为 useToast hook, Toast UI 统一为组件支持 top/bottom 两种位置,净减约 12 行。
This commit is contained in:
@@ -0,0 +1,17 @@
|
||||
import { useState, useCallback, useRef } from "react";
|
||||
|
||||
export function useToast(duration = 2200) {
|
||||
const [message, setMessage] = useState("");
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
|
||||
|
||||
const show = useCallback(
|
||||
(msg: string) => {
|
||||
clearTimeout(timerRef.current);
|
||||
setMessage(msg);
|
||||
timerRef.current = setTimeout(() => setMessage(""), duration);
|
||||
},
|
||||
[duration],
|
||||
);
|
||||
|
||||
return { message, show } as const;
|
||||
}
|
||||
Reference in New Issue
Block a user