[Minor] Adding componentWillReceieveProps function

examples/app.jsx

@@ -2,6 +2,51 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var RadonSelect = require('../src/select.jsx');
 
+var StatefulRadonSelect = React.createClass({
+  getInitialState() {
+    return {
+      cityCode: "SF",
+      cityName: "San Fransisco"
+    }
+  },
+  changeCity(ev) {
+    this.setState({
+      cityCode: ev.target.dataset.city,
+      cityName: ev.target.dataset.name
+    });
+  },
+  onCityChange(val) {
+    var name = val === "KC"
+      ? "Kansas City"
+      : "San Fransisco";
+
+    this.setState({
+      cityCode: val,
+      cityName: name
+    });
+  },
+  render() {
+    return (
+      <div>
+        <RadonSelect
+          selectName={this.state.cityName}
+          defaultValue={this.state.cityCode}
+          selectedValue={this.state.cityCode}
+          onChange={this.onCityChange}>
+          <RadonSelect.Option value="SF">San Fransisco</RadonSelect.Option>
+          <RadonSelect.Option value="KC">Kansas City</RadonSelect.Option>
+        </RadonSelect>
+        <button data-city="SF" data-name="San Fransisco" onClick={this.changeCity}>
+          Set San Fransisco
+        </button>
+        <button data-city="KC" data-name="Kansas City" onClick={this.changeCity}>
+          Set Kansas City
+        </button>
+      </div>
+    );
+  }
+});
+
 var App = React.createClass({
   displayName: "App",
   getInitialState() {
@@ -60,7 +105,7 @@ var App = React.createClass({
           </RadonSelect.Option>
           <RadonSelect.Option value="orange">
             <h1 style={{margin:"0px"}}>orange</h1>
-          </RadonSelect.Option>          
+          </RadonSelect.Option>
         </RadonSelect>
         <br />
         <br />
@@ -81,6 +126,8 @@ var App = React.createClass({
             <button type="submit">set</button>
           </form>
         </span>
+        <h3>Get and Set  Values passed as props from parent</h3>
+        <StatefulRadonSelect/>
       </div>
     );
   }

src/select.jsx

@@ -39,6 +39,7 @@ var classBase = React.createClass({
     },
     selectName: React.PropTypes.string.isRequired,
     defaultValue: React.PropTypes.string,
+    selectedValue: React.PropTypes.string,
     placeholderText: React.PropTypes.string,
     typeaheadDelay: React.PropTypes.number,
     showCurrentOptionWhenOpen: React.PropTypes.bool,
@@ -74,14 +75,19 @@ var classBase = React.createClass({
       optionListStyle: {}
     };
   },
-  getInitialState () {
-    var initialIndex = this.props.defaultValue !== undefined
-      ? this.getValueIndex(this.props.defaultValue)
+  _getInitialIndex (defaultValue) {
+    return defaultValue !== undefined
+      ? this.getValueIndex(defaultValue)
       : -1;
+  },
+  getInitialState () {
+    // if selectedValue is passed as prop, use it or else use defaultValue.
+    var selectedValue = this.props.selectedValue || this.props.defaultValue;
+    var initialIndex = this._getInitialIndex(selectedValue);
 
     var defaultValue = initialIndex === -1
       ? this.props.children[0].props.value
-      : this.props.defaultValue;
+      : selectedValue;
 
     return {
       selectedOptionIndex: initialIndex === -1 ? false : initialIndex,
@@ -90,6 +96,15 @@ var classBase = React.createClass({
       focus: false
     };
   },
+  componentWillReceiveProps (nextProps) {
+    if (nextProps && this.props && nextProps.selectedValue !== this.props.selectedValue) {
+      var initialIndex = this._getInitialIndex(nextProps.selectedValue);
+      this.setState({
+        selectedOptionVal: nextProps.selectedValue,
+        selectedOptionIndex: initialIndex
+      });
+    }
+  },
   getValueIndex (val) {
     for (var i = 0; i < this.props.children.length; ++i) {
       if (this.props.children[i].props.value === val) {
@@ -260,7 +275,7 @@ var classBase = React.createClass({
     var child = this.refs['option' + index];
 
     // Null safety here prevents an iOS-specific bug preventing selection of options
-    ev ? ev.preventDefault() : null;
+    ev ? ev.preventDefault() : null; //eslint-disable-line
 
     this.setState({
       selectedOptionIndex: index,
@@ -312,7 +327,7 @@ var classBase = React.createClass({
 
     return wrapperClassNames.join(' ');
   },
-  focus(ref) {
+  focus (ref) {
     ReactDOM.findDOMNode(ref).focus();
   },
   renderChild (child, index) {