Merge pull request #38 from react-component/chore

Chore

examples/marks.html

@@ -0,0 +1 @@
+placeholder

examples/marks.js

@@ -0,0 +1,42 @@
+'use strict';
+
+require('rc-slider/assets/index.less');
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var Slider = require('rc-slider');
+
+var style = {width: 400, margin: 50};
+var marks = ['A','B','C','D', 'E', 'F'];
+var log = console.log.bind(console);
+
+ReactDOM.render(
+  <div>
+    <div style={style}>
+      <p>Slider with marks, `included=true`</p>
+      <Slider marks={marks} defaultIndex={1} />
+    </div>
+    <div style={style}>
+      <p>Slider with marks and steps, `included=true`</p>
+      <Slider marks={marks} step={10} defaultIndex={1} />
+    </div>
+
+    <div style={style}>
+      <p>Slider with marks, `included=false`</p>
+      <Slider marks={marks} included={false} defaultIndex={1} />
+    </div>
+    <div style={style}>
+      <p>Slider with marks and steps, `included=false`</p>
+      <Slider marks={marks} step={10} included={false} defaultIndex={1} />
+    </div>
+
+    <div style={style}>
+      <p>Range with marks</p>
+      <Slider range marks={marks} onChange={log} defaultIndex={[1,2]} />
+    </div>
+    <div style={style}>
+      <p>Range with marks and steps</p>
+      <Slider range marks={marks} step={10} onChange={log} defaultIndex={[1,2]} />
+    </div>
+  </div>
+  , document.getElementById('__react-content'));

examples/simple.js

@@ -5,54 +5,44 @@ require('rc-slider/assets/index.less');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var Slider = require('rc-slider');
-var style = {width:400,margin:50};
 
+var style = {width: 400, margin: 50};
 var log = console.log.bind(console);
 
 
-var marks = ["状态1","状态2","状态3","状态4"];
-
 function percentFormatter(v) {
-  return v + " %";
+  return v + ' %';
 }
 
 ReactDOM.render(
   <div>
     <div style={style}>
-      <p>基础滑块</p>
-      <Slider onChange={log} tipTransitionName='rc-slider-tooltip-zoom-down' />
+      <p>Basic Slider</p>
+      <Slider tipTransitionName='rc-slider-tooltip-zoom-down' onChange={log} />
     </div>
     <div style={style}>
-      <p>基础滑块，step=20</p>
+      <p>Basic Slider，`step=20`</p>
       <Slider step={20} />
     </div>
     <div style={style}>
-      <p>基础滑块，step=20 带圆点</p>
+      <p>Basic Slider，`step=20, dots`</p>
       <Slider dots step={20} />
     </div>
     <div style={style}>
-      <p>双滑块</p>
-      <Slider range min={10} max={90} defaultValue={[0, 30]} onChange={log} />
+      <p>Basic Slider with `tipFormatter`</p>
+      <Slider tipFormatter={percentFormatter} tipTransitionName='rc-slider-tooltip-zoom-down' onChange={log} />
     </div>
     <div style={style}>
-      <p>双滑块，step=20 </p>
-      <Slider range dots step={20} defaultValue={[0, 30]} onAfterChange={log} included={false} />
+      <p>Basic Range</p>
+      <Slider range defaultValue={[0, 20]} onChange={log} />
     </div>
     <div style={style}>
-      <p>分段式滑块（包含关系）</p>
-      <Slider marks={marks} defaultIndex={1} />
+      <p>Basic Range，`step=20` </p>
+      <Slider range step={20} defaultValue={[20, 40]} onAfterChange={log} />
     </div>
     <div style={style}>
-      <p>分段式滑块 (双)</p>
-      <Slider range marks={marks} onChange={log} defaultIndex={[1,2]} />
-    </div>
-    <div style={style}>
-      <p>分段式滑块（并列关系）</p>
-      <Slider marks={marks} included={false} defaultIndex={1} />
-    </div>
-    <div style={style}>
-      <p>基础滑块</p>
-      <Slider onChange={log} tipFormatter={percentFormatter} tipTransitionName='rc-slider-tooltip-zoom-down' />
+      <p>Basic Range，`step=20, dots` </p>
+      <Slider range dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
     </div>
   </div>
   , document.getElementById('__react-content'));

