From f3578f25e645c618c2dc8a40b9ca1cd03ad9a149 Mon Sep 17 00:00:00 2001 From: Javier Cuevas Date: Mon, 28 Mar 2016 20:38:15 +0200 Subject: [PATCH] Fix initial value --- dist/react-select-google-places.js | 18 ++++++++++++------ dist/react-select-google-places.min.js | 2 +- example/src/example.js | 4 ++-- lib/SelectGooglePlaces.js | 18 ++++++++++++------ src/SelectGooglePlaces.js | 18 ++++++++++++------ 5 files changed, 39 insertions(+), 21 deletions(-) diff --git a/dist/react-select-google-places.js b/dist/react-select-google-places.js index cc620f8..fdafdcf 100644 --- 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 index aaa9538..d417185 100644 --- a/dist/react-select-google-places.min.js +++ b/dist/react-select-google-places.min.js @@ -1,2 +1,2 @@ !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.SelectGooglePlaces=e()}}(function(){var e;return function t(e,u,s){function o(i,r){if(!u[i]){if(!e[i]){var a="function"==typeof require&&require;if(!r&&a)return a(i,!0);if(n)return n(i,!0);var l=new Error("Cannot find module '"+i+"'");throw l.code="MODULE_NOT_FOUND",l}var p=u[i]={exports:{}};e[i][0].call(p.exports,function(t){var u=e[i][1][t];return o(u?u:t)},p,p.exports,t,e,u,s)}return u[i].exports}for(var n="function"==typeof require&&require,i=0;i=0;--u){var s=t.slice(0,u);if(e[s]&&(t===s||e[s].complete))return e[s]}}function r(e,t){return e&&"function"==typeof e.then?e.then(function(e){t(null,e)},function(e){t(e)}):void 0}var a=Object.assign||function(e){for(var t=1;tr.bottom||i.topt.offsetHeight&&!(t.scrollHeight-t.offsetHeight-t.scrollTop)&&this.props.onMenuScrollToBottom()}},handleRequired:function(e,t){return e?t?0===e.length:0===Object.keys(e).length:!0},getOptionLabel:function(e){return e[this.props.labelKey]},getValueArray:function(){var e=this.props.value;if(this.props.multi){if("string"==typeof e&&(e=e.split(this.props.delimiter)),!Array.isArray(e)){if(null===e||void 0===e)return[];e=[e]}return e.map(this.expandValue).filter(function(e){return e})}var t=this.expandValue(e);return t?[t]:[]},expandValue:function(e){if("string"!=typeof e&&"number"!=typeof e)return e;var t=this.props,u=t.options,s=t.valueKey;if(u)for(var o=0;o-1&&u0?t[u-1]:t[t.length-1]),this.setState({focusedOption:o})}},selectFocusedOption:function(){return this._focusedOption?this.selectValue(this._focusedOption):void 0},renderLoading:function(){return this.props.isLoading?r["default"].createElement("span",{className:"Select-loading-zone","aria-hidden":"true"},r["default"].createElement("span",{className:"Select-loading"})):void 0},renderValue:function(e,t){var u=this,s=this.props.valueRenderer||this.getOptionLabel,o=this.props.valueComponent;if(!e.length)return this.state.inputValue?null:r["default"].createElement("div",{className:"Select-placeholder"},this.props.placeholder);var n=this.props.onValueClick?this.handleValueClick:null;return this.props.multi?e.map(function(e,t){return r["default"].createElement(o,{disabled:u.props.disabled||e.clearableValue===!1,key:"value-"+t+"-"+e[u.props.valueKey],onClick:n,onRemove:u.removeValue,value:e},s(e))}):this.state.inputValue?void 0:(t&&(n=null),r["default"].createElement(o,{disabled:this.props.disabled,onClick:n,value:e[0]},s(e[0])))},renderInput:function(e){var t=(0,h["default"])("Select-input",this.props.inputProps.className);return this.props.disabled||!this.props.searchable?r["default"].createElement("div",n({},this.props.inputProps,{className:t,tabIndex:this.props.tabIndex||0,onBlur:this.handleInputBlur,onFocus:this.handleInputFocus,ref:"input",style:{border:0,width:1,display:"inline-block"}})):r["default"].createElement(c["default"],n({},this.props.inputProps,{className:t,tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,minWidth:"5",ref:"input",required:this.state.required,value:this.state.inputValue}))},renderClear:function(){return!this.props.clearable||!this.props.value||this.props.multi&&!this.props.value.length||this.props.disabled||this.props.isLoading?void 0:r["default"].createElement("span",{className:"Select-clear-zone",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEndClearValue},r["default"].createElement("span",{className:"Select-clear",dangerouslySetInnerHTML:{__html:"×"}}))},renderArrow:function(){return r["default"].createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow},r["default"].createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}))},filterOptions:function(e){var t=this,u=this.state.inputValue,s=this.props.options||[];return"function"==typeof this.props.filterOptions?this.props.filterOptions.call(this,s,u,e):this.props.filterOptions?(this.props.ignoreAccents&&(u=(0,E["default"])(u)),this.props.ignoreCase&&(u=u.toLowerCase()),e&&(e=e.map(function(e){return e[t.props.valueKey]})),s.filter(function(s){if(e&&e.indexOf(s[t.props.valueKey])>-1)return!1;if(t.props.filterOption)return t.props.filterOption.call(t,s,u);if(!u)return!0;var o=String(s[t.props.valueKey]),n=String(s[t.props.labelKey]);return t.props.ignoreAccents&&("label"!==t.props.matchProp&&(o=(0,E["default"])(o)),"value"!==t.props.matchProp&&(n=(0,E["default"])(n))),t.props.ignoreCase&&("label"!==t.props.matchProp&&(o=o.toLowerCase()),"value"!==t.props.matchProp&&(n=n.toLowerCase())),"start"===t.props.matchPos?"label"!==t.props.matchProp&&o.substr(0,u.length)===u||"value"!==t.props.matchProp&&n.substr(0,u.length)===u:"label"!==t.props.matchProp&&o.indexOf(u)>=0||"value"!==t.props.matchProp&&n.indexOf(u)>=0})):s},renderMenu:function(e,t,u){var s=this;if(!e||!e.length)return this.props.noResultsText?r["default"].createElement("div",{className:"Select-noresults"},this.props.noResultsText):null;var o=function(){var o=s.props.optionComponent,n=s.props.optionRenderer||s.getOptionLabel;return{v:e.map(function(e,i){var a=t&&t.indexOf(e)>-1,l=e===u,p=l?"focused":null,c=(0,h["default"])({"Select-option":!0,"is-selected":a,"is-focused":l,"is-disabled":e.disabled});return r["default"].createElement(o,{className:c,isDisabled:e.disabled,isFocused:l,key:"option-"+i+"-"+e[s.props.valueKey],onSelect:s.selectValue,onFocus:s.focusOption,option:e,isSelected:a,ref:p},n(e))})}}();return"object"==typeof o?o.v:void 0},renderHiddenField:function(e){var t=this;if(this.props.name){var u=e.map(function(e){return o(e[t.props.valueKey])}).join(this.props.delimiter);return r["default"].createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:u,disabled:this.props.disabled})}},getFocusableOption:function(e){var t=this._visibleOptions;if(t.length){var u=this.state.focusedOption||e;if(u&&t.indexOf(u)>-1)return u;for(var s=0;su;++u)if(!t(e[u]))return a;return 1}function t(t,u){e(t,function(e){return!u(e)})}function u(n,i,r){function a(e){return e.call?e():d[e]}function p(){if(!--y){d[m]=1,g&&g();for(var u in f)e(u.split("|"),a)&&!t(f[u],a)&&(f[u]=[])}}n=n[l]?n:[n];var c=i&&i.call,g=c?i:r,m=c?n.join(""):i,y=n.length;return setTimeout(function(){t(n,function e(t,u){return null===t?p():(u||/^https?:\/\//.test(t)||!o||(t=-1===t.indexOf(".js")?o+t+".js":o+t),E[t]?(m&&(h[m]=1),2==E[t]?p():setTimeout(function(){e(t,!0)},0)):(E[t]=1,m&&(h[m]=1),void s(t,p)))})},0),u}function s(e,t){var u,s=i.createElement("script");s.onload=s.onerror=s[c]=function(){s[p]&&!/^c|loade/.test(s[p])||u||(s.onload=s[c]=null,u=1,E[e]=2,t())},s.async=1,s.src=n?e+(-1===e.indexOf("?")?"?":"&")+n:e,r.insertBefore(s,r.lastChild)}var o,n,i=document,r=i.getElementsByTagName("head")[0],a=!1,l="push",p="readyState",c="onreadystatechange",d={},h={},f={},E={};return u.get=s,u.order=function(e,t,s){!function o(n){n=e.shift(),e.length?u(n,o):u(n,t,s)}()},u.path=function(e){o=e},u.urlArgs=function(e){n=e},u.ready=function(s,o,n){s=s[l]?s:[s];var i=[];return!t(s,function(e){d[e]||i[l](e)})&&e(s,function(e){return d[e]})?o():!function(e){f[e]=f[e]||[],f[e][l](o),n&&n(i)}(s.join("|")),u},u.done=function(e){u([null],e)},u})},{}],8:[function(e,t,u){(function(s){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(u,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;tu;++u)if(!t(e[u]))return a;return 1}function t(t,u){e(t,function(e){return!u(e)})}function u(n,i,r){function a(e){return e.call?e():d[e]}function p(){if(!--y){d[m]=1,g&&g();for(var u in f)e(u.split("|"),a)&&!t(f[u],a)&&(f[u]=[])}}n=n[l]?n:[n];var c=i&&i.call,g=c?i:r,m=c?n.join(""):i,y=n.length;return setTimeout(function(){t(n,function e(t,u){return null===t?p():(u||/^https?:\/\//.test(t)||!o||(t=-1===t.indexOf(".js")?o+t+".js":o+t),E[t]?(m&&(h[m]=1),2==E[t]?p():setTimeout(function(){e(t,!0)},0)):(E[t]=1,m&&(h[m]=1),void s(t,p)))})},0),u}function s(e,t){var u,s=i.createElement("script");s.onload=s.onerror=s[c]=function(){s[p]&&!/^c|loade/.test(s[p])||u||(s.onload=s[c]=null,u=1,E[e]=2,t())},s.async=1,s.src=n?e+(-1===e.indexOf("?")?"?":"&")+n:e,r.insertBefore(s,r.lastChild)}var o,n,i=document,r=i.getElementsByTagName("head")[0],a=!1,l="push",p="readyState",c="onreadystatechange",d={},h={},f={},E={};return u.get=s,u.order=function(e,t,s){!function o(n){n=e.shift(),e.length?u(n,o):u(n,t,s)}()},u.path=function(e){o=e},u.urlArgs=function(e){n=e},u.ready=function(s,o,n){s=s[l]?s:[s];var i=[];return!t(s,function(e){d[e]||i[l](e)})&&e(s,function(e){return d[e]})?o():!function(e){f[e]=f[e]||[],f[e][l](o),n&&n(i)}(s.join("|")),u},u.done=function(e){u([null],e)},u})},{}],8:[function(e,t,u){(function(s){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(u,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t

Demo Single selection

- +

Demo Multiple selection

- + ); } diff --git a/lib/SelectGooglePlaces.js b/lib/SelectGooglePlaces.js index bef1260..18efb84 100644 --- 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 index 3b9b01d..9335d15 100644 --- 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 (
- +
);