143 lines
4.0 KiB
JavaScript
143 lines
4.0 KiB
JavaScript
// src/hooks/useDelayedMenu.js
|
||
// 导航菜单延迟关闭 Hook - 优化 hover 和 click 交互体验
|
||
|
||
import { useState, useRef, useCallback } from 'react';
|
||
|
||
/**
|
||
* 自定义 Hook：提供带延迟关闭功能的菜单控制
|
||
*
|
||
* 解决问题：
|
||
* 1. 用户快速移动鼠标导致菜单意外关闭
|
||
* 2. Hover 和 Click 状态冲突
|
||
* 3. 从 MenuButton 移动到 MenuList 时菜单闪烁
|
||
*
|
||
* 功能特性：
|
||
* - ✅ Hover 进入：立即打开菜单
|
||
* - ✅ Hover 离开：延迟关闭（默认 200ms）
|
||
* - ✅ Click 切换：支持点击切换打开/关闭状态
|
||
* - ✅ 智能取消：再次 hover 进入时取消关闭定时器
|
||
*
|
||
* @param {Object} options - 配置选项
|
||
* @param {number} options.closeDelay - 延迟关闭时间（毫秒），默认 200ms
|
||
* @returns {Object} 菜单控制对象
|
||
*/
|
||
export function useDelayedMenu({ closeDelay = 200 } = {}) {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const closeTimerRef = useRef(null);
|
||
const isClickedRef = useRef(false); // 追踪是否通过点击打开
|
||
|
||
/**
|
||
* 打开菜单
|
||
* - 立即打开，无延迟
|
||
* - 清除任何待执行的关闭定时器
|
||
*/
|
||
const onOpen = useCallback(() => {
|
||
// 清除待执行的关闭定时器
|
||
if (closeTimerRef.current) {
|
||
clearTimeout(closeTimerRef.current);
|
||
closeTimerRef.current = null;
|
||
}
|
||
setIsOpen(true);
|
||
}, []);
|
||
|
||
/**
|
||
* 延迟关闭菜单
|
||
* - 设置定时器，延迟后关闭
|
||
* - 如果在延迟期间再次 hover 进入，会被 onOpen 取消
|
||
*/
|
||
const onDelayedClose = useCallback(() => {
|
||
// 如果是点击打开的，hover 离开时不自动关闭
|
||
if (isClickedRef.current) {
|
||
return;
|
||
}
|
||
|
||
// 清除之前的定时器（防止重复设置）
|
||
if (closeTimerRef.current) {
|
||
clearTimeout(closeTimerRef.current);
|
||
}
|
||
|
||
// 设置延迟关闭定时器
|
||
closeTimerRef.current = setTimeout(() => {
|
||
setIsOpen(false);
|
||
closeTimerRef.current = null;
|
||
}, closeDelay);
|
||
}, [closeDelay]);
|
||
|
||
/**
|
||
* 立即关闭菜单
|
||
* - 无延迟，立即关闭
|
||
* - 清除所有定时器和状态标记
|
||
*/
|
||
const onClose = useCallback(() => {
|
||
// 清除定时器
|
||
if (closeTimerRef.current) {
|
||
clearTimeout(closeTimerRef.current);
|
||
closeTimerRef.current = null;
|
||
}
|
||
setIsOpen(false);
|
||
isClickedRef.current = false;
|
||
}, []);
|
||
|
||
/**
|
||
* 切换菜单状态（用于点击）
|
||
* - 如果关闭 → 打开，并标记为点击打开
|
||
* - 如果打开 → 关闭，并清除点击标记
|
||
*/
|
||
const onToggle = useCallback(() => {
|
||
if (isOpen) {
|
||
// 当前已打开 → 关闭
|
||
onClose();
|
||
} else {
|
||
// 当前已关闭 → 打开
|
||
onOpen();
|
||
isClickedRef.current = true; // 标记为点击打开
|
||
}
|
||
}, [isOpen, onOpen, onClose]);
|
||
|
||
/**
|
||
* Hover 进入处理
|
||
* - 打开菜单
|
||
* - 清除点击标记（允许 hover 离开时自动关闭）
|
||
*/
|
||
const handleMouseEnter = useCallback(() => {
|
||
onOpen();
|
||
isClickedRef.current = false; // 清除点击标记，允许 hover 控制
|
||
}, [onOpen]);
|
||
|
||
/**
|
||
* Hover 离开处理
|
||
* - 延迟关闭菜单
|
||
*/
|
||
const handleMouseLeave = useCallback(() => {
|
||
onDelayedClose();
|
||
}, [onDelayedClose]);
|
||
|
||
/**
|
||
* 点击处理
|
||
* - 切换菜单状态
|
||
*/
|
||
const handleClick = useCallback(() => {
|
||
onToggle();
|
||
}, [onToggle]);
|
||
|
||
// 组件卸载时清理定时器
|
||
const cleanup = useCallback(() => {
|
||
if (closeTimerRef.current) {
|
||
clearTimeout(closeTimerRef.current);
|
||
closeTimerRef.current = null;
|
||
}
|
||
}, []);
|
||
|
||
return {
|
||
isOpen,
|
||
onOpen,
|
||
onClose,
|
||
onDelayedClose,
|
||
onToggle,
|
||
handleMouseEnter,
|
||
handleMouseLeave,
|
||
handleClick,
|
||
cleanup
|
||
};
|
||
}
|