From d5891c79dfca28bf2096cb6ab2ebe0d680a054c5 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 17 Nov 2015 09:48:35 +0800 Subject: [PATCH 1/6] chore: update examples --- examples/range.html | 1 + examples/range.js | 31 +++++++++++++++++++++++++++ examples/{simple.html => slider.html} | 0 examples/{simple.js => slider.js} | 16 ++++---------- 4 files changed, 36 insertions(+), 12 deletions(-) create mode 100644 examples/range.html create mode 100644 examples/range.js rename examples/{simple.html => slider.html} (100%) rename examples/{simple.js => slider.js} (66%) diff --git a/examples/range.html b/examples/range.html new file mode 100644 index 0000000..48cdce8 --- /dev/null +++ b/examples/range.html @@ -0,0 +1 @@ +placeholder diff --git a/examples/range.js b/examples/range.js new file mode 100644 index 0000000..0fabeeb --- /dev/null +++ b/examples/range.js @@ -0,0 +1,31 @@ +'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 log = console.log.bind(console); + +ReactDOM.render( +
+
+

Basic Range

+ +
+
+

Basic Range，`step=20`

+ +
+
+

Basic Range，`step=20, dots`

+ +
+
+

Controlled Range，`step=20, dots`

+ +
+
+ , document.getElementById('__react-content')); diff --git a/examples/simple.html b/examples/slider.html similarity index 100% rename from examples/simple.html rename to examples/slider.html diff --git a/examples/simple.js b/examples/slider.js similarity index 66% rename from examples/simple.js rename to examples/slider.js index bd75880..1fdd974 100644 --- a/examples/simple.js +++ b/examples/slider.js @@ -22,27 +22,19 @@ ReactDOM.render(

Basic Slider，`step=20`

- +

Basic Slider，`step=20, dots`

- +

Basic Slider with `tipFormatter`

-

Basic Range

- -
-
-

Basic Range，`step=20`

- -
-
-

Basic Range，`step=20, dots`

- +

Controlled Slider

+
, document.getElementById('__react-content')); From ae4be7392d690941a3920662be10ed0fd58dd1d1 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 17 Nov 2015 09:54:09 +0800 Subject: [PATCH 2/6] feat: unify `onBeforeChange` `onChange` `onAfterChange` --- src/Slider.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Slider.jsx b/src/Slider.jsx index 56f5e24..4a35fd3 100644 --- a/src/Slider.jsx +++ b/src/Slider.jsx @@ -144,7 +144,7 @@ class Slider extends React.Component { } onStart(position) { - this.triggerEvents('onBeforeChange'); + this.triggerEvents('onBeforeChange', this.getValue()); const value = this.calcValueByPos(position); this.startValue = value; From 6f0e618a3021327f6ee8224df03f293b98a57728 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 17 Nov 2015 10:31:10 +0800 Subject: [PATCH 3/6] fix: `Slider` should be a controlled component --- examples/marks.js | 4 ++-- examples/range.js | 23 ++++++++++++++++++++++- examples/slider.js | 21 +++++++++++++++++++++ src/Slider.jsx | 28 +++++++++++++++++++++++++--- 4 files changed, 70 insertions(+), 6 deletions(-) diff --git a/examples/marks.js b/examples/marks.js index 7268846..22e408c 100644 --- a/examples/marks.js +++ b/examples/marks.js @@ -14,7 +14,7 @@ ReactDOM.render(

Slider with marks, `included=true`

- +

Slider with marks and steps, `included=true`

@@ -36,7 +36,7 @@ ReactDOM.render(

Range with marks and steps

- +
, document.getElementById('__react-content')); diff --git a/examples/range.js b/examples/range.js index 0fabeeb..42d5545 100644 --- a/examples/range.js +++ b/examples/range.js @@ -9,6 +9,23 @@ var Slider = require('rc-slider'); var style = {width: 400, margin: 50}; var log = console.log.bind(console); +var CustomizedRange = React.createClass({ + getInitialState: function() { + return { + value: [20, 40] + } + }, + onChange: function(value) { + log(value); + this.setState({ + value: value + }); + }, + render: function() { + return ; + } +}); + ReactDOM.render(
@@ -24,8 +41,12 @@ ReactDOM.render(
-

Controlled Range，`step=20, dots`

+

Controlled Range

+
+

Customized Range

+ +
, document.getElementById('__react-content')); diff --git a/examples/slider.js b/examples/slider.js index 1fdd974..beb7656 100644 --- a/examples/slider.js +++ b/examples/slider.js @@ -14,6 +14,23 @@ function percentFormatter(v) { return v + ' %'; } +var CustomizedSlider = React.createClass({ + getInitialState: function() { + return { + value: 50 + } + }, + onChange: function(value) { + log(value); + this.setState({ + value: value + }); + }, + render: function() { + return ; + } +}); + ReactDOM.render(
@@ -36,5 +53,9 @@ ReactDOM.render(

Controlled Slider

+
+

Customized Slider

+ +
, document.getElementById('__react-content')); diff --git a/src/Slider.jsx b/src/Slider.jsx index 4a35fd3..4dde98a 100644 --- a/src/Slider.jsx +++ b/src/Slider.jsx @@ -120,10 +120,13 @@ class Slider extends React.Component { const oldValue = state[state.handle]; if (value === oldValue) return; + // If it is not controlled component if (!('value' in props) && !('index' in props)) { this.setState({[state.handle]: value}, () => { this.triggerEvents('onChange', this.getValue()); }); + } else { + this.triggerEvents('onChange', this.getChangedValue(state.handle, value)); } } @@ -173,10 +176,19 @@ class Slider extends React.Component { this.setState({ handle: valueNeedChanging, recent: valueNeedChanging, - [valueNeedChanging]: value, - }, () => { - this.triggerEvents('onChange', this.getValue()); }); + + const props = this.props; + // If it is not controlled component + if (!('value' in props) && !('index' in props)) { + this.setState({ + [valueNeedChanging]: value, + }, () => { + this.triggerEvents('onChange', this.getValue()); + }); + } else { + this.triggerEvents('onChange', this.getChangedValue(valueNeedChanging, value)); + } } getValue() { @@ -184,6 +196,16 @@ class Slider extends React.Component { return this.props.range ? [lowerBound, upperBound] : upperBound; } + getChangedValue(valueNeedChanging, value) { + const state = this.state; + const data = { + upperBound: state.upperBound, + lowerBound: state.lowerBound, + }; + data[valueNeedChanging] = value; + return this.props.range ? [data.lowerBound, data.upperBound] : data.upperBound; + } + getIndex(value) { const {marks, min, max, step} = this.props; From b585f2fa1a92f09f5ac785ee546c7140fb4b0eea Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 17 Nov 2015 10:35:02 +0800 Subject: [PATCH 4/6] bump 2.4.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ba72c90..6ea1296 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-slider", - "version": "2.3.2", + "version": "2.4.0", "description": "slider ui component for react", "keywords": [ "react", From ccf3803d2059177d0857c8eace07d232702a092f Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 17 Nov 2015 11:41:55 +0800 Subject: [PATCH 5/6] chore: remove `initMochaPhantomJS` --- tests/index.spec.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/tests/index.spec.js b/tests/index.spec.js index 826efbc..07c55ec 100644 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -8,10 +8,6 @@ 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'); From a329b00347067083ebf03a024c32067e6d01af6a Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 17 Nov 2015 16:42:19 +0800 Subject: [PATCH 6/6] chore: update examples --- examples/marks.js | 4 +++- examples/range.js | 4 +++- examples/slider.js | 4 +++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/examples/marks.js b/examples/marks.js index 22e408c..a487bc0 100644 --- a/examples/marks.js +++ b/examples/marks.js @@ -8,7 +8,9 @@ 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); +var log = function(value) { + console.log(value); +}; ReactDOM.render(
diff --git a/examples/range.js b/examples/range.js index 42d5545..6d7c4a5 100644 --- a/examples/range.js +++ b/examples/range.js @@ -7,7 +7,9 @@ var ReactDOM = require('react-dom'); var Slider = require('rc-slider'); var style = {width: 400, margin: 50}; -var log = console.log.bind(console); +var log = function(value) { + console.log(value); +}; var CustomizedRange = React.createClass({ getInitialState: function() { diff --git a/examples/slider.js b/examples/slider.js index beb7656..8273936 100644 --- a/examples/slider.js +++ b/examples/slider.js @@ -7,7 +7,9 @@ var ReactDOM = require('react-dom'); var Slider = require('rc-slider'); var style = {width: 400, margin: 50}; -var log = console.log.bind(console); +var log = function(value) { + console.log(value); +}; function percentFormatter(v) {