From 99038c880f3442154a0ff05d7a7a76af68dfedcf Mon Sep 17 00:00:00 2001 From: Ihor Oziian Date: Tue, 26 Dec 2017 18:28:00 +0200 Subject: [PATCH 1/6] Added forceVisible parameter to tipProps. If need always to show toolTip value. --- src/createSliderWithTooltip.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/createSliderWithTooltip.jsx b/src/createSliderWithTooltip.jsx index 8e4d7c18f..b54a9875d 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', + forceVisible = forceVisible || 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)) || forceVisible} key={index} > + Date: Tue, 26 Dec 2017 19:15:31 +0200 Subject: [PATCH 2/6] Fix tabs --- src/createSliderWithTooltip.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/createSliderWithTooltip.jsx b/src/createSliderWithTooltip.jsx index b54a9875d..c007c8c2d 100644 --- a/src/createSliderWithTooltip.jsx +++ b/src/createSliderWithTooltip.jsx @@ -40,7 +40,7 @@ export default function createSliderWithTooltip(Component) { prefixCls = 'rc-slider-tooltip', overlay = tipFormatter(value), placement = 'top', - forceVisible = forceVisible || false, + forceVisible = forceVisible || false, ...restTooltipProps, } = tipProps; From 135c592c66aa83440b89f6a31bbb493b424dcf49 Mon Sep 17 00:00:00 2001 From: Greg Vincent Date: Thu, 4 Jan 2018 09:05:17 -0500 Subject: [PATCH 3/6] Allow tabIndex to be set explicitly on Handle (#381) --- README.md | 2 ++ src/Handle.jsx | 5 +++-- src/Range.jsx | 4 ++++ src/Slider.jsx | 3 +++ tests/Range.test.js | 6 ++++++ tests/Slider.test.js | 5 +++++ 6 files changed, 23 insertions(+), 2 deletions(-) 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/src/Handle.jsx b/src/Handle.jsx index 27514faa3..a23fda460 100644 --- a/src/Handle.jsx +++ b/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 {
(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 8f1d0991e..3d977b6a5 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) { @@ -299,6 +301,7 @@ class Range extends React.Component { handle: handleGenerator, trackStyle, handleStyle, + tabIndex, } = this.props; const offsets = bounds.map(v => this.calcOffset(v)); @@ -314,6 +317,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/tests/Range.test.js b/tests/Range.test.js index 77f0477c7..3a5f0b0a8 100644 --- a/tests/Range.test.js +++ b/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(); + 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); From 7a021d451521615083790d81a88d21a6d60879ff Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Tue, 9 Jan 2018 12:40:44 +0800 Subject: [PATCH 4/6] Bump 8.6.0 --- HISTORY.md | 4 ++++ package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) 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/package.json b/package.json index c29882fc7..dc4d6b124 100644 --- a/package.json +++ b/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", From 21d9dce665803670c68adbabbb24236de0f45bb6 Mon Sep 17 00:00:00 2001 From: Ihor Oziian Date: Thu, 11 Jan 2018 21:52:56 +0200 Subject: [PATCH 5/6] Rename forceVisible to visible --- src/createSliderWithTooltip.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/createSliderWithTooltip.jsx b/src/createSliderWithTooltip.jsx index c007c8c2d..a27f54268 100644 --- a/src/createSliderWithTooltip.jsx +++ b/src/createSliderWithTooltip.jsx @@ -40,7 +40,7 @@ export default function createSliderWithTooltip(Component) { prefixCls = 'rc-slider-tooltip', overlay = tipFormatter(value), placement = 'top', - forceVisible = forceVisible || false, + visible = visible || false, ...restTooltipProps, } = tipProps; @@ -50,7 +50,7 @@ export default function createSliderWithTooltip(Component) { prefixCls={prefixCls} overlay={overlay} placement={placement} - visible={(!disabled && (this.state.visibles[index] || dragging)) || forceVisible} + visible={(!disabled && (this.state.visibles[index] || dragging)) || visible} key={index} > From 55d8f0162dd92a33fffe5f7f30f32141afe40fff Mon Sep 17 00:00:00 2001 From: Gordeev Boris Date: Sat, 27 Jan 2018 12:58:53 +0300 Subject: [PATCH 6/6] Fixed a typo on 'slider' example page. ('deperacate' -> 'deprecated') --- examples/slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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)