Merge pull request #12 from cburbank/onerror-callback

Onerror & clearItemsOnError props

README.md

@@ -101,6 +101,8 @@ export default SimpleForm
 * styles
 * placeholder
 * hideLabel
+* onError
+* clearItemsOnError
 * onSelect
 * options
 * autoFocus
@@ -235,6 +237,22 @@ Default: `false`
 
 You can set `hideLabel` to `true` to not render the label element
 
+#### onError
+Type: `function`
+Required: `false`
+Default: `(status) => console.error('[react-places-autocomplete]: error happened when fetching data from Google Maps API.\nPlease check the docs here (https://github.com/kenny-hibino/react-places-autocomplete)\nStatus: ', status)`
+
+You can pass `onError` prop to customize the behavior when [google.maps.places.PlacesServiceStatus](https://developers.google.com/maps/documentation/javascript/places#place_details_responses) is not `OK` (e.g., no predictions are found)
+
+Receives `status` as a parameter
+
+#### clearItemsOnError
+Type: `boolean`
+Required: `false`
+Default: `false`
+
+You can pass `clearItemsOnError` prop to indicate whether the autocomplete predictions should be cleared when `google.maps.places.PlacesServiceStatus` is not OK 
+
 #### onSelect
 Type: `function`
 Required: `false`,

src/PlacesAutocomplete.js

@@ -49,7 +49,11 @@ class PlacesAutocomplete extends React.Component {
   }
 
   autocompleteCallback(predictions, status) {
-    if (status != this.autocompleteOK) { console.error('place autocomplete failed'); return; }
+    if (status != this.autocompleteOK) {
+      this.props.onError(status)
+      if (this.props.clearItemsOnError) { this.clearAutocomplete() }
+      return
+    }
     this.setState({
       autocompleteItems: predictions.map((p, idx) => ({
         suggestion: p.description,
@@ -249,6 +253,8 @@ PlacesAutocomplete.propTypes = {
   children: React.PropTypes.element,
   value: React.PropTypes.string.isRequired,
   onChange: React.PropTypes.func.isRequired,
+  onError: React.PropTypes.func,
+  clearItemsOnError: React.PropTypes.bool,
   onSelect: React.PropTypes.func,
   placeholder: React.PropTypes.string,
   hideLabel: React.PropTypes.bool,
@@ -285,6 +291,8 @@ PlacesAutocomplete.propTypes = {
 };
 
 PlacesAutocomplete.defaultProps = {
+  clearItemsOnError: false,
+  onError: (status) => console.error('[react-places-autocomplete]: error happened when fetching data from Google Maps API.\nPlease check the docs here (https://developers.google.com/maps/documentation/javascript/places#place_details_responses)\nStatus: ', status),
   placeholder: 'Address',
   hideLabel: false,
   autoFocus: false,

src/tests/index.spec.js

@@ -27,6 +27,21 @@ describe('PlacesAutocomplete callbacks', () => {
     const wrapper = mount(<PlacesAutocomplete value="San Francisco, Ca" onChange={() => {}} />)
     expect(PlacesAutocomplete.prototype.componentDidMount.calledOnce).to.equal(true)
   })
+
+  it('executes onError callback passed in as prop when status is not OK', () => {
+    const spy = sinon.spy()
+    const wrapper = mount(<PlacesAutocomplete onError={spy} value="San Francisco, Ca" onChange={() => {}} />)
+    wrapper.instance().autocompleteCallback([], 'ZERO_RESULTS')
+    expect(spy.calledOnce).to.equal(true)
+    expect(spy.calledWith('ZERO_RESULTS')).to.equal(true)
+  })
+
+  it('executes default onError function when there is no custom prop and status is not OK', () => {
+    sinon.stub(console, 'error')
+    const wrapper = mount(<PlacesAutocomplete value="San Francisco, Ca" onChange={() => {}} />)
+    wrapper.instance().autocompleteCallback([], 'ZERO_RESULTS')
+    expect(console.error.calledOnce).to.equal(true)
+  })
 });
 
 describe('PlacesAutocomplete props', () => {
@@ -72,6 +87,31 @@ describe('autocomplete dropdown', () => {
     expect(wrapper.find('#PlacesAutocomplete__autocomplete-container')).to.have.length(1)
     expect(wrapper.find('.autocomplete-item')).to.have.length(3)
   })
+
+  it('clears the autocomplete items when PlacesServiceStatus is not OK and clearItemsOnError prop is true', () => {
+    const initialItems = [{
+        suggestion: 'San Francisco, CA',
+        placeId: 1,
+        active: false,
+        index: 0
+    }]
+    const wrapper = shallow(<PlacesAutocomplete value="San Francisco, CA" onChange={() => {}} clearItemsOnError={true}/>)
+    wrapper.setState({ autocompleteItems: initialItems })
+    wrapper.instance().autocompleteCallback([], 'error')
+    expect(wrapper.find('.autocomplete-item')).to.have.length(0)
+  })
+
+  it('does not clear the autocomplete items when PlacesServiceStatus is not OK and clearItemsOnError prop is false', () => {
+    const initialItems = [{
+        suggestion: 'San Francisco, CA',
+        placeId: 1,
+        active: false,
+        index: 0
+    }]
+    wrapper.setState({ autocompleteItems: initialItems })
+    wrapper.instance().autocompleteCallback([], 'error')
+    expect(wrapper.find('.autocomplete-item')).to.have.length(1)
+  })
 })
 
 describe('custom classNames, placeholder', () => {