diff --git a/README.md b/README.md index d4136a2..ec9f79a 100644 --- 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 index b72a869..136deca 100644 --- a/src/react-google-picker.js +++ b/src/react-google-picker.js @@ -5,9 +5,32 @@ 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, @@ -15,6 +38,7 @@ export default class GoogleChooser extends React.Component { 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 (