Skip to content

Commit

Permalink
feat(tooltip): tooltip-lite mouse 模式跟随鼠标位置
Browse files Browse the repository at this point in the history
fix #3225
  • Loading branch information
moecasts committed Dec 24, 2024
1 parent fffe54a commit 4247790
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 5 deletions.
2 changes: 1 addition & 1 deletion src/_common
22 changes: 18 additions & 4 deletions src/tooltip/TooltipLite.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { ReactNode, useState, useRef, useEffect } from 'react';
import React, { ReactNode, useState, useRef, useEffect, useCallback } from 'react';
import classnames from 'classnames';
import { CSSTransition } from 'react-transition-group';
import throttle from 'lodash/throttle';
import { StyledProps } from '../common';
import useSwitch from '../hooks/useSwitch';
import useAnimation from '../hooks/useAnimation';
Expand All @@ -27,26 +28,39 @@ const TooltipLite: React.FC<TooltipLiteProps> = (originalProps) => {
const { classPrefix } = useConfig();
const [hover, hoverAction] = useSwitch();
const [clientX, setHoverClientX] = useState(0);
const [clientY, setHoverClientY] = useState(0);
const [position, setPosition] = useState(null);
const { keepFade } = useAnimation();

useEffect(() => {
if (triggerRef.current && contentRef.current) {
setPosition(getPosition(triggerRef.current, contentRef.current, placement, clientX));
setPosition(getPosition(triggerRef.current, contentRef.current, placement, clientX, clientY));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [triggerRef.current, contentRef.current, placement, hover]);
}, [triggerRef.current, contentRef.current, placement, hover, clientX, clientY]);

const onSwitchHover = (action: String, e: MouseEvent) => {
const updatePosition = (e: MouseEvent) => {
setHoverClientX(e.clientX);
setHoverClientY(e.clientY);
};

const onSwitchHover = (action: String, e: MouseEvent) => {
updatePosition(e);
hoverAction.set(action === 'on');
};

const showTipArrow = showArrow && placement !== 'mouse';

// eslint-disable-next-line react-hooks/exhaustive-deps
const onSwitchMove = useCallback(
throttle((e) => updatePosition(e), 16.7, { trailing: true }),
[],
);

const getTriggerChildren = (children) => {
const appendProps = {
ref: triggerRef,
onMouseMove: onSwitchMove,
onMouseEnter: (e) => onSwitchHover('on', e),
onMouseLeave: (e) => onSwitchHover('off', e),
};
Expand Down

0 comments on commit 4247790

Please sign in to comment.