diff --git a/README.md b/README.md index 75330e24..e9c434c7 100644 --- a/README.md +++ b/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 }) => (
{suggestion}
) + + return ( + + ) +} +``` + #### classNames Type: `Object`, Required: `false` diff --git a/src/PlacesAutocomplete.js b/src/PlacesAutocomplete.js index 88772382..36f20083 100644 --- a/src/PlacesAutocomplete.js +++ b/src/PlacesAutocomplete.js @@ -158,7 +158,6 @@ class PlacesAutocomplete extends React.Component { return () } - // 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) => (
this.handleItemMouseOver(p.index)} onClick={() => this.selectAddress(p.suggestion)} style={{ ...this.autocompleteItemStyle(p.active), ...defaultStyles.autocompleteItem }}> - {p.suggestion} + {this.props.autocompleteItem({ suggestion: p.suggestion })}
))} @@ -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 }) => (
{suggestion}
) } export default PlacesAutocomplete diff --git a/src/tests/index.spec.js b/src/tests/index.spec.js index 02852a72..cd6b5270 100644 --- a/src/tests/index.spec.js +++ b/src/tests/index.spec.js @@ -38,8 +38,9 @@ describe('PlacesAutocomplete props', () => { describe('autocomplete dropdown', () => { let wrapper; + const autocompleteItem = ({ suggestion }) => (
{suggestion}
) beforeEach(() => { - wrapper = shallow( {}} />) + wrapper = shallow( {}} 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 }) => (
) + const wrapper = shallow( {}} 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() + }) +}) + // TODO: test geocodeByAddress function describe('geocodeByAddress', () => {