Merge pull request #1 from rembly/feature/customize_picker

Feature/customize picker
valosan · Mar 30, 2021 · 12d04f5 · 12d04f5
2 parents 1a68a8e + 077925f
commit 12d04f5
Show file tree

Hide file tree

Showing 7 changed files with 2,131 additions and 558 deletions.
diff --git a/README.md b/README.md
@@ -86,6 +86,33 @@ You can override the default build function by passing your custom function whic
 ```
 This example creates a picker which shows folders and you can select folders.
 
+### Customize the pre-built picker
+You can also simply further customize the picker that was built with the props you specified.
+```
+<GooglePicker clientId={CLIENT_ID}
+              developerKey={DEVELOPER_KEY}
+              scope={SCOPE}
+              onChange={data => console.log('on change:', data)}
+              onAuthFailed={data => console.log('on auth failed:', data)}
+              authImmediate={false}
+              viewId={'FOLDERS'}
+              customizePicker={ (picker, { namespace, view, buildView }) => {
+                // `picker` = the instance of `PickerBuilder` with all props opions applied
+                // `namespace` = reference to `window.google.picker` namespace
+                // `view` = the instance of view specified by the `viewId` prop
+                // `buildView` = function to build additional views (handles sub-classing views)
+
+                // Add additonal features
+                picker.enableFeature(namespace.Feature.SIMPLE_UPLOAD_ENABLED)
+                picker.enableFeature(namespace.Feature.SUPPORT_TEAM_DRIVES)
+            }}
+        >
+            <span>Click</span>
+            <div className="google"></div>
+        </GooglePicker>
+```
+This example creates a picker which has uploading and team drives enabled.
+
 
 Demo
 ====

diff --git a/demo/app.js b/demo/app.js
@@ -1,63 +1,63 @@
-import React, { Component } from 'react'
-import ReactDOM from 'react-dom';
-import GooglePicker from '../';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import GooglePicker from '../'
 
-const CLIENT_ID = '206339496672-eie1j7vvr0plioslt41l2qsddmdjloqj.apps.googleusercontent.com';
-const DEVELOPER_KEY = 'AIzaSyChPXI8ByCl68kcpy0zwjrfjEc_8mtwH_w';
-const SCOPE = ['https://www.googleapis.com/auth/drive.readonly'];
+const CLIENT_ID = '206339496672-eie1j7vvr0plioslt41l2qsddmdjloqj.apps.googleusercontent.com'
+const DEVELOPER_KEY = 'AIzaSyChPXI8ByCl68kcpy0zwjrfjEc_8mtwH_w'
+const SCOPE = ['https://www.googleapis.com/auth/drive.readonly']
 
-function App() {
+function App () {
   return (
-    <div className="container">
+    <div className='container'>
       <GooglePicker clientId={CLIENT_ID}
-                    developerKey={DEVELOPER_KEY}
-                    scope={SCOPE}
-                    onChange={data => console.log('on change:', data)}
-                    onAuthFailed={data => console.log('on auth failed:', data)}
-                    multiselect={true}
-                    navHidden={true}
-                    authImmediate={false}
-                    mimeTypes={['image/png', 'image/jpeg', 'image/jpg']}
-                    viewId={'DOCS'}>
+        developerKey={DEVELOPER_KEY}
+        scope={SCOPE}
+        onChange={data => console.log('on change:', data)}
+        onAuthFailed={data => console.log('on auth failed:', data)}
+        multiselect
+        navHidden
+        authImmediate={false}
+        mimeTypes={['image/png', 'image/jpeg', 'image/jpg']}
+        viewId={'DOCS'}>
         <span>Click me!</span>
-        <div className="google"></div>
+        <div className='google' />
       </GooglePicker>
-        <br/>
-        <hr/>
-        <br/>
-        <GooglePicker clientId={CLIENT_ID}
-                      developerKey={DEVELOPER_KEY}
-                      scope={SCOPE}
-                      onChange={data => console.log('on change:', data)}
-                      onAuthFailed={data => console.log('on auth failed:', data)}
-                      multiselect={true}
-                      navHidden={true}
-                      authImmediate={false}
-                      viewId={'FOLDERS'}
-                      createPicker={ (google, oauthToken) => {
-                          const googleViewId = google.picker.ViewId.FOLDERS;
-                          const docsView = new google.picker.DocsView(googleViewId)
-                              .setIncludeFolders(true)
-                              .setMimeTypes('application/vnd.google-apps.folder')
-                              .setSelectFolderEnabled(true);
+      <br />
+      <hr />
+      <br />
+      <GooglePicker clientId={CLIENT_ID}
+        developerKey={DEVELOPER_KEY}
+        scope={SCOPE}
+        onChange={data => console.log('on change:', data)}
+        onAuthFailed={data => console.log('on auth failed:', data)}
+        multiselect
+        navHidden
+        authImmediate={false}
+        viewId={'FOLDERS'}
+        createPicker={(google, oauthToken) => {
+          const googleViewId = google.picker.ViewId.FOLDERS
+          const docsView = new google.picker.DocsView(googleViewId)
+            .setIncludeFolders(true)
+            .setMimeTypes('application/vnd.google-apps.folder')
+            .setSelectFolderEnabled(true)
 
-                          const picker = new window.google.picker.PickerBuilder()
-                              .addView(docsView)
-                              .setOAuthToken(oauthToken)
-                              .setDeveloperKey(DEVELOPER_KEY)
-                              .setCallback(()=>{
-                                console.log('Custom picker is ready!');
-                              });
+          const picker = new window.google.picker.PickerBuilder()
+            .addView(docsView)
+            .setOAuthToken(oauthToken)
+            .setDeveloperKey(DEVELOPER_KEY)
+            .setCallback(() => {
+              console.log('Custom picker is ready!')
+            })
 
-                          picker.build().setVisible(true);
-                      }}
-        >
-            <span>Click to build a picker which shows folders and you can select folders</span>
-            <div className="google"></div>
-        </GooglePicker>
+          picker.build().setVisible(true)
+        }}
+      >
+        <span>Click to build a picker which shows folders and you can select folders</span>
+        <div className='google' />
+      </GooglePicker>
 
     </div>
   )
 }
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'))