feat add isIncluded props closes #8

react-component · Jul 13, 2015 · 855bcda · 855bcda
1 parent 85336f8
commit 855bcda
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -106,6 +106,12 @@ React.render(<Rcslider />, container);
           <td>[]</td>
           <td>mark every step for the slider, it will ignore the `step` parameter if it has been defined</td>
         </tr>
+        <tr>
+          <td>isIncluded</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>if the value is true, it means a continuous value interval, otherwise, it is a independent value.</td>
+        </tr>
         <tr>
           <td>index</td>
           <td>number</td>

diff --git a/src/Slider.jsx b/src/Slider.jsx
@@ -28,6 +28,7 @@ var Slider = React.createClass({
     value: React.PropTypes.number,
     index: React.PropTypes.number,
     marks: React.PropTypes.array,
+    isIncluded: React.PropTypes.bool,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     onBeforeChange: React.PropTypes.func,
@@ -42,6 +43,7 @@ var Slider = React.createClass({
       step: 1,
       value: 0,
       marks: [],
+      isIncluded: true,
       className: 'rc-slider',
       disabled: false,
       index: 0
@@ -310,8 +312,12 @@ var Slider = React.createClass({
         left: offset.toFixed(5)
       };
       var className = prefixClsFn(prefixCls, 'dot');
-      if (i <= this.getIndex() || (this._calcValue(offset) <= this.getValue())) {
-        className = prefixClsFn(prefixCls, 'dot', 'dot-active');
+      if (props.isIncluded) {
+        if (i <= this.getIndex() || (this._calcValue(offset) <= this.getValue())) {
+          className = prefixClsFn(prefixCls, 'dot', 'dot-active');
+        }
+      } else {
+        className = (i === this.getIndex()) ? prefixClsFn(prefixCls, 'dot', 'dot-active') : className;
       }
 
       elements[i] = (
@@ -345,8 +351,12 @@ var Slider = React.createClass({
     var prefixCls = this.props.className;
     var className = prefixClsFn(prefixCls, 'mark-text');
 
-    if (i <= this.getIndex()) {
-      className = prefixClsFn(prefixCls, 'mark-text', 'mark-text-active');
+    if (this.props.isIncluded) {
+      if (i <= this.getIndex()) {
+        className = prefixClsFn(prefixCls, 'mark-text', 'mark-text-active');
+      }
+    } else {
+      className = (i === this.getIndex()) ? prefixClsFn(prefixCls, 'mark-text', 'mark-text-active') : className;
     }
 
     return (
@@ -422,7 +432,7 @@ var Slider = React.createClass({
     var value = state.value;
     var offset = this._calcOffset(value);
 
-    var track = this.renderTrack(offset);
+    var track = this.props.isIncluded ? this.renderTrack(offset) : null;
     var handles = this.renderHandle(offset);
     var steps = (props.step > 1 || props.marks.length > 0) ? this.renderSteps() : null;
     var sliderMarks = (props.marks.length > 0) ? this.renderMarks() : null;