diff --git a/components/slider/SliderTooltip.tsx b/components/slider/SliderTooltip.tsx new file mode 100644 index 000000000000..92d079313afa --- /dev/null +++ b/components/slider/SliderTooltip.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import Tooltip, { TooltipProps } from '../tooltip'; + +export default function SliderTooltip(props: TooltipProps) { + const { visible } = props; + const tooltipRef = React.useRef(null); + + const rafRef = React.useRef(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 ; +} diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 75247d71776a..948addadb1f8 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -3,7 +3,8 @@ import RcSlider from 'rc-slider/lib/Slider'; import RcRange from 'rc-slider/lib/Range'; import RcHandle from 'rc-slider/lib/Handle'; import classNames from 'classnames'; -import Tooltip, { TooltipPlacement } from '../tooltip'; +import { TooltipPlacement } from '../tooltip'; +import SliderTooltip from './SliderTooltip'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface SliderMarks { @@ -95,7 +96,7 @@ export default class Slider extends React.Component { const isTipFormatter = tipFormatter ? visibles[index] || dragging : false; const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter); return ( - { onMouseEnter={() => this.toggleTooltipVisible(index, true)} onMouseLeave={() => this.toggleTooltipVisible(index, false)} /> - + ); }; diff --git a/package.json b/package.json index 5b731015007c..252902a4d946 100644 --- a/package.json +++ b/package.json @@ -126,7 +126,7 @@ "rc-tooltip": "~4.0.0-alpha.3", "rc-tree": "~3.0.0-alpha.37", "rc-tree-select": "~3.0.0-alpha.5", - "rc-trigger": "~4.0.0-alpha.7", + "rc-trigger": "~4.0.0-rc.0", "rc-upload": "~3.0.0-alpha.0", "rc-util": "^4.17.0", "rc-virtual-list": "^0.0.0-alpha.25",