test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

fix: Slider Tooltip not follow handler (#20699)

Browse Source 
* fix: Slider Tooltip not follow handler

* force align only when tooltip visible
This commit is contained in:
二货机器人 2020-01-06 20:09:12 +08:00 committed by GitHub
parent 78f5607034
commit c5a40fc683
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/slider/SliderTooltip.tsx Normal file
View File

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

7
components/slider/index.tsx
View File

@ -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<SliderProps, SliderState> {
const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
return (
<Tooltip
<SliderTooltip
prefixCls={tooltipPrefixCls}
title={tipFormatter ? tipFormatter(value) : ''}
visible={visible}
@ -111,7 +112,7 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
onMouseEnter={() => this.toggleTooltipVisible(index, true)}
onMouseLeave={() => this.toggleTooltipVisible(index, false)}
/>
</Tooltip>
</SliderTooltip>
);
};

2
package.json
View File

@ -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",