From 6f0e618a3021327f6ee8224df03f293b98a57728 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Tue, 17 Nov 2015 10:31:10 +0800
Subject: [PATCH] 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(
   <div>
     <div style={style}>
       <p>Slider with marks, `included=true`</p>
-      <Slider marks={marks} defaultIndex={1} />
+      <Slider marks={marks} onChange={log} defaultIndex={1} />
     </div>
     <div style={style}>
       <p>Slider with marks and steps, `included=true`</p>
@@ -36,7 +36,7 @@ ReactDOM.render(
     </div>
     <div style={style}>
       <p>Range with marks and steps</p>
-      <Slider range marks={marks} step={10} onChange={log} defaultIndex={[1,2]} />
+      <Slider range marks={marks} step={10} defaultIndex={[1,2]} />
     </div>
   </div>
   , 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 <Slider range value={this.state.value} onChange={this.onChange} />;
+  }
+});
+
 ReactDOM.render(
   <div>
     <div style={style}>
@@ -24,8 +41,12 @@ ReactDOM.render(
       <Slider range dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
     </div>
     <div style={style}>
-      <p>Controlled Range，`step=20, dots` </p>
+      <p>Controlled Range</p>
       <Slider range value={[20, 40]} />
     </div>
+    <div style={style}>
+      <p>Customized Range</p>
+      <CustomizedRange />
+    </div>
   </div>
   , 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 <Slider value={this.state.value} onChange={this.onChange} />;
+  }
+});
+
 ReactDOM.render(
   <div>
     <div style={style}>
@@ -36,5 +53,9 @@ ReactDOM.render(
       <p>Controlled Slider</p>
       <Slider value={50} />
     </div>
+    <div style={style}>
+      <p>Customized Slider</p>
+      <CustomizedSlider />
+    </div>
   </div>
   , 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;