ant-design/components/slider/SliderTooltip.tsx
二货机器人 c5a40fc683
fix: Slider Tooltip not follow handler (#20699)
* fix: Slider Tooltip not follow handler

* force align only when tooltip visible
2020-01-06 20:09:12 +08:00

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} />;
}