Merge pull request #8 from cburbank/options-prop

feat(props): Add prop for passing AutocompleteService options

README.md

@@ -200,6 +200,30 @@ Default: `null`
 You can pass a function that gets called instead of `onChange` function when user
 hits the Enter key or clicks on an autocomplete item.
 
+#### options
+Type: `object`
+Required: `false`
+Default: `{}`
+
+You can fine-tune the settings passed to the AutocompleteService class with `options` prop.
+This prop accepts an object following the same format as [google.maps.places.AutocompletionRequest](https://developers.google.com/maps/documentation/javascript/reference#AutocompletionRequest)
+(except for `input`, which comes from the value of the input field).
+
+```js
+// these options will bias the autocomplete predictions toward Sydney, Australia with a radius of 2000 meters, 
+// and limit the results to addresses only
+const options = {
+  location: new google.maps.LatLng(-34, 151),
+  radius: 2000,
+  types: ['address']
+}
+
+<PlacesAutocomplete
+  value={this.state.address}
+  onChange={this.onChange}
+  options={options}
+/>
+```
 
 ### `geocodeByAddress` API
 

src/PlacesAutocomplete.js

@@ -153,7 +153,7 @@ class PlacesAutocomplete extends React.Component {
       this.clearAutocomplete()
       return;
     }
-    this.autocompleteService.getPlacePredictions({ input: event.target.value }, this.autocompleteCallback)
+    this.autocompleteService.getPlacePredictions({ ...this.props.options, input: event.target.value }, this.autocompleteCallback)
   }
 
   autocompleteItemStyle(active) {
@@ -247,6 +247,20 @@ PlacesAutocomplete.propTypes = {
     autocompleteContainer: React.PropTypes.object,
     autocompleteItem: React.PropTypes.object,
     autocompleteItemActive: React.PropTypes.object
+  }),
+  options: React.PropTypes.shape({
+    bounds: React.PropTypes.object,
+    componentRestrictions: React.PropTypes.object,
+    location: React.PropTypes.object,
+    offset: React.PropTypes.oneOfType([
+      React.PropTypes.number,
+      React.PropTypes.string
+    ]),
+    radius: React.PropTypes.oneOfType([
+      React.PropTypes.number,
+      React.PropTypes.string
+    ]),
+    types: React.PropTypes.array
   })
 };
 
@@ -255,7 +269,8 @@ PlacesAutocomplete.defaultProps = {
   hideLabel: false,
   classNames: {},
   autocompleteItem: ({ suggestion }) => (<div>{suggestion}</div>),
-  styles: {}
+  styles: {},
+  options: {}
 }
 
 export default PlacesAutocomplete

src/tests/index.spec.js

@@ -180,7 +180,17 @@ describe('custom inline styles', () => {
     const item = wrapper.find("#PlacesAutocomplete__autocomplete-container").childAt(0)
     expect(item.props().style.color).to.equal('blue')
   })
+})
 
+describe('AutocompletionRequest options', () => {
+  it('calls getPlacePredictions with the correct options', () => {
+    global.google.maps.places.AutocompleteService.prototype.getPlacePredictions = (request, callback) => {}
+    const spy = sinon.spy(global.google.maps.places.AutocompleteService.prototype, 'getPlacePredictions')
+    const options = { radius: 2000, types: ['address'] }
+    const wrapper = mount(<PlacesAutocomplete classNames={{ input: 'input-element' }} onChange={() => {}} options={options} value='test'/>)
+    wrapper.find('.input-element').simulate('change', { target: { value: 'test' } })
+    expect(spy.calledWith({ ...options, input: 'test' })).to.be.true
+  })
 })
 
 // TODO: test geocodeByAddress function