feat(props): Add autocompleteItem prop to let user customize the auto…

…complete item element

README.md

@@ -99,6 +99,28 @@ Required: `true`
 
 Please see the example above
 
+#### autocompleteItem
+Type: `Functional React Component`,
+Required: `false`
+
+The function takes props with `suggestion` key (see the example below).
+We highly recommend that you create your own custom `AutocompleteItem` and pass it as a prop.
+
+```js
+// autocompleteItem example (with font-awesome icon)
+render() {
+  const AutocompleteItem = ({ suggestion }) => (<div><i className="fa fa-map-marker">{suggestion}</div>)
+
+  return (
+    <PlacesAutocomplete
+      value={this.state.value}
+      setAddress={this.setAddress}
+      autocompleteItem={AutocompleteItem}
+    />
+  )
+}
+```
+
 #### classNames
 Type: `Object`,
 Required: `false`

src/PlacesAutocomplete.js

@@ -158,7 +158,6 @@ class PlacesAutocomplete extends React.Component {
     return (<label className={this.props.classNames.label || ''}>Location</label>)
   }
 
-  // TODO: Autocomplete item should be customizable.
   renderAutocomplete() {
     const { autocompleteItems } = this.state
     if (autocompleteItems.length === 0) { return null }
@@ -170,11 +169,10 @@ class PlacesAutocomplete extends React.Component {
         {autocompleteItems.map((p, idx) => (
           <div
             key={p.placeId}
-            className="autocomplete__item"
             onMouseOver={() => this.handleItemMouseOver(p.index)}
             onClick={() => this.selectAddress(p.suggestion)}
             style={{ ...this.autocompleteItemStyle(p.active), ...defaultStyles.autocompleteItem }}>
-            <i className="fa fa-map-marker" style={{color: '#b87d4e', marginRight: '5px'}}/> {p.suggestion}
+            {this.props.autocompleteItem({ suggestion: p.suggestion })}
           </div>
         ))}
       </div>
@@ -208,6 +206,7 @@ PlacesAutocomplete.propTypes = {
   setAddress: React.PropTypes.func.isRequired,
   placeholder: React.PropTypes.string,
   hideLabel: React.PropTypes.bool,
+  autocompleteItem: React.PropTypes.func,
   classNames: React.PropTypes.shape({
     container: React.PropTypes.string,
     label: React.PropTypes.string,
@@ -220,6 +219,7 @@ PlacesAutocomplete.defaultProps = {
   placeholder: 'Address',
   hideLabel: false,
   classNames: {},
+  autocompleteItem: ({ suggestion }) => (<div>{suggestion}</div>)
 }
 
 export default PlacesAutocomplete

src/tests/index.spec.js

@@ -38,8 +38,9 @@ describe('PlacesAutocomplete props', () => {
 
 describe('autocomplete dropdown', () => {
   let wrapper;
+  const autocompleteItem = ({ suggestion }) => (<div className="autocomplete-item">{suggestion}</div>)
   beforeEach(() => {
-    wrapper = shallow(<PlacesAutocomplete value="San Francisco, CA" setAddress={() => {}} />)
+    wrapper = shallow(<PlacesAutocomplete value="San Francisco, CA" setAddress={() => {}} autocompleteItem={autocompleteItem} />)
   })
 
   it('initially does not have an autocomplete dropdown', () => {
@@ -69,7 +70,7 @@ describe('autocomplete dropdown', () => {
     ]
     wrapper.setState({ autocompleteItems: data })
     expect(wrapper.find('#PlacesAutocomplete__autocomplete-container')).to.have.length(1)
-    expect(wrapper.find('.autocomplete__item')).to.have.length(3)
+    expect(wrapper.find('.autocomplete-item')).to.have.length(3)
   })
 })
 
@@ -121,6 +122,16 @@ describe('hideLabel prop', () => {
   })
 });
 
+describe('customizable autocompleteItem', () => {
+  it('lets you provide a custom autocomplete item', () => {
+    const autocompleteItem = ({ suggestion }) => (<div className="my-autocomplete-item"><i className="fa fa-map-marker"/></div>)
+    const wrapper = shallow(<PlacesAutocomplete value="LA" setAddress={() => {}} autocompleteItem={autocompleteItem}/>)
+    wrapper.setState({ autocompleteItems: [{ suggestion: 'San Francisco, CA', placeId: 1, active: false, index: 0 }] })
+    expect(wrapper.find('.my-autocomplete-item')).to.have.length(1)
+    expect(wrapper.find('.my-autocomplete-item')).to.contain(<i className="fa fa-map-marker"/>)
+  })
+})
+
 
 // TODO: test geocodeByAddress function
 describe('geocodeByAddress', () => {