From 5f91e9a64825711aa50cbcd8fc92c113a42c75b2 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 16 Nov 2015 14:05:23 +0800 Subject: [PATCH 1/3] chore: update examples --- examples/marks.html | 1 + examples/marks.js | 42 ++++++++++++++++++++++++++++++++++++++++++ examples/simple.js | 38 ++++++++++++++------------------------ 3 files changed, 57 insertions(+), 24 deletions(-) create mode 100644 examples/marks.html create mode 100644 examples/marks.js diff --git a/examples/marks.html b/examples/marks.html new file mode 100644 index 0000000..48cdce8 --- /dev/null +++ b/examples/marks.html @@ -0,0 +1 @@ +placeholder diff --git a/examples/marks.js b/examples/marks.js new file mode 100644 index 0000000..7268846 --- /dev/null +++ b/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( +
+
+

Slider with marks, `included=true`

+ +
+
+

Slider with marks and steps, `included=true`

+ +
+ +
+

Slider with marks, `included=false`

+ +
+
+

Slider with marks and steps, `included=false`

+ +
+ +
+

Range with marks

+ +
+
+

Range with marks and steps

+ +
+
+ , document.getElementById('__react-content')); diff --git a/examples/simple.js b/examples/simple.js index fc65350..bd75880 100644 --- a/examples/simple.js +++ b/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(
-

基础滑块

- +

Basic Slider

+
-

基础滑块，step=20

+

Basic Slider，`step=20`

-

基础滑块，step=20 带圆点

+

Basic Slider，`step=20, dots`

-

双滑块

- +

Basic Slider with `tipFormatter`

+
-

双滑块，step=20

- +

Basic Range

+
-

分段式滑块（包含关系）

- +

Basic Range，`step=20`

+
-

分段式滑块 (双)

- -
-
-

分段式滑块（并列关系）

- -
-
-

基础滑块

- +

Basic Range，`step=20, dots`

+
, document.getElementById('__react-content')); From 315849a0f30328a72b9dcaabb04d9adfd15e480c Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 16 Nov 2015 14:09:00 +0800 Subject: [PATCH 2/3] refactor: rename variables --- src/Slider.jsx | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/Slider.jsx b/src/Slider.jsx index 0691640..56f5e24 100644 --- a/src/Slider.jsx +++ b/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({ From 5e559a1555d86a4527fbafd9dd990ab13e1189da Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 16 Nov 2015 16:15:51 +0800 Subject: [PATCH 3/3] chore: update test case --- tests/index.spec.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/tests/index.spec.js b/tests/index.spec.js index 57e6341..826efbc 100644 --- a/tests/index.spec.js +++ b/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 () {