test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

fix: Slider's Tooltip should not blink, close: #5003

Browse Source
This commit is contained in:
Benjy Cui 2017-02-23 17:03:18 +08:00
parent 1c837963e2
commit 1f844c1048
1 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/slider/index.tsx
View File

@ -43,30 +43,36 @@ export default class Slider extends React.Component<SliderProps, any> {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { visibles: {} }; this.state = {
visibles: {},
};
} }
handleTooltipVisibleChange = (index, visible) => { toggleTooltipVisible = (index, visible) => {
this.setState({ this.setState(({ visibles }) => ({
visibles: { visibles: {
...this.state.visibles, ...visibles,
[index]: visible, [index]: visible,
}, },
}); }));
} }
handleWithTooltip = ({ value, dragging, index, ...restProps }) => { handleWithTooltip = ({ value, dragging, index, ...restProps }) => {
const { tooltipPrefixCls, tipFormatter } = this.props; const { tooltipPrefixCls, tipFormatter } = this.props;
const { visibles } = this.state;
return ( return (
<Tooltip <Tooltip
prefixCls={tooltipPrefixCls} prefixCls={tooltipPrefixCls}
title={tipFormatter ? tipFormatter(value) : ''} title={tipFormatter ? tipFormatter(value) : ''}
visible={tipFormatter && (this.state.visibles[index] || dragging)} visible={tipFormatter && (visibles[index] || dragging)}
onVisibleChange={visible => this.handleTooltipVisibleChange(index, visible)}
placement="top" placement="top"
transitionName="zoom-down" transitionName="zoom-down"
key={index} key={index}
> >
<RcHandle {...restProps} /> <RcHandle
{...restProps}
onMouseEnter={() => this.toggleTooltipVisible(index, true)}
onMouseLeave={() => this.toggleTooltipVisible(index, false)}
/>
</Tooltip> </Tooltip>
); );
} }