v3.4.0

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 3.4.0 - 2018-03-13
+
+* Added: customContainerRender prop
+
 # 3.3.1 - 2018-02-07
 
 * Fixed: styled-components as dependency

README.md

@@ -103,6 +103,8 @@ See [Demo page][github-page]
 | googleMaps            | object   | injected by `react-google-maps-loader`                                                                                        | -                                                                                                   |
 | onSelectSuggest       | function | Handle click on suggest                                                                                                       | `(geocodedPrediction, originalPrediction) => {console.log(geocodedPrediction, originalPrediction)}` |
 | customRender          | function | Customize list item                                                                                                           | `prediction => prediction ? prediction.description : "no results"`                                  |
+| customContainerRender | function | Customize list                                                                                                                | `items => <CustomWrapper>{items.map(item => <ItemWrapper>{item.description}</ItemWrapper>)}         |
+|                       |
 | autocompletionRequest | object   | [Google map object Object](https://developers.google.com/maps/documentation/javascript/reference?hl=fr#AutocompletionRequest) | `{input: "Toulouse"}`                                                                               |
 | textNoResults         | String   | No results text, null to disable                                                                                              | `No results`                                                                                        |
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-google-places-suggest",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "author": {
     "name": "Cédric Delpoux",
     "email": "[email protected]"

src/components/List/index.js

@@ -17,38 +17,49 @@ const Wrapper = styled.div`
   z-index: 2;
 `
 
-const List = ({
-  customRender,
-  items,
-  activeItemIndex,
-  onSelect,
-  textNoResults,
-}) => {
-  if (items.length > 0) {
-    return (
-      <Wrapper>
-        {items.map((item, index) => (
-          <ListItem
-            key={index}
-            active={activeItemIndex === index}
-            customRender={customRender}
-            onClick={item => onSelect(item)}
-            item={item}
-          />
-        ))}
-      </Wrapper>
-    )
-  }
+class List extends React.Component {
+  renderDefault() {
+    const {
+      customRender,
+      items,
+      activeItemIndex,
+      onSelect,
+      textNoResults,
+    } = this.props
+
+    if (items.length > 0) {
+      return (
+        <Wrapper>
+          {items.map((item, index) => (
+            <ListItem
+              key={index}
+              active={activeItemIndex === index}
+              customRender={customRender}
+              onClick={item => onSelect(item)}
+              item={item}
+            />
+          ))}
+        </Wrapper>
+      )
+    }
 
-  if (textNoResults || customRender) {
-    return (
-      <Wrapper>
-        <ListItem customRender={customRender} textNoResults={textNoResults} />
-      </Wrapper>
-    )
+    if (textNoResults || customRender) {
+      return (
+        <Wrapper>
+          <ListItem customRender={customRender} textNoResults={textNoResults} />
+        </Wrapper>
+      )
+    }
+
+    return null
   }
 
-  return null
+  render() {
+    const {customContainerRender, items} = this.props
+    return customContainerRender
+      ? customContainerRender(items)
+      : this.renderDefault(items)
+  }
 }
 
 List.propTypes = {
@@ -69,6 +80,7 @@ List.propTypes = {
     PropTypes.instanceOf(ListItem),
   ]),
   onSelect: PropTypes.func,
+  customContainerRender: PropTypes.func,
   customRender: PropTypes.func,
   textNoResults: PropTypes.string,
 }

src/components/List/index.test.js

@@ -18,7 +18,18 @@ const ListFixture = (
 )
 
 const ListEmptyFixture = <List />
+const customLabel = "List"
 const ListCustomFixture = (
+  <List
+    customContainerRender={items => (
+      <div>
+        {customLabel}
+        {items.map(item => item.description)}
+      </div>
+    )}
+  />
+)
+const ListCustomItemFixture = (
   <List customRender={prediction => prediction && prediction.description} />
 )
 
@@ -27,13 +38,19 @@ describe("Suggest", () => {
     mount(ListFixture)
     mount(ListEmptyFixture)
     mount(ListCustomFixture)
+    mount(ListCustomItemFixture)
   })
 
   it("has one child", () => {
     const list = shallow(ListFixture)
     expect(list.find(ListItem)).toHaveLength(1)
   })
 
+  it("uses customContainerRender prop", () => {
+    const list = shallow(ListCustomFixture)
+    expect(list.html()).toContain(customLabel)
+  })
+
   it("calls onSelect when item is clicked", () => {
     const list = shallow(ListFixture)
     list

src/index.js

@@ -117,14 +117,20 @@ class GooglePlacesSuggest extends React.Component {
 
   render() {
     const {focusedPredictionIndex, open, predictions} = this.state
-    const {children, customRender, textNoResults} = this.props
+    const {
+      children,
+      customContainerRender,
+      customRender,
+      textNoResults,
+    } = this.props
     return (
       <Wrapper onKeyDown={this.handleKeyDown}>
         {children}
         {open && (
           <List
             items={predictions}
             activeItemIndex={focusedPredictionIndex}
+            customContainerRender={customContainerRender}
             customRender={customRender}
             onSelect={suggest => this.handleSelectPrediction(suggest)}
             textNoResults={textNoResults}
@@ -139,6 +145,7 @@ GooglePlacesSuggest.propTypes = {
   children: PropTypes.any.isRequired,
   googleMaps: PropTypes.object.isRequired,
   onSelectSuggest: PropTypes.func,
+  customContainerRender: PropTypes.func,
   customRender: PropTypes.func,
   autocompletionRequest: PropTypes.shape({
     input: PropTypes.string.isRequired,