Merge branch 'rc/master' into bugfix/keep-pushable

HISTORY.md

@@ -1,6 +1,10 @@
 # History
 ----
 
+## 8.6.0
+
+[Feature] Allow tabIndex to be set explicitly on Handle. [#381](https://github.com/react-component/slider/pull/381)
+
 ## 8.5.0
 
 [Feature] Add focus() blur() and autoFocus.

README.md

@@ -120,13 +120,15 @@ The following APIs are shared by Slider and Range.
 | ------------ | ------- | ------- | ----------- |
 | defaultValue | number | `0` | Set initial value of slider. |
 | value | number | - | Set current value of slider. |
+| tabIndex | number | `0` | Set the tabIndex of the slider handle. |
 
 ### Range
 
 | Name         | Type    | Default | Description |
 | ------------ | ------- | ------- | ----------- |
 | defaultValue | `number[]` | `[0, 0]` | Set initial positions of handles. |
 | value | `number[]` | | Set current positions of handles. |
+| tabIndex | number[] | `[0, 0]` | Set the tabIndex of each handle. |
 | count | number | `1` | Determine how many ranges to render, and multiple handles will be rendered (number + 1). |
 | allowCross | boolean | `true` | `allowCross` could be set as `true` to allow those handles to cross. |
 | pushable | boolean or number | `false` | `pushable` could be set as `true` to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles. Example: ![](http://i.giphy.com/l46Cs36c9HrHMExoc.gif) |

examples/slider.js

@@ -108,7 +108,7 @@ ReactDOM.render(
       />
     </div>
     <div style={style}>
-      <p>Slider with custom handle and track style.<strong>(old api, will be deperacete)</strong></p>
+      <p>Slider with custom handle and track style.<strong>(old api, will be deprecated)</strong></p>
       <Slider
         defaultValue={30}
         maximumTrackStyle={{ backgroundColor: 'red', height: 10 }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-slider",
-  "version": "8.5.0",
+  "version": "8.6.0",
   "description": "Slider UI component for React",
   "keywords": [
     "react",

src/Handle.jsx

@@ -12,7 +12,7 @@ export default class Handle extends React.Component {
 
   render() {
     const {
-      className, vertical, offset, style, disabled, min, max, value, ...restProps,
+      className, vertical, offset, style, disabled, min, max, value, tabIndex, ...restProps,
     } = this.props;
 
     const postionStyle = vertical ? { bottom: `${offset}%` } : { left: `${offset}%` };
@@ -34,7 +34,7 @@ export default class Handle extends React.Component {
       <div
         ref={node => (this.handle = node)}
         role="slider"
-        tabIndex="0"
+        tabIndex= {tabIndex || 0}
         {...ariaProps}
         {...restProps}
         className={className}
@@ -53,4 +53,5 @@ Handle.propTypes = {
   min: PropTypes.number,
   max: PropTypes.number,
   value: PropTypes.number,
+  tabIndex: PropTypes.number,
 };

src/Range.jsx

@@ -20,12 +20,14 @@ class Range extends React.Component {
     ]),
     allowCross: PropTypes.bool,
     disabled: PropTypes.bool,
+    tabIndex: PropTypes.arrayOf(PropTypes.number),
   };
 
   static defaultProps = {
     count: 1,
     allowCross: true,
     pushable: false,
+    tabIndex: [],
   };
 
   constructor(props) {
@@ -300,6 +302,7 @@ class Range extends React.Component {
       handle: handleGenerator,
       trackStyle,
       handleStyle,
+      tabIndex,
     } = this.props;
 
     const offsets = bounds.map(v => this.calcOffset(v));
@@ -315,6 +318,7 @@ class Range extends React.Component {
       value: v,
       dragging: handle === i,
       index: i,
+      tabIndex: tabIndex[i] || 0,
       min,
       max,
       disabled,

src/Slider.jsx

@@ -12,6 +12,7 @@ class Slider extends React.Component {
     value: PropTypes.number,
     disabled: PropTypes.bool,
     autoFocus: PropTypes.bool,
+    tabIndex: PropTypes.number,
   };
 
   constructor(props) {
@@ -143,6 +144,7 @@ class Slider extends React.Component {
       minimumTrackStyle,
       trackStyle,
       handleStyle,
+      tabIndex,
       min,
       max,
       handle: handleGenerator,
@@ -159,6 +161,7 @@ class Slider extends React.Component {
       min,
       max,
       index: 0,
+      tabIndex,
       style: handleStyle[0] || handleStyle,
       ref: h => this.saveHandle(0, h),
     });

src/createSliderWithTooltip.jsx

@@ -40,6 +40,7 @@ export default function createSliderWithTooltip(Component) {
         prefixCls = 'rc-slider-tooltip',
         overlay = tipFormatter(value),
         placement = 'top',
+        visible = visible || false,
         ...restTooltipProps,
       } = tipProps;
 
@@ -49,9 +50,10 @@ export default function createSliderWithTooltip(Component) {
           prefixCls={prefixCls}
           overlay={overlay}
           placement={placement}
-          visible={!disabled && (this.state.visibles[index] || dragging)}
+          visible={(!disabled && (this.state.visibles[index] || dragging)) || visible}
           key={index}
         >
+
           <Handle
             {...restProps}
             style={{

tests/Range.test.js

@@ -31,6 +31,12 @@ describe('Range', () => {
     expect(trackStyle.visibility).toMatch('visible');
   });
 
+  it('should render Range with tabIndex correctly', () => {
+    const wrapper = mount(<Range tabIndex={[1, 2]} />);
+    expect(wrapper.find('.rc-slider-handle > .rc-slider-handle').at(0).props().tabIndex).toEqual(1);
+    expect(wrapper.find('.rc-slider-handle > .rc-slider-handle').at(1).props().tabIndex).toEqual(2);
+  });
+
   it('should render Multi-Range with value correctly', () => {
     const wrapper = mount(<Range count={3} value={[0, 25, 50, 75]} />);
     expect(wrapper.state('bounds')[0]).toBe(0);

tests/Slider.test.js

@@ -22,6 +22,11 @@ describe('Slider', () => {
     expect(trackStyle.visibility).toMatch('visible');
   });
 
+  it('should allow tabIndex to be set on Handle via Slider', () => {
+    const wrapper = mount(<Slider tabIndex={1} />);
+    expect(wrapper.find('.rc-slider-handle').at(1).props().tabIndex).toEqual(1);
+  });
+
   it('increases the value when key "up" is pressed', () => {
     const wrapper = mount(<Slider defaultValue={50} />);
     const handler = wrapper.find('.rc-slider-handle').at(1);