diff --git a/HISTORY.md b/HISTORY.md index 630cda6a0..79c3c02d4 100644 --- a/HISTORY.md +++ b/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. diff --git a/README.md b/README.md index ab1bfa4ae..47c1f4be3 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,7 @@ 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 @@ -127,6 +128,7 @@ The following APIs are shared by Slider and Range. | ------------ | ------- | ------- | ----------- | | 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) | diff --git a/examples/slider.js b/examples/slider.js index cf63a9f6b..857463945 100644 --- a/examples/slider.js +++ b/examples/slider.js @@ -108,7 +108,7 @@ ReactDOM.render( />
-

Slider with custom handle and track style.(old api, will be deperacete)

+

Slider with custom handle and track style.(old api, will be deprecated)

(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, }; diff --git a/src/Range.jsx b/src/Range.jsx index 167a255a9..47c6e0f66 100644 --- a/src/Range.jsx +++ b/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, diff --git a/src/Slider.jsx b/src/Slider.jsx index d2fd268a6..839d35027 100644 --- a/src/Slider.jsx +++ b/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), }); diff --git a/src/createSliderWithTooltip.jsx b/src/createSliderWithTooltip.jsx index 8e4d7c18f..a27f54268 100644 --- a/src/createSliderWithTooltip.jsx +++ b/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} > + { expect(trackStyle.visibility).toMatch('visible'); }); + it('should render Range with tabIndex correctly', () => { + const wrapper = mount(); + 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(); expect(wrapper.state('bounds')[0]).toBe(0); diff --git a/tests/Slider.test.js b/tests/Slider.test.js index 3d9d169f6..e829436f1 100644 --- a/tests/Slider.test.js +++ b/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(); + expect(wrapper.find('.rc-slider-handle').at(1).props().tabIndex).toEqual(1); + }); + it('increases the value when key "up" is pressed', () => { const wrapper = mount(); const handler = wrapper.find('.rc-slider-handle').at(1);