mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +08:00
c5a40fc683
* fix: Slider Tooltip not follow handler * force align only when tooltip visible
42 lines
942 B
TypeScript
42 lines
942 B
TypeScript
import * as React from 'react';
|
|
import Tooltip, { TooltipProps } from '../tooltip';
|
|
|
|
export default function SliderTooltip(props: TooltipProps) {
|
|
const { visible } = props;
|
|
const tooltipRef = React.useRef<Tooltip>(null);
|
|
|
|
const rafRef = React.useRef<number | null>(null);
|
|
|
|
function cancelKeepAlign() {
|
|
window.cancelAnimationFrame(rafRef.current!);
|
|
rafRef.current = null;
|
|
}
|
|
|
|
function keepAlign() {
|
|
if (rafRef.current !== null) {
|
|
return;
|
|
}
|
|
|
|
rafRef.current = window.requestAnimationFrame(() => {
|
|
if (tooltipRef.current && (tooltipRef.current as any).tooltip) {
|
|
(tooltipRef.current as any).tooltip.forcePopupAlign();
|
|
}
|
|
|
|
rafRef.current = null;
|
|
keepAlign();
|
|
});
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
if (visible) {
|
|
keepAlign();
|
|
} else {
|
|
cancelKeepAlign();
|
|
}
|
|
|
|
return cancelKeepAlign;
|
|
}, [visible]);
|
|
|
|
return <Tooltip ref={tooltipRef} {...props} />;
|
|
}
|