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

Add focus() and blur() for Slider

Browse Source
This commit is contained in:
Wei Zhu 2017-12-01 18:01:14 +08:00
parent ee93047bad
commit 25f51cdd64
2 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/slider/index.tsx
View File

@ -54,6 +54,8 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
},
};
private rcSlider: any;
constructor(props: SliderProps) {
super(props);
this.state = {
@ -92,11 +94,23 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
);
}
focus() {
this.rcSlider.focus();
}
blur() {
this.rcSlider.focus();
}
saveSlider = (node: any) => {
this.rcSlider = node;
}
render() {
const { range, ...restProps } = this.props;
if (range) {
return <RcRange {...restProps} handle={this.handleWithTooltip} />;
return <RcRange {...restProps} ref={this.saveSlider} handle={this.handleWithTooltip} />;
}
return <RcSlider {...restProps} handle={this.handleWithTooltip} />;
return <RcSlider {...restProps} ref={this.saveSlider} handle={this.handleWithTooltip} />;
}
}

6
components/slider/style/index.less
View File

@ -54,6 +54,12 @@
background-color: @component-background;
transition: border-color .3s, transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
&:focus {
border-color: tint(@primary-color, 20%);
box-shadow: 0 0 0 5px tint(@primary-color, 50%);
outline: none;
}
&.@{ant-prefix}-tooltip-open {
border-color: @primary-color;
}