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 5, 2024
1 parent 2c09fbe commit cb14857
Showing 1 changed file with 18 additions and 4 deletions.
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';
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));

Check failure on line 37 in src/tooltip/TooltipLite.tsx

View workflow job for this annotation

GitHub Actions / call-test-build / build

Expected 3-4 arguments, but got 5.

Check failure on line 37 in src/tooltip/TooltipLite.tsx

View workflow job for this annotation

GitHub Actions / call-test-build / test

Expected 3-4 arguments, but got 5.
}
// 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 cb14857

Please sign in to comment.