Make it easier to create additional views

valosan · Mar 10, 2019 · 077925f · 077925f
1 parent 352952e
commit 077925f
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -96,9 +96,11 @@ You can also simply further customize the picker that was built with the props y
               onAuthFailed={data => console.log('on auth failed:', data)}
               authImmediate={false}
               viewId={'FOLDERS'}
-              customizePicker={ (picker, namespace) => {
+              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)

diff --git a/src/react-google-picker.js b/src/react-google-picker.js
@@ -5,16 +5,40 @@ import PropTypes from 'prop-types'
 import loadScript from 'load-script'
 
 const GOOGLE_SDK_URL = 'https://apis.google.com/js/api.js'
+const pickerNamespace = () => window.google.picker
+const googleAPI = () => window.gapi
 
 let scriptLoadingStarted = false
 
+export const viewMap = {
+  DOCS: 'DocsView',
+  DOCS_IMAGES: 'DocsView',
+  DOCUMENTS: 'DocsView',
+  PRESENTATIONS: 'DocsView',
+  SPREADSHEETS: 'DocsView',
+  FORMS: 'DocsView',
+  DOCS_IMAGES_AND_VIDEOS: 'DocsView',
+  DOCS_VIDEOS: 'DocsView',
+  FOLDERS: 'DocsView',
+  PDFS: 'DocsView',
+  IMAGE_SEARCH: 'ImageSearchView',
+  MAPS: 'MapsView',
+  PHOTOS: 'PhotosView',
+  PHOTO_ALBUMS: 'PhotoAlbumsView',
+  VIDEO_SEARCH: 'VideoSearchView',
+  WEBCAM: 'WebCamView',
+  // no view ID for `DocsUploadView`
+  DocsUploadView: 'DocsUploadView'
+}
+
 export default class GoogleChooser extends React.Component {
   static propTypes = {
     children: PropTypes.node,
     clientId: PropTypes.string.isRequired,
     developerKey: PropTypes.string,
     scope: PropTypes.array,
     viewId: PropTypes.string,
+    query: PropTypes.string,
     authImmediate: PropTypes.bool,
     origin: PropTypes.string,
     onChange: PropTypes.func,
@@ -33,17 +57,19 @@ export default class GoogleChooser extends React.Component {
     onAuthFailed: () => {},
     scope: ['https://www.googleapis.com/auth/drive.readonly'],
     viewId: 'DOCS',
+    query: '',
     authImmediate: false,
     multiselect: false,
     navHidden: false,
     disabled: false
-  };
+  }
 
   constructor (props) {
     super(props)
 
     this.onApiLoad = this.onApiLoad.bind(this)
     this.onChoose = this.onChoose.bind(this)
+    this.buildView = this.buildView.bind(this)
   }
 
   componentDidMount () {
@@ -60,29 +86,29 @@ export default class GoogleChooser extends React.Component {
     }
   }
 
-  api () {
-    return window.gapi
+  componentWillUnmount () {
+    this.disposePicker()
   }
 
   isGoogleReady () {
-    return !!this.api()
+    return !!googleAPI()
   }
 
   isGoogleAuthReady () {
-    return !!this.api().auth
+    return !!googleAPI().auth
   }
 
   isGooglePickerReady () {
-    return !!this.api().picker
+    return !!googleAPI().picker
   }
 
   onApiLoad () {
-    this.api().load('auth')
-    this.api().load('picker')
+    googleAPI().load('auth')
+    googleAPI().load('picker')
   }
 
   doAuth (callback) {
-    this.api().auth.authorize({
+    googleAPI().auth.authorize({
       client_id: this.props.clientId,
       scope: this.props.scope,
       immediate: this.props.authImmediate
@@ -96,7 +122,7 @@ export default class GoogleChooser extends React.Component {
       return null
     }
 
-    const token = this.api().auth.getToken()
+    const token = googleAPI().auth.getToken()
     const oauthToken = token && token.access_token
 
     if (oauthToken) {
@@ -112,16 +138,29 @@ export default class GoogleChooser extends React.Component {
     }
   }
 
+  buildView (viewId) {
+    const namespace = pickerNamespace()
+    const className = viewMap[viewId] || 'View'
+
+    return [ 'View', 'DocsView' ].indexOf(className) !== -1
+      ? new namespace[className](namespace.ViewId[viewId])
+      : new namespace[className]()
+  }
+
   createPicker (oauthToken) {
-    this.props.onAuthenticate(oauthToken)
+    this.disposePicker()
 
-    if (this.props.createPicker) {
-      return this.props.createPicker(google, oauthToken)
+    const { onAuthenticate, createPicker } = this.props
+
+    onAuthenticate(oauthToken)
+
+    if (createPicker) {
+      return createPicker(google, oauthToken)
     }
 
     const { viewId, mimeTypes, query } = this.props
-    const namespace = window.google.picker
-    const view = new namespace.View(namespace.ViewId[viewId])
+    const namespace = pickerNamespace()
+    const view = this.buildView(viewId)
 
     if (!view) {
       throw new Error("Can't find view by viewId")
@@ -156,21 +195,22 @@ export default class GoogleChooser extends React.Component {
     }
 
     if (customizePicker) {
-      customizePicker(picker, namespace)
+      customizePicker(picker, { namespace, view, buildView: this.buildView })
     }
 
-    picker.build()
-      .setVisible(true)
+    this.picker = picker.build().setVisible(true)
+  }
+
+  disposePicker () {
+    if (this.picker) {
+      this.picker.setVisible(true).dispose()
+    }
   }
 
   render () {
     return (
       <div onClick={this.onChoose}>
-        {
-          this.props.children
-            ? this.props.children
-            : <button>Open google chooser</button>
-        }
+        {this.props.children || <button>Open google chooser</button>}
       </div>
     )
   }