Skip to content

Commit 12d04f5

Browse files
huksleyhuksley
authored
Merge pull request #1 from rembly/feature/customize_picker
Feature/customize picker
2 parents 1a68a8e + 077925f commit 12d04f5

File tree

7 files changed

+2131
-558
lines changed

7 files changed

+2131
-558
lines changed

‎README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,33 @@ You can override the default build function by passing your custom function whic
8686
```
8787
This example creates a picker which shows folders and you can select folders.
8888

89+
### Customize the pre-built picker
90+
You can also simply further customize the picker that was built with the props you specified.
91+
```
92+
<GooglePicker clientId={CLIENT_ID}
93+
developerKey={DEVELOPER_KEY}
94+
scope={SCOPE}
95+
onChange={data => console.log('on change:', data)}
96+
onAuthFailed={data => console.log('on auth failed:', data)}
97+
authImmediate={false}
98+
viewId={'FOLDERS'}
99+
customizePicker={ (picker, { namespace, view, buildView }) => {
100+
// `picker` = the instance of `PickerBuilder` with all props opions applied
101+
// `namespace` = reference to `window.google.picker` namespace
102+
// `view` = the instance of view specified by the `viewId` prop
103+
// `buildView` = function to build additional views (handles sub-classing views)
104+
105+
// Add additonal features
106+
picker.enableFeature(namespace.Feature.SIMPLE_UPLOAD_ENABLED)
107+
picker.enableFeature(namespace.Feature.SUPPORT_TEAM_DRIVES)
108+
}}
109+
>
110+
<span>Click</span>
111+
<div className="google"></div>
112+
</GooglePicker>
113+
```
114+
This example creates a picker which has uploading and team drives enabled.
115+
89116

90117
Demo
91118
====

‎demo/app.js

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,63 @@
1-
import React, { Component } from 'react'
2-
import ReactDOM from 'react-dom';
3-
import GooglePicker from '../';
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
import GooglePicker from '../'
44

5-
const CLIENT_ID = '206339496672-eie1j7vvr0plioslt41l2qsddmdjloqj.apps.googleusercontent.com';
6-
const DEVELOPER_KEY = 'AIzaSyChPXI8ByCl68kcpy0zwjrfjEc_8mtwH_w';
7-
const SCOPE = ['https://www.googleapis.com/auth/drive.readonly'];
5+
const CLIENT_ID = '206339496672-eie1j7vvr0plioslt41l2qsddmdjloqj.apps.googleusercontent.com'
6+
const DEVELOPER_KEY = 'AIzaSyChPXI8ByCl68kcpy0zwjrfjEc_8mtwH_w'
7+
const SCOPE = ['https://www.googleapis.com/auth/drive.readonly']
88

9-
function App() {
9+
function App () {
1010
return (
11-
<div className="container">
11+
<div className='container'>
1212
<GooglePicker clientId={CLIENT_ID}
13-
developerKey={DEVELOPER_KEY}
14-
scope={SCOPE}
15-
onChange={data => console.log('on change:', data)}
16-
onAuthFailed={data => console.log('on auth failed:', data)}
17-
multiselect={true}
18-
navHidden={true}
19-
authImmediate={false}
20-
mimeTypes={['image/png', 'image/jpeg', 'image/jpg']}
21-
viewId={'DOCS'}>
13+
developerKey={DEVELOPER_KEY}
14+
scope={SCOPE}
15+
onChange={data => console.log('on change:', data)}
16+
onAuthFailed={data => console.log('on auth failed:', data)}
17+
multiselect
18+
navHidden
19+
authImmediate={false}
20+
mimeTypes={['image/png', 'image/jpeg', 'image/jpg']}
21+
viewId={'DOCS'}>
2222
<span>Click me!</span>
23-
<div className="google"></div>
23+
<div className='google' />
2424
</GooglePicker>
25-
<br/>
26-
<hr/>
27-
<br/>
28-
<GooglePicker clientId={CLIENT_ID}
29-
developerKey={DEVELOPER_KEY}
30-
scope={SCOPE}
31-
onChange={data => console.log('on change:', data)}
32-
onAuthFailed={data => console.log('on auth failed:', data)}
33-
multiselect={true}
34-
navHidden={true}
35-
authImmediate={false}
36-
viewId={'FOLDERS'}
37-
createPicker={ (google, oauthToken) => {
38-
const googleViewId = google.picker.ViewId.FOLDERS;
39-
const docsView = new google.picker.DocsView(googleViewId)
40-
.setIncludeFolders(true)
41-
.setMimeTypes('application/vnd.google-apps.folder')
42-
.setSelectFolderEnabled(true);
25+
<br />
26+
<hr />
27+
<br />
28+
<GooglePicker clientId={CLIENT_ID}
29+
developerKey={DEVELOPER_KEY}
30+
scope={SCOPE}
31+
onChange={data => console.log('on change:', data)}
32+
onAuthFailed={data => console.log('on auth failed:', data)}
33+
multiselect
34+
navHidden
35+
authImmediate={false}
36+
viewId={'FOLDERS'}
37+
createPicker={(google, oauthToken) => {
38+
const googleViewId = google.picker.ViewId.FOLDERS
39+
const docsView = new google.picker.DocsView(googleViewId)
40+
.setIncludeFolders(true)
41+
.setMimeTypes('application/vnd.google-apps.folder')
42+
.setSelectFolderEnabled(true)
4343

44-
const picker = new window.google.picker.PickerBuilder()
45-
.addView(docsView)
46-
.setOAuthToken(oauthToken)
47-
.setDeveloperKey(DEVELOPER_KEY)
48-
.setCallback(()=>{
49-
console.log('Custom picker is ready!');
50-
});
44+
const picker = new window.google.picker.PickerBuilder()
45+
.addView(docsView)
46+
.setOAuthToken(oauthToken)
47+
.setDeveloperKey(DEVELOPER_KEY)
48+
.setCallback(() => {
49+
console.log('Custom picker is ready!')
50+
})
5151

52-
picker.build().setVisible(true);
53-
}}
54-
>
55-
<span>Click to build a picker which shows folders and you can select folders</span>
56-
<div className="google"></div>
57-
</GooglePicker>
52+
picker.build().setVisible(true)
53+
}}
54+
>
55+
<span>Click to build a picker which shows folders and you can select folders</span>
56+
<div className='google' />
57+
</GooglePicker>
5858

5959
</div>
6060
)
6161
}
6262

63-
ReactDOM.render(<App />, document.getElementById('root'));
63+
ReactDOM.render(<App />, document.getElementById('root'))

0 commit comments

Comments
 (0)