From 2588a2b9193d6def11ceb38f76111b87d2ecd853 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Thu, 15 Oct 2015 10:44:58 +0800 Subject: [PATCH 1/4] fix: fix#23. --- src/Slider.jsx | 54 +++++++++++++++++++++++++++++--------------------- 1 file changed, 31 insertions(+), 23 deletions(-) diff --git a/src/Slider.jsx b/src/Slider.jsx index 9a74914..cb1d452 100644 --- a/src/Slider.jsx +++ b/src/Slider.jsx @@ -57,6 +57,7 @@ const Slider = React.createClass({ onChange: React.PropTypes.func, onAfterChange: React.PropTypes.func, tipTransitionName: React.PropTypes.string, + withDots: React.PropTypes.bool, }, getDefaultProps() { @@ -72,6 +73,7 @@ const Slider = React.createClass({ disabled: false, defaultIndex: 0, tipTransitionName: '', + withDots: false, }; }, @@ -208,37 +210,43 @@ const Slider = React.createClass({ renderSteps() { const props = this.props; const marksLen = props.marks.length; - const stepNum = marksLen > 0 ? marksLen : Math.floor((props.max - props.min) / props.step) + 1; - const unit = 100 / (stepNum - 1); + const withDots = props.withDots; - const prefixCls = props.prefixCls; - const stepClassName = prefixClsFn(prefixCls, 'step'); + if (marksLen || withDots) { + const stepNum = marksLen ? marksLen : Math.floor((props.max - props.min) / props.step) + 1; + const unit = 100 / (stepNum - 1); - const elements = []; - for (let i = 0; i < stepNum; i++) { - const offset = unit * i + '%'; - const style = { - left: offset, - }; - let className = prefixClsFn(prefixCls, 'dot'); - if (props.isIncluded) { - if (i <= this.getIndex()) { - className = prefixClsFn(prefixCls, 'dot', 'dot-active'); + const prefixCls = props.prefixCls; + const stepClassName = prefixClsFn(prefixCls, 'step'); + + const elements = []; + for (let i = 0; i < stepNum; i++) { + const offset = unit * i + '%'; + const style = { + left: offset, + }; + let className = prefixClsFn(prefixCls, 'dot'); + if (props.isIncluded) { + if (i <= this.getIndex()) { + className = prefixClsFn(prefixCls, 'dot', 'dot-active'); + } + } else { + className = (i === this.getIndex()) ? prefixClsFn(prefixCls, 'dot', 'dot-active') : className; } - } else { - className = (i === this.getIndex()) ? prefixClsFn(prefixCls, 'dot', 'dot-active') : className; + + elements[i] = ( + + ); } - elements[i] = ( - + return ( +
+ {elements} +
); } - return ( -
- {elements} -
- ); + return null; }, renderMark(i) { From d6779510f916cce97dd4fb7d332aa6914a17bd1c Mon Sep 17 00:00:00 2001 From: SimaQ Date: Thu, 15 Oct 2015 10:45:40 +0800 Subject: [PATCH 2/4] test: update test case. --- README.md | 6 ++++++ examples/simple.js | 1 + tests/index.spec.js | 10 ++++++++-- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 756ce45..98b0739 100644 --- a/README.md +++ b/README.md @@ -142,6 +142,12 @@ React.render(, container); '' Set the animation for tooltip if it shows. + + withDots + bool + false + For linear slider, when the `step` value is greater than 1, you can set the `withDots` to `true` if you want to render the slider bar with dots. + diff --git a/examples/simple.js b/examples/simple.js index af1c84f..a375adf 100644 --- a/examples/simple.js +++ b/examples/simple.js @@ -10,5 +10,6 @@ function onChange(v){ } // React.render(
, document.getElementById('__react-content')); +// React.render(
, document.getElementById('__react-content')); // React.render(
, document.getElementById('__react-content')); React.render(
, document.getElementById('__react-content')); diff --git a/tests/index.spec.js b/tests/index.spec.js index 1e44888..1ea2b4a 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -39,8 +39,14 @@ describe('rc-slider', function () { expect(node.find('.rc-slider').length).to.be(1); expect(node.find('.rc-slider-handle').length).to.be(1); expect(node.find('.rc-slider-track').length).to.be(1); - expect(node.find('.rc-slider-dot').length).to.be(6); expect(slider.state.value).to.be(0); + + var sliderWithDots = React.render( + , + div + ); + var node1 = $(div); + expect(node1.find('.rc-slider-dot').length).to.be(6); }); it('should render a slider with marks correctly!', function () { @@ -64,7 +70,7 @@ describe('rc-slider', function () { // div // ); // var selectedStep = slider.refs.step3.getDOMNode(); - + // Simulate.mouseDown(selectedStep); // setTimeout( function() { From 7bd951072fda036d05db598437762a312b04116a Mon Sep 17 00:00:00 2001 From: SimaQ Date: Thu, 15 Oct 2015 10:46:06 +0800 Subject: [PATCH 3/4] fix: fix disabled style. --- assets/index.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/index.less b/assets/index.less index 4762927..56333a5 100644 --- a/assets/index.less +++ b/assets/index.less @@ -121,13 +121,13 @@ background-color: @disabledColor; } - .@{prefixClass}-handle { + .@{prefixClass}-handle, .@{prefixClass}-dot { border-color: @disabledColor; background-color: #fff; cursor: not-allowed; } - .@{prefixClass}-mark-text, .dot { + .@{prefixClass}-mark-text, .@{prefixClass}-dot { cursor: not-allowed!important; } } @@ -240,4 +240,4 @@ transform-origin: 50% 100%; transform: scale(0, 0); } -} \ No newline at end of file +} From 314fc59d15b38085f5c64679d58da2d54c1ba7d3 Mon Sep 17 00:00:00 2001 From: SimaQ Date: Thu, 15 Oct 2015 10:46:28 +0800 Subject: [PATCH 4/4] updata version. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c45786c..da4079a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-slider", - "version": "1.5.0", + "version": "1.5.1", "description": "slider ui component for react", "keywords": [ "react",