Fix initial value

javiercr · Mar 28, 2016 · f3578f2 · f3578f2
1 parent cc7da97
commit f3578f2
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 21 deletions.
diff --git a/dist/react-select-google-places.js b/dist/react-select-google-places.js
@@ -1524,8 +1524,8 @@ var SelectGooglePlaces = React.createClass({
     formatName: React.PropTypes.func, // Receives the result placesService.getDetails() and returns a formatted name
     // See https://developers.google.com/maps/documentation/javascript/3.exp/reference#PlaceResult
     onChange: React.PropTypes.func, // onChange handler: function (newValue) {}
-    optionsForSelect: React.PropTypes.object // See https://github.com/JedWatson/react-select#further-options
-
+    optionsForSelect: React.PropTypes.object, // See https://github.com/JedWatson/react-select#further-options
+    initialValue: React.PropTypes.any
   },
 
   getDefaultProps: function getDefaultProps() {
@@ -1540,13 +1540,15 @@ var SelectGooglePlaces = React.createClass({
         multi: true,
         cache: false,
         name: 'places'
-      }
+      },
+      onChange: function onChange(value) {},
+      initialValue: null
     };
   },
 
   getInitialState: function getInitialState() {
     return {
-      value: null,
+      value: this.props.initialValue,
       autocompleteService: null,
       placesService: null
     };
@@ -1605,7 +1607,7 @@ var SelectGooglePlaces = React.createClass({
 
     this.state.placesService.getDetails({ placeId: autocompletePrediction.place_id }, function (placeResult) {
       autocompletePrediction = _extends(autocompletePrediction, placeResult);
-      autocompletePrediction.description = _this3.props.formatName(placeResult);
+      autocompletePrediction.name = _this3.props.formatName(placeResult);
       callback();
     });
   },
@@ -1620,6 +1622,10 @@ var SelectGooglePlaces = React.createClass({
         }
       };
       this.state.autocompleteService.getPlacePredictions(geocoderRequest, function (data) {
+        // Copy description into the name attribute
+        data.map(function (result) {
+          result.name = result.description;
+        });
         callback(null, { options: data, complete: false });
       });
     }
@@ -1630,7 +1636,7 @@ var SelectGooglePlaces = React.createClass({
     return React.createElement(
       'div',
       null,
-      React.createElement(_reactSelect2['default'].Async, _extends({ value: this.state.value, valueKey: 'description', labelKey: 'description', loadOptions: this.getPredictions, onChange: this.onChange }, this.props.optionsForSelect)),
+      React.createElement(_reactSelect2['default'].Async, _extends({ value: this.state.value, valueKey: 'name', labelKey: 'name', loadOptions: this.getPredictions, onChange: this.onChange }, this.props.optionsForSelect)),
       React.createElement('div', { ref: 'attributions' })
     );
   }

diff --git a/dist/react-select-google-places.min.js b/dist/react-select-google-places.min.js
diff --git a/example/src/example.js b/example/src/example.js
@@ -10,9 +10,9 @@ var App = React.createClass({
 		return (
 			<div>
         <h2>Demo Single selection</h2>
-        <SelectGooglePlaces optionsForSelect={{multi: false, cache: false}} onChange={this.onChange} />
+        <SelectGooglePlaces optionsForSelect={{multi: false, cache: false}} initialValue={{name: 'New York'}} onChange={this.onChange} />
         <h2>Demo Multiple selection</h2>
-        <SelectGooglePlaces optionsForSelect={{multi: true, cache: false}} onChange={this.onChange} />
+        <SelectGooglePlaces optionsForSelect={{multi: true, cache: false }} initialValue={[{name: 'New York'}, {name: 'Chicago'}]} onChange={this.onChange} />
 			</div>
 		);
 	}

diff --git a/lib/SelectGooglePlaces.js b/lib/SelectGooglePlaces.js
@@ -30,8 +30,8 @@ var SelectGooglePlaces = React.createClass({
     formatName: React.PropTypes.func, // Receives the result placesService.getDetails() and returns a formatted name
     // See https://developers.google.com/maps/documentation/javascript/3.exp/reference#PlaceResult
     onChange: React.PropTypes.func, // onChange handler: function (newValue) {}
-    optionsForSelect: React.PropTypes.object // See https://github.com/JedWatson/react-select#further-options
-
+    optionsForSelect: React.PropTypes.object, // See https://github.com/JedWatson/react-select#further-options
+    initialValue: React.PropTypes.any
   },
 
   getDefaultProps: function getDefaultProps() {
@@ -46,13 +46,15 @@ var SelectGooglePlaces = React.createClass({
         multi: true,
         cache: false,
         name: 'places'
-      }
+      },
+      onChange: function onChange(value) {},
+      initialValue: null
     };
   },
 
   getInitialState: function getInitialState() {
     return {
-      value: null,
+      value: this.props.initialValue,
       autocompleteService: null,
       placesService: null
     };
@@ -111,7 +113,7 @@ var SelectGooglePlaces = React.createClass({
 
     this.state.placesService.getDetails({ placeId: autocompletePrediction.place_id }, function (placeResult) {
       autocompletePrediction = _extends(autocompletePrediction, placeResult);
-      autocompletePrediction.description = _this3.props.formatName(placeResult);
+      autocompletePrediction.name = _this3.props.formatName(placeResult);
       callback();
     });
   },
@@ -126,6 +128,10 @@ var SelectGooglePlaces = React.createClass({
         }
       };
       this.state.autocompleteService.getPlacePredictions(geocoderRequest, function (data) {
+        // Copy description into the name attribute
+        data.map(function (result) {
+          result.name = result.description;
+        });
         callback(null, { options: data, complete: false });
       });
     }
@@ -136,7 +142,7 @@ var SelectGooglePlaces = React.createClass({
     return React.createElement(
       'div',
       null,
-      React.createElement(_reactSelect2['default'].Async, _extends({ value: this.state.value, valueKey: 'description', labelKey: 'description', loadOptions: this.getPredictions, onChange: this.onChange }, this.props.optionsForSelect)),
+      React.createElement(_reactSelect2['default'].Async, _extends({ value: this.state.value, valueKey: 'name', labelKey: 'name', loadOptions: this.getPredictions, onChange: this.onChange }, this.props.optionsForSelect)),
       React.createElement('div', { ref: 'attributions' })
     );
   }

diff --git a/src/SelectGooglePlaces.js b/src/SelectGooglePlaces.js
@@ -15,8 +15,8 @@ const SelectGooglePlaces = React.createClass({
     formatName: React.PropTypes.func,         // Receives the result placesService.getDetails() and returns a formatted name
                                               // See https://developers.google.com/maps/documentation/javascript/3.exp/reference#PlaceResult
     onChange: React.PropTypes.func,           // onChange handler: function (newValue) {}
-    optionsForSelect: React.PropTypes.object  // See https://github.com/JedWatson/react-select#further-options
-
+    optionsForSelect: React.PropTypes.object, // See https://github.com/JedWatson/react-select#further-options
+    initialValue: React.PropTypes.any
   },
 
   getDefaultProps () {
@@ -31,13 +31,15 @@ const SelectGooglePlaces = React.createClass({
         multi: true,
         cache: false,
         name: 'places'
-      }
+      },
+      onChange: function(value) {},
+      initialValue: null
     };
   },
 
   getInitialState () {
     return {
-      value: null,
+      value: this.props.initialValue,
       autocompleteService: null,
       placesService: null
     };
@@ -91,7 +93,7 @@ const SelectGooglePlaces = React.createClass({
   processPlace (autocompletePrediction, callback) {
     this.state.placesService.getDetails({placeId: autocompletePrediction.place_id}, (placeResult) => {
       autocompletePrediction = Object.assign(autocompletePrediction, placeResult);
-      autocompletePrediction.description = this.props.formatName(placeResult);
+      autocompletePrediction.name = this.props.formatName(placeResult);
       callback();
     });
   },
@@ -106,6 +108,10 @@ const SelectGooglePlaces = React.createClass({
         }
       };
       this.state.autocompleteService.getPlacePredictions(geocoderRequest, function(data){
+        // Copy description into the name attribute
+        data.map(function(result) {
+          result.name = result.description;
+        });
         callback(null, {options: data, complete: false});
       });  
     }
@@ -115,7 +121,7 @@ const SelectGooglePlaces = React.createClass({
   render () {
     return (
       <div>
-        <Select.Async value={this.state.value} valueKey="description" labelKey="description" loadOptions={this.getPredictions} onChange={this.onChange} {...this.props.optionsForSelect} />
+        <Select.Async value={this.state.value} valueKey="name" labelKey="name" loadOptions={this.getPredictions} onChange={this.onChange} {...this.props.optionsForSelect} />
         <div ref="attributions"></div>
       </div>
     );