Skip to content

Commit 0774f2b

Browse files
kwentkwent
committed
Release 2.0.0
1 parent e43f279 commit 0774f2b

File tree

5 files changed

+80
-61
lines changed

5 files changed

+80
-61
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 2.0.0
2+
3+
- Contact API deprecation solved and People API implementation added
4+
15
## 1.0.1
26

37
- Fix extractGivenNameFromEntry & extractFamilyNameFromEntry is not defined

‎demo/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<!DOCTYPE html>
22
<html>
3-
<link rel="stylesheet" href="//cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
3+
<!-- CSS only -->
44
<div id="google-contacts"></div>
5-
<script src="//use.fontawesome.com/3bd7769ce1.js"></script>
65
<script src="/webpack-dev-server.js"></script>
76
<script src="bundle.js"></script>
87
</html>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-google-contacts",
3-
"version": "1.0.1",
3+
"version": "2.0.0",
44
"description": "A Google Button to import user's gmail contacts",
55
"main": "dist/google-contacts.js",
66
"scripts": {
@@ -67,7 +67,7 @@
6767
"react-hot-loader": "4.13.0",
6868
"react-test-renderer": "17.0.1",
6969
"webpack": "5.17.0",
70-
"webpack-cli": "4.4.0",
70+
"webpack-cli": "4.10.0",
7171
"webpack-dev-server": "3.11.2"
7272
},
7373
"peerDependencies": {

‎src/google-contacts.js‎

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ class GoogleContacts extends Component {
4242
}
4343

4444
handleImportContacts(res, pageToken = null) {
45-
const { onFailure } = this.props
45+
const { onFailure, maxResults } = this.props
4646

4747
if (res) {
4848
const authResponse = res.getAuthResponse()
@@ -52,7 +52,7 @@ class GoogleContacts extends Component {
5252
path: 'https://people.googleapis.com/v1/otherContacts',
5353
params: {
5454
readMask: 'names,emailAddresses',
55-
pageSize: this.props.maxResults > 1000 ? 1000 : this.props.maxResults,
55+
pageSize: maxResults > 1000 ? 1000 : maxResults,
5656
...(pageToken && { pageToken })
5757
},
5858
headers: {
@@ -69,14 +69,15 @@ class GoogleContacts extends Component {
6969
}
7070

7171
handleNextDataFetch(response, authResponse) {
72+
const { maxResults } = this.props
7273
// Parse the response body
7374
const parsedData = JSON.parse(response.body)
7475

7576
// Store the fetched data so that we can use it later
7677
this.allData = [...this.allData, ...parsedData.otherContacts]
7778

7879
// If we have more data and the number of data we fethced is less than maxResults then fetch again using the nextPageToken
79-
if ('nextPageToken' in parsedData && this.props.maxResults < this.allData.length) {
80+
if ('nextPageToken' in parsedData && maxResults < this.allData.length) {
8081
this.handleImportContacts(authResponse, parsedData.nextPageToken)
8182
} else {
8283
this.handleParseContacts()
@@ -118,6 +119,8 @@ class GoogleContacts extends Component {
118119
onSuccess
119120
} = this.props
120121

122+
const { disable } = this.state
123+
121124
const params = {
122125
client_id: clientId,
123126
cookie_policy: cookiePolicy,
@@ -137,7 +140,7 @@ class GoogleContacts extends Component {
137140
if (e) {
138141
e.preventDefault() // to prevent submit if used within form
139142
}
140-
if (!this.state.disabled) {
143+
if (!disable) {
141144
const _signIn = () => {
142145
const auth2 = window.gapi.auth2.getAuthInstance()
143146
const options = { prompt }
@@ -166,8 +169,9 @@ class GoogleContacts extends Component {
166169
}
167170

168171
render() {
169-
const { tag, type, className, disabledStyle, buttonText, children, render, theme, icon } = this.props
170-
const disabled = this.state.disabled || this.props.disabled
172+
const { tag, type, className, disabledStyle, buttonText, children, render, theme, icon, disabled: disabledProps } = this.props
173+
const { active, hovered, disabled: disabledState } = this.state
174+
const disabled = disabledState || disabledProps
171175

172176
if (render) {
173177
return render({ onClick: this.signIn })
@@ -204,15 +208,15 @@ class GoogleContacts extends Component {
204208
return Object.assign({}, initialStyle, disabledStyle)
205209
}
206210

207-
if (this.state.active) {
211+
if (active) {
208212
if (theme === 'dark') {
209213
return Object.assign({}, initialStyle, activeStyle)
210214
}
211215

212216
return Object.assign({}, initialStyle, activeStyle)
213217
}
214218

215-
if (this.state.hovered) {
219+
if (hovered) {
216220
return Object.assign({}, initialStyle, hoveredStyle)
217221
}
218222

@@ -232,7 +236,7 @@ class GoogleContacts extends Component {
232236
className
233237
},
234238
[
235-
icon && <Icon key={1} active={this.state.active} />,
239+
icon && <Icon key={1} active={active} />,
236240
<ButtonContent key={2} icon={icon}>
237241
{children || buttonText}
238242
</ButtonContent>
@@ -244,50 +248,50 @@ class GoogleContacts extends Component {
244248
}
245249

246250
GoogleContacts.propTypes = {
247-
onSuccess: PropTypes.func.isRequired,
248-
onFailure: PropTypes.func.isRequired,
249-
clientId: PropTypes.string.isRequired,
250-
jsSrc: PropTypes.string,
251-
onRequest: PropTypes.func,
251+
accessType: PropTypes.string,
252252
buttonText: PropTypes.node,
253+
children: PropTypes.node,
253254
className: PropTypes.string,
254-
redirectUri: PropTypes.string,
255+
clientId: PropTypes.string.isRequired,
255256
cookiePolicy: PropTypes.string,
256-
loginHint: PropTypes.string,
257-
hostedDomain: PropTypes.string,
258-
children: PropTypes.node,
259-
disabledStyle: PropTypes.object,
260-
prompt: PropTypes.string,
261-
tag: PropTypes.string,
262257
disabled: PropTypes.bool,
258+
disabledStyle: PropTypes.object,
263259
discoveryDocs: PropTypes.array,
264-
uxMode: PropTypes.string,
265-
responseType: PropTypes.string,
266-
type: PropTypes.string,
267-
accessType: PropTypes.string,
260+
hostedDomain: PropTypes.string,
261+
icon: PropTypes.bool,
262+
jsSrc: PropTypes.string,
263+
loginHint: PropTypes.string,
264+
maxResults: PropTypes.number,
265+
onFailure: PropTypes.func.isRequired,
266+
onRequest: PropTypes.func,
267+
onSuccess: PropTypes.func.isRequired,
268+
prompt: PropTypes.string,
269+
redirectUri: PropTypes.string,
268270
render: PropTypes.func,
271+
responseType: PropTypes.string,
272+
tag: PropTypes.string,
269273
theme: PropTypes.string,
270-
icon: PropTypes.bool,
271-
maxResults: PropTypes.number
274+
type: PropTypes.string,
275+
uxMode: PropTypes.string
272276
}
273277

274278
GoogleContacts.defaultProps = {
275-
type: 'button',
276-
tag: 'button',
277-
buttonText: 'Import from Gmail',
278279
accessType: 'online',
279-
prompt: 'consent',
280+
buttonText: 'Import from Gmail',
280281
cookiePolicy: 'single_host_origin',
281-
uxMode: 'popup',
282282
disabled: false,
283-
maxResults: 999,
284283
disabledStyle: {
285284
opacity: 0.6
286285
},
287286
icon: true,
288-
theme: 'light',
287+
jsSrc: 'https://apis.google.com/js/api.js',
288+
maxResults: 999,
289289
onRequest: () => {},
290-
jsSrc: 'https://apis.google.com/js/api.js'
290+
prompt: 'consent',
291+
tag: 'button',
292+
theme: 'light',
293+
type: 'button',
294+
uxMode: 'popup'
291295
}
292296

293297
export default GoogleContacts

‎src/icon.js‎

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,36 @@
11
import React from 'react'
22

3-
export default ({ active }) => (
4-
<div style={{ marginRight: 10, background: active ? '#eee' : '#fff', padding: 10, borderRadius: 2 }}>
5-
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
6-
<g fill="#000" fillRule="evenodd">
7-
<path
8-
d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z"
9-
fill="#EA4335"
10-
/>
11-
<path d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z" fill="#4285F4" />
12-
<path
13-
d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z"
14-
fill="#FBBC05"
15-
/>
16-
<path
17-
d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z"
18-
fill="#34A853"
19-
/>
20-
<path fill="none" d="M0 0h18v18H0z" />
21-
</g>
22-
</svg>
23-
</div>
24-
)
3+
export default function Icon({ active }) {
4+
return (
5+
<div
6+
style={{
7+
background: active ? '#eee' : '#fff',
8+
borderRadius: 2,
9+
marginRight: 10,
10+
padding: 10
11+
}}
12+
>
13+
<svg height="18" width="18" xmlns="http://www.w3.org/2000/svg">
14+
<g fill="#000" fillRule="evenodd">
15+
<path
16+
d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z"
17+
fill="#EA4335"
18+
/>
19+
<path
20+
d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z"
21+
fill="#4285F4"
22+
/>
23+
<path
24+
d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z"
25+
fill="#FBBC05"
26+
/>
27+
<path
28+
d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z"
29+
fill="#34A853"
30+
/>
31+
<path d="M0 0h18v18H0z" fill="none" />
32+
</g>
33+
</svg>
34+
</div>
35+
)
36+
}

0 commit comments

Comments
 (0)