@uppy/dashboard,@uppy/status-bar: call core methods directly (#3062)

Instead of passing props with x = uppy.x, pass uppy and call methods on
it directly (no need to use `.bind`).

packages/@uppy/dashboard/src/components/EditorPanel.js

@@ -34,7 +34,7 @@ function EditorPanel (props) {
       </div>
       <div className="uppy-DashboardContent-panelBody">
         {props.editors.map((target) => {
-          return props.getPlugin(target.id).render(props.state)
+          return props.uppy.getPlugin(target.id).render(props.state)
         })}
       </div>
     </div>

packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js

@@ -54,10 +54,10 @@ function RemoveButton ({ i18n, onClick }) {
 const copyLinkToClipboard = (event, props) => {
   copyToClipboard(props.file.uploadURL, props.i18n('copyLinkToClipboardFallback'))
     .then(() => {
-      props.log('Link copied to clipboard.')
-      props.info(props.i18n('copyLinkToClipboardSuccess'), 'info', 3000)
+      props.uppy.log('Link copied to clipboard.')
+      props.uppy.info(props.i18n('copyLinkToClipboardSuccess'), 'info', 3000)
     })
-    .catch(props.log)
+    .catch(props.uppy.log)
     // avoid losing focus
     .then(() => event.target.focus({ preventScroll: true }))
 }
@@ -80,6 +80,7 @@ function CopyLinkButton (props) {
 
 module.exports = function Buttons (props) {
   const {
+    uppy,
     file,
     uploadInProgressOrComplete,
     canEditFile,
@@ -87,11 +88,8 @@ module.exports = function Buttons (props) {
     showLinkToFileUploadResult,
     showRemoveButton,
     i18n,
-    removeFile,
     toggleFileCard,
     openFileEditor,
-    log,
-    info,
   } = props
 
   const editAction = () => {
@@ -115,17 +113,14 @@ module.exports = function Buttons (props) {
       {showLinkToFileUploadResult && file.uploadURL ? (
         <CopyLinkButton
           file={file}
-          i18n={i18n}
-          info={info}
-          log={log}
+          uppy={uppy}
         />
       ) : null}
       {showRemoveButton ? (
         <RemoveButton
           i18n={i18n}
-          info={props.info}
-          log={props.log}
-          onClick={() => removeFile(file.id, 'removed-by-user')}
+          uppy={uppy}
+          onClick={() => props.uppy.removeFile(file.id, 'removed-by-user')}
         />
       ) : null}
     </div>

packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js

@@ -2,12 +2,6 @@ const { h } = require('preact')
 const prettierBytes = require('@transloadit/prettier-bytes')
 const truncateString = require('@uppy/utils/lib/truncateString')
 
-const renderAcquirerIcon = (acquirer, props) => (
-  <span title={props.i18n('fileSource', { name: acquirer.name })}>
-    {acquirer.icon()}
-  </span>
-)
-
 const renderFileName = (props) => {
   // Take up at most 2 lines on any screen
   let maxNameLength
@@ -81,9 +75,7 @@ module.exports = function FileInfo (props) {
         {ReSelectButton(props)}
         <ErrorButton
           file={props.file}
-          onClick={() => {
-            alert(props.file.error)
-          }}
+          onClick={() => alert(props.file.error)}
         />
       </div>
     </div>

packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.js

@@ -1,17 +1,18 @@
 const { h } = require('preact')
 
 function onPauseResumeCancelRetry (props) {
+  console.log(props.uppy)
   if (props.isUploaded) return
 
   if (props.error && !props.hideRetryButton) {
-    props.retryUpload(props.file.id)
+    props.uppy.retryUpload(props.file.id)
     return
   }
 
   if (props.resumableUploads && !props.hidePauseResumeButton) {
-    props.pauseUpload(props.file.id)
+    props.uppy.pauseResume(props.file.id)
   } else if (props.individualCancellation && !props.hideCancelButton) {
-    props.cancelUpload(props.file.id)
+    props.uppy.removeFile(props.file.id)
   }
 }
 

packages/@uppy/dashboard/src/components/FileItem/index.js

@@ -78,6 +78,7 @@ module.exports = class FileItem extends Component {
             showLinkToFileUploadResult={this.props.showLinkToFileUploadResult}
           />
           <FileProgress
+            uppy={this.props.uppy}
             file={file}
             error={error}
             isUploaded={isUploaded}
@@ -88,9 +89,6 @@ module.exports = class FileItem extends Component {
             showRemoveButtonAfterComplete={this.props.showRemoveButtonAfterComplete}
             resumableUploads={this.props.resumableUploads}
             individualCancellation={this.props.individualCancellation}
-            pauseUpload={this.props.pauseUpload}
-            cancelUpload={this.props.cancelUpload}
-            retryUpload={this.props.retryUpload}
             i18n={this.props.i18n}
           />
         </div>
@@ -111,12 +109,10 @@ module.exports = class FileItem extends Component {
             showRemoveButton={showRemoveButton}
             canEditFile={this.props.canEditFile}
             uploadInProgressOrComplete={uploadInProgressOrComplete}
-            removeFile={this.props.removeFile}
             toggleFileCard={this.props.toggleFileCard}
             openFileEditor={this.props.openFileEditor}
+            uppy={this.props.uppy}
             i18n={this.props.i18n}
-            log={this.props.log}
-            info={this.props.info}
           />
         </div>
       </div>

packages/@uppy/dashboard/src/components/FileList.js

@@ -39,8 +39,7 @@ module.exports = (props) => {
     error: props.error,
     // TODO move this to context
     i18n: props.i18n,
-    log: props.log,
-    info: props.info,
+    uppy: props.uppy,
     // features
     acquirers: props.acquirers,
     resumableUploads: props.resumableUploads,
@@ -55,11 +54,7 @@ module.exports = (props) => {
     metaFields: props.metaFields,
     recoveredState: props.recoveredState,
     // callbacks
-    retryUpload: props.retryUpload,
-    pauseUpload: props.pauseUpload,
-    cancelUpload: props.cancelUpload,
     toggleFileCard: props.toggleFileCard,
-    removeFile: props.removeFile,
     handleRequestThumbnail: props.handleRequestThumbnail,
     handleCancelThumbnail: props.handleCancelThumbnail,
   }
@@ -81,6 +76,7 @@ module.exports = (props) => {
         {row.map((fileID) => (
           <FileItem
             key={fileID}
+            uppy={props.uppy}
             {...fileProps}
             role="listitem"
             openFileEditor={props.openFileEditor}

packages/@uppy/dashboard/src/components/PickerPanelContent.js

@@ -27,7 +27,7 @@ function PickerPanelContent (props) {
         </button>
       </div>
       <div className="uppy-DashboardContent-panelBody">
-        {props.getPlugin(props.activePickerPanel.id).render(props.state)}
+        {props.uppy.getPlugin(props.activePickerPanel.id).render(props.state)}
       </div>
     </div>
   )

packages/@uppy/dashboard/src/components/PickerPanelTopBar.js

@@ -81,7 +81,7 @@ function PanelTopBar (props) {
         <button
           className="uppy-DashboardContent-back"
           type="button"
-          onClick={props.cancelAll}
+          onClick={() => props.uppy.cancelAll()}
         >
           {props.i18n('cancel')}
         </button>

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

@@ -815,10 +815,6 @@ module.exports = class Dashboard extends UIPlugin {
     this.superFocusOnEachUpdate()
   }
 
-  cancelUpload = (fileID) => {
-    this.uppy.removeFile(fileID)
-  }
-
   saveFileCard = (meta, fileID) => {
     this.uppy.setFileMeta(fileID, meta)
     this.toggleFileCard(false, fileID)
@@ -923,7 +919,6 @@ module.exports = class Dashboard extends UIPlugin {
       disableAllFocusableElements: this.disableAllFocusableElements,
       animateOpenClose: this.opts.animateOpenClose,
       isClosing: pluginState.isClosing,
-      getPlugin: this.uppy.getPlugin,
       progressindicators,
       editors,
       autoProceed: this.uppy.opts.autoProceed,
@@ -935,22 +930,15 @@ module.exports = class Dashboard extends UIPlugin {
       inline: this.opts.inline,
       showPanel: this.showPanel,
       hideAllPanels: this.hideAllPanels,
-      log: this.uppy.log,
       i18n: this.i18n,
       i18nArray: this.i18nArray,
-      removeFile: this.uppy.removeFile,
       uppy: this.uppy,
-      info: this.uppy.info,
       note: this.opts.note,
       recoveredState: state.recoveredState,
       metaFields: pluginState.metaFields,
       resumableUploads: capabilities.resumableUploads || false,
       individualCancellation: capabilities.individualCancellation,
       isMobileDevice: capabilities.isMobileDevice,
-      pauseUpload: this.uppy.pauseResume,
-      retryUpload: this.uppy.retryUpload,
-      cancelUpload: this.cancelUpload,
-      cancelAll: this.uppy.cancelAll,
       fileCardFor: pluginState.fileCardFor,
       toggleFileCard: this.toggleFileCard,
       toggleAddFilesPanel: this.toggleAddFilesPanel,

packages/@uppy/status-bar/src/StatusBar.js

@@ -39,25 +39,14 @@ function togglePauseResume (props) {
   if (props.isAllComplete) return
 
   if (!props.resumableUploads) {
-    return props.cancelAll()
+    return props.uppy.cancelAll()
   }
 
   if (props.isAllPaused) {
-    return props.resumeAll()
+    return props.uppy.resumeAll()
   }
 
-  return props.pauseAll()
-}
-
-function RenderReSelectGhosts ({ i18n }) {
-  return (
-    <div className="uppy-StatusBar-serviceMsg">
-      {i18n('reSelectGhosts')}
-      <svg className="uppy-c-icon uppy-StatusBar-serviceMsg-ghostsIcon" aria-hidden="true" width="15" height="19" viewBox="0 0 35 39">
-        <path d="M1.708 38.66c1.709 0 3.417-3.417 6.834-3.417 3.416 0 5.125 3.417 8.61 3.417 3.348 0 5.056-3.417 8.473-3.417 4.305 0 5.125 3.417 6.833 3.417.889 0 1.709-.889 1.709-1.709v-19.68C34.167-5.757 0-5.757 0 17.271v19.68c0 .82.888 1.709 1.708 1.709zm8.542-17.084a3.383 3.383 0 01-3.417-3.416 3.383 3.383 0 013.417-3.417 3.383 3.383 0 013.417 3.417 3.383 3.383 0 01-3.417 3.416zm13.667 0A3.383 3.383 0 0120.5 18.16a3.383 3.383 0 013.417-3.417 3.383 3.383 0 013.416 3.417 3.383 3.383 0 01-3.416 3.416z" fillRule="nonzero" />
-      </svg>
-    </div>
-  )
+  return props.uppy.pauseAll()
 }
 
 module.exports = (props) => {
@@ -195,7 +184,7 @@ const RetryBtn = (props) => {
       type="button"
       className="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--retry"
       aria-label={props.i18n('retryUpload')}
-      onClick={props.retryAll}
+      onClick={() => props.uppy.retryAll()}
       data-uppy-super-focusable
     >
       <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="8" height="10" viewBox="0 0 8 10">
@@ -213,7 +202,7 @@ const CancelBtn = (props) => {
       className="uppy-u-reset uppy-StatusBar-actionCircleBtn"
       title={props.i18n('cancel')}
       aria-label={props.i18n('cancel')}
-      onClick={props.cancelAll}
+      onClick={() => props.uppy.cancelAll()}
       data-uppy-super-focusable
     >
       <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="16" height="16" viewBox="0 0 16 16">

packages/@uppy/status-bar/src/index.js

@@ -200,10 +200,7 @@ module.exports = class StatusBar extends UIPlugin {
       totalETA,
       files,
       i18n: this.i18n,
-      pauseAll: this.uppy.pauseAll,
-      resumeAll: this.uppy.resumeAll,
-      retryAll: this.uppy.retryAll,
-      cancelAll: this.uppy.cancelAll,
+      uppy: this.uppy,
       startUpload: this.startUpload,
       doneButtonHandler: this.opts.doneButtonHandler,
       resumableUploads,