Merge pull request #1886 from transloadit/facebook-grid-view

facebook, provider-views: support list + grid view for facebook

packages/@uppy/facebook/src/index.js

@@ -72,6 +72,12 @@ module.exports = class Facebook extends Plugin {
   }
 
   render (state) {
-    return this.view.render(state)
+    const viewOptions = {}
+    if (this.getPluginState().files.length && !this.getPluginState().folders.length) {
+      viewOptions.viewType = 'grid'
+      viewOptions.showFilter = false
+      viewOptions.showTitles = false
+    }
+    return this.view.render(state, viewOptions)
   }
 }

packages/@uppy/provider-views/src/Breadcrumbs.js

@@ -20,12 +20,11 @@ module.exports = (props) => {
       <div class="uppy-Provider-breadcrumbsIcon">{props.breadcrumbsIcon}</div>
       {
         props.directories.map((directory, i) => (
-          <Breadcrumb
-            key={directory.id}
-            getFolder={() => props.getFolder(directory.id)}
-            title={i === 0 ? props.title : directory.title}
-            isLast={i + 1 === props.directories.length}
-          />
+          Breadcrumb({
+            getFolder: () => props.getFolder(directory.id),
+            title: i === 0 ? props.title : directory.title,
+            isLast: i + 1 === props.directories.length
+          })
         ))
       }
     </div>

packages/@uppy/provider-views/src/index.js

@@ -563,7 +563,7 @@ module.exports = class ProviderView {
     this.plugin.setPluginState({ loading: true })
   }
 
-  render (state) {
+  render (state, viewOptions = {}) {
     const { authenticated, didFirstRender } = this.plugin.getPluginState()
     if (!didFirstRender) {
       this.preFirstRender()
@@ -593,6 +593,7 @@ module.exports = class ProviderView {
       )
     }
 
+    const targetViewOptions = { ...this.opts, ...viewOptions }
     const browserProps = Object.assign({}, this.plugin.getPluginState(), {
       username: this.username,
       getNextFolder: this.getNextFolder,
@@ -611,10 +612,10 @@ module.exports = class ProviderView {
       done: this.donePicking,
       cancel: this.cancelPicking,
       title: this.plugin.title,
-      viewType: this.opts.viewType,
-      showTitles: this.opts.showTitles,
-      showFilter: this.opts.showFilter,
-      showBreadcrumbs: this.opts.showBreadcrumbs,
+      viewType: targetViewOptions.viewType,
+      showTitles: targetViewOptions.showTitles,
+      showFilter: targetViewOptions.showFilter,
+      showBreadcrumbs: targetViewOptions.showBreadcrumbs,
       pluginIcon: this.plugin.icon,
       i18n: this.plugin.uppy.i18n
     })