New Api

[damoclark]

Hi @damoclark , I checked your code and it absolutely makes sense, i'll 100% implement this approach in the next version :

By now it is working like this:

const uploadView = new google.picker.DocsUploadView().setIncludeFolders(true);
const filesView = new google.picker.DocsView().setMimeTypes('image/jpg');
const customViewsArray = [uploadView, filesView];

const handleOpenPicker = () => {
    openPicker({
      clientId: "xxxxxxxxxxxxxxxxx",
      developerKey: "xxxxxxxxxxxx",
      viewId: "DOCS",
      // token: token, // pass oauth token in case you already have one
      showUploadView: true,
      showUploadFolders: true,
      supportDrives: true,
      multiselect: true,
      customViews: customViewsArray,
    })
  }

Originally posted by @Jose-cd in https://github.com/Jose-cd/React-google-drive-picker/issues/1#issuecomment-842819134

This PR attempts to merge your approach (using the google.picker API to prepare views), with my previous solution. I've removed the custom options showUploadView, showUploadFolders etc, and added a single views and features option instead. The problem for me was that the picker always included a DocsUploadView, which isn't needed for me. This allows any view to be provided. However, I acknolwedge that it probably introduces breaking changes into what you are using it for.

Perhaps it could be a 2.0 version? Otherwise, let me know and I'll keep with my own version.

It works like this:

function GooglePicker(props) {
    const credentials = props.google;
    const classes = useStyles() ;
    const select = props.select ;
    const parent = props?.parent ?? 'root' ;
    const [openPicker, data] = useDrivePicker();

    useEffect(() => {
        if(data) {
            props.handler(data)
            data.docs.map(i => console.log(i.name))
        }
    },[data])

    const handleOpenPicker = () => {
        const selector = select === 'folder' ? google.picker.ViewId.FOLDERS : google.picker.ViewId.SPREADSHEETS ;
        const view = new google.picker.DocsView(selector) ;
        view
            .setIncludeFolders(true)
            .setMode(google.picker.DocsViewMode.LIST)
            .setParent(parent) ;

        if(select === 'folder')
            view.setSelectFolderEnabled(true) ;

        openPicker({
            clientId: credentials.appId,
            developerKey: credentials.developerKey,
            token: credentials.accessToken,
            views: [view],
            features: [google.picker.Feature.SUPPORT_TEAM_DRIVES]
        })
    }

    return (
        <Button 
            onClick={() => handleOpenPicker()}
            startIcon={props.defaultIcon}           
            size="large"
            className={classes.stackedButtons}
            >{props.label}</Button>
    )
}

Thanks again for your time and effort with this package. :)

Cheers, Damo.