Add itemId and refactor

src/plugins/Provider/view/Browser.js

@@ -1,6 +1,6 @@
 const Breadcrumbs = require('./Breadcrumbs')
 const Filter = require('./Filter')
-const Table = require('./Table')
+const Table = require('./ItemList')
 const { h } = require('preact')
 
 module.exports = (props) => {
@@ -51,7 +51,8 @@ module.exports = (props) => {
         getItemIcon: props.getItemIcon,
         handleScroll: props.handleScroll,
         title: props.title,
-        showTitles: props.showTitles
+        showTitles: props.showTitles,
+        getItemId: props.getItemId
       })}
       <button class="UppyButton--circular UppyButton--blue uppy-ProviderBrowser-doneBtn"
         type="button"

src/plugins/Provider/view/Item.js

@@ -1,9 +1,6 @@
-const cuid = require('cuid')
 const { h } = require('preact')
 
 module.exports = (props) => {
-  const uniqueId = cuid()
-
   const stop = (ev) => {
     if (ev.keyCode === 13) {
       ev.stopPropagation()
@@ -27,14 +24,14 @@ module.exports = (props) => {
           role="option"
           tabindex="0"
           aria-label={`Select ${props.title}`}
-          id={uniqueId}
+          id={props.id}
           checked={props.isChecked}
           disabled={props.isDisabled}
           onchange={props.handleCheckboxClick}
           onkeyup={stop}
           onkeydown={stop}
           onkeypress={stop} />
-        <label for={uniqueId} />
+        <label for={props.id} />
       </div>
       <button type="button"
         class="uppy-ProviderBrowserItem-inner"

src/plugins/Provider/view/ItemList.js

@@ -1,4 +1,4 @@
-const Row = require('./TableRow')
+const Row = require('./Item')
 const { h } = require('preact')
 
 module.exports = (props) => {
@@ -28,6 +28,7 @@ module.exports = (props) => {
           }
           return Row({
             title: props.getItemName(folder),
+            id: props.getItemId(folder),
             type: 'folder',
             // active: props.activeRow(folder),
             getItemIcon: () => props.getItemIcon(folder),
@@ -42,6 +43,7 @@ module.exports = (props) => {
         {props.files.map(file => {
           return Row({
             title: props.getItemName(file),
+            id: props.getItemId(file),
             type: 'file',
             // active: props.activeRow(file),
             getItemIcon: () => props.getItemIcon(file),

src/plugins/Provider/view/index.js

@@ -578,6 +578,7 @@ module.exports = class View {
       isActiveRow: this.isActiveRow,
       isChecked: this.isChecked,
       toggleCheckbox: this.toggleCheckbox,
+      getItemId: this.plugin.getItemId,
       getItemName: this.plugin.getItemName,
       getItemIcon: this.plugin.getItemIcon,
       handleScroll: this.handleScroll,