v3.1.0

cedricdelpoux · Nov 16, 2017 · c850a83 · c850a83
1 parent 2d3bf18
commit c850a83
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 70 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# 3.1.0 - 2017-11-16
+
+* Updated: `textNoResults` can be used
+* Updated: `customRender` is more powerfull
+
 # 3.0.0 - 2017-11-08
 
 * Removed: `webpack` build

diff --git a/README.md b/README.md
@@ -52,30 +52,40 @@ export default class GoogleSuggest extends React.Component {
   render() {
     const {search, value} = this.state
     return (
-      <ReactGoogleMapLoader
-        params={{
-          key: MY_API_KEY,
-          libraries: "places,geocode",
-        }}
-        render={googleMaps =>
-          googleMaps && (
-            <div>
-              <ReactGooglePlacesSuggest
-                autocompletionRequest={{input: search}}
-                googleMaps={googleMaps}
-                onSelectSuggest={this.handleSelectSuggest.bind(this)}
-              >
-                <input
-                  type="text"
-                  value={value}
-                  placeholder="Search a location"
-                  onChange={this.handleInputChange.bind(this)}
-                />
-              </ReactGooglePlacesSuggest>
-            </div>
-          )
-        }
-      />
+        <ReactGoogleMapLoader
+            params={{
+                key: MY_API_KEY,
+                libraries: "places,geocode",
+            }}
+            render={googleMaps =>
+                googleMaps && (
+                    <ReactGooglePlacesSuggest
+                        googleMaps={googleMaps}
+                        autocompletionRequest={{
+                            input: search,
+                            // Optional options
+                            // https://developers.google.com/maps/documentation/javascript/reference?hl=fr#AutocompletionRequest
+                        }} 
+                        // Optional props
+                        onSelectSuggest={this.handleSelectSuggest.bind(this)}
+                        textNoResults="My custom no results text" // null or "" if you want to disable the no results item
+                        customRender={prediction => 
+                            <div className="customWrapper">
+                                {prediction ? prediction.description : "My custom no results text"}
+                            </div>
+                        }
+
+                    >
+                        <input
+                            type="text"
+                            value={value}
+                            placeholder="Search a location"
+                            onChange={this.handleInputChange.bind(this)}
+                        />
+                    </ReactGooglePlacesSuggest>
+                )
+            }
+        />
     )
   }
 }
@@ -89,8 +99,8 @@ See [Demo page][github-page]
 |Name|PropType|Description|Example
 |---|---|---|---
 |googleMaps|object|injected by `react-google-maps-loader`|-
-|onSelectSuggest|function|Handle click on suggest|`(suggest) => {}`
-|customRender|function|Customize list item|`(suggest) => {}`
+|onSelectSuggest|function|Handle click on suggest|`prediction => {console.log(prediction)}`
+|customRender|function|Customize list item|`prediction => prediction ? prediction.description : "no results"`
 |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`
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-google-places-suggest",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "author": {
     "name": "Cédric Delpoux",
     "email": "[email protected]"

diff --git a/src/components/List/index.js b/src/components/List/index.js
@@ -17,23 +17,39 @@ const Wrapper = styled.div`
   z-index: 2;
 `
 
-const List = ({customRender, items, activeItemIndex, onSelect}) => (
-  <Wrapper>
-    {items.length > 0 ? (
-      items.map((item, index) => (
-        <ListItem
-          key={index}
-          active={activeItemIndex === index}
-          customRender={customRender}
-          onClick={item => onSelect(item)}
-          item={item}
-        />
-      ))
-    ) : (
-      <ListItem customRender={customRender} />
-    )}
-  </Wrapper>
-)
+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>
+    )
+  }
+
+  if (textNoResults || customRender) {
+    return (
+      <Wrapper>
+        <ListItem customRender={customRender} textNoResults={textNoResults} />
+      </Wrapper>
+    )
+  }
+
+  return null
+}
 
 List.propTypes = {
   activeItemIndex: PropTypes.number,
@@ -54,6 +70,7 @@ List.propTypes = {
   ]),
   onSelect: PropTypes.func,
   customRender: PropTypes.func,
+  textNoResults: PropTypes.string,
 }
 
 List.defaultProps = {

diff --git a/src/components/List/index.test.js b/src/components/List/index.test.js
@@ -18,11 +18,15 @@ const ListFixture = (
 )
 
 const ListEmptyFixture = <List />
+const ListCustomFixture = (
+  <List customRender={prediction => prediction && prediction.description} />
+)
 
 describe("Suggest", () => {
   it("renders", () => {
     mount(ListFixture)
     mount(ListEmptyFixture)
+    mount(ListCustomFixture)
   })
 
   it("has one child", () => {

diff --git a/src/components/ListItem/index.js b/src/components/ListItem/index.js
@@ -5,46 +5,43 @@ import styled from "styled-components"
 import Prediction from "../Prediction"
 
 const Wrapper = styled.div`
+  ${props =>
+    props.clickable &&
+    "&:hover {background: #f5f5f5;cursor: pointer;} "} ${props =>
+      props.active && "background: #f5f5f5;"};
+`
+
+const Item = styled.div`
   padding: 0.3125rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.875rem;
   display: flex;
   align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    background: #f5f5f5;
-  }
-
-  ${props => props.active && "background: #f5f5f5;"};
+  font-size: 0.8125rem;
 `
 
 class ListItem extends React.Component {
-  constructor() {
-    super()
-  }
-
   renderDefault(item) {
-    return <Prediction item={item} />
+    const {textNoResults} = this.props
+    return <Item>{item ? <Prediction item={item} /> : textNoResults}</Item>
   }
 
   renderItem(item) {
     const {customRender} = this.props
     return customRender ? customRender(item) : this.renderDefault(item)
   }
 
-  renderNoResults() {
-    const {textNoResults} = this.props
-    return textNoResults ? textNoResults : "No results"
-  }
-
   render() {
     const {active, item, onClick} = this.props
     return (
-      <Wrapper active={active} onClick={() => onClick(item)}>
-        {item ? this.renderItem(item) : this.renderNoResults()}
+      <Wrapper
+        active={active}
+        clickable={item}
+        onClick={item && (() => onClick(item))}
+      >
+        {this.renderItem(item)}
       </Wrapper>
     )
   }

diff --git a/src/components/Prediction/index.js b/src/components/Prediction/index.js
@@ -2,11 +2,6 @@ import PropTypes from "prop-types"
 import React from "react"
 import styled from "styled-components"
 
-const Wrapper = styled.div`
-  font-size: 0.8125rem;
-  color: #000;
-`
-
 const Match = styled.span`
   font-weight: bold;
 `
@@ -33,7 +28,7 @@ const Prediction = ({item}) => {
   }
 
   return (
-    <Wrapper>
+    <div>
       {labelParts ? (
         <span>
           {labelParts.before}
@@ -43,7 +38,7 @@ const Prediction = ({item}) => {
       ) : (
         description
       )}
-    </Wrapper>
+    </div>
   )
 }
 

diff --git a/src/index.js b/src/index.js
@@ -148,6 +148,7 @@ GooglePlacesSuggest.propTypes = {
 
 GooglePlacesSuggest.defaultProps = {
   onSelectSuggest: () => {},
+  textNoResults: "No results",
 }
 
 export default GooglePlacesSuggest