src/Slider.jsx

@@ -194,15 +194,15 @@ class Slider extends React.Component {
     return Math.round(value / unit);
   }
 
-  getBoundsFromIndex(value, props) {
+  getBoundsFromIndex(indexes, props) {
     if (props.range) {
       return {
-        lowerBound: this.calcValueFromIndex(value[0], props),
-        upperBound: this.calcValueFromIndex(value[1], props),
+        lowerBound: this.calcValueFromIndex(indexes[0], props),
+        upperBound: this.calcValueFromIndex(indexes[1], props),
       };
     }
     return {
-      upperBound: this.calcValueFromIndex(value, props),
+      upperBound: this.calcValueFromIndex(indexes, props),
     };
   }
 
@@ -224,9 +224,11 @@ class Slider extends React.Component {
 
   trimAlignValue(v) {
     const state = this.state || {};
+    const {handle, lowerBound, upperBound} = state;
     const props = this.props;
     const {marks, min, max} = props;
-    const step = marks.length > 0 ? (max - min) / (marks.length - 1) : props.step;
+    const marksLen = marks.length;
+    const step = (marksLen > 0) ? (max - min) / (marksLen - 1) : props.step;
 
     let val = v;
     if (val <= min) {
@@ -235,16 +237,16 @@ class Slider extends React.Component {
     if (val >= max) {
       val = max;
     }
-    if (state.handle === 'upperBound' && val <= state.lowerBound) {
-      val = state.lowerBound;
+    if (handle === 'upperBound' && val <= lowerBound) {
+      val = lowerBound;
     }
-    if (state.handle === 'lowerBound' && val >= state.upperBound) {
-      val = state.upperBound;
+    if (handle === 'lowerBound' && val >= upperBound) {
+      val = upperBound;
     }
 
     const valModStep = (val - min) % step;
-    let alignValue = val - valModStep;
 
+    let alignValue = val - valModStep;
     if (Math.abs(valModStep) * 2 >= step) {
       alignValue += (valModStep > 0) ? step : (-step);
     }
@@ -274,8 +276,7 @@ class Slider extends React.Component {
     const marksLen = props.marks.length;
     if (marksLen > 0) {
       const value = ((props.max - props.min) / (marksLen - 1)) * (index);
-      // `'1' / 1 => 1`, to make sure that the returned value is a `Number`.
-      return value.toFixed(5) / 1;
+      return parseFloat(value.toFixed(5));
     }
     return ('value' in props ? props.value : props.defaultValue);
   }
@@ -329,9 +330,8 @@ class Slider extends React.Component {
 
   render() {
     const {handle, upperBound, lowerBound} = this.state;
-    const props = this.props;
-    const {className, prefixCls, disabled, included, isIncluded, dots, range} = props;
-    const {marks, step, max, min, tipTransitionName, tipFormatter, children} = props;
+    const {className, prefixCls, disabled, included, isIncluded, dots, range,
+           marks, step, max, min, tipTransitionName, tipFormatter, children} = this.props;
     const marksLen = marks.length;
 
     const sliderClassName = classSet({

tests/index.spec.js

@@ -8,13 +8,17 @@ var Simulate = TestUtils.Simulate;
 var $ = require('jquery');
 require('../assets/index.less');
 
+if (typeof initMochaPhantomJS === 'function') {
+  initMochaPhantomJS()
+}
+
 describe('rc-slider', function () {
   this.timeout(5000);
   var div = document.createElement('div');
   document.body.appendChild(div);
 
   afterEach(function () {
-    React.unmountComponentAtNode(div);
+    ReactDOM.unmountComponentAtNode(div);
   });
 
   it('should render a simple slider with value correctly!', function () {