Просмотр исходного кода

@uppy/core: avoid binding methods to instance in constructor (#3043)

Core classes methods are not suited to be used as eventHandlers, I don't
think it makes sense to have them bound.
Antoine du Hamel 3 лет назад
Родитель
Сommit
836a731d73

+ 2 - 8
packages/@uppy/core/src/BasePlugin.js

@@ -7,15 +7,9 @@
  * See `Plugin` for the extended version with Preact rendering for interfaces.
  */
 module.exports = class BasePlugin {
-  constructor (uppy, opts) {
+  constructor (uppy, opts = {}) {
     this.uppy = uppy
-    this.opts = opts || {}
-
-    this.getPluginState = this.getPluginState.bind(this)
-    this.setPluginState = this.setPluginState.bind(this)
-    this.setOptions = this.setOptions.bind(this)
-    this.install = this.install.bind(this)
-    this.uninstall = this.uninstall.bind(this)
+    this.opts = opts
   }
 
   getPluginState () {

+ 0 - 8
packages/@uppy/core/src/UIPlugin.js

@@ -36,14 +36,6 @@ function debounce (fn) {
  * @returns {Array|string} files or success/fail message
  */
 class UIPlugin extends BasePlugin {
-  constructor (uppy, opts) {
-    super(uppy, opts)
-
-    this.mount = this.mount.bind(this)
-    this.update = this.update.bind(this)
-    this.unmount = this.unmount.bind(this)
-  }
-
   /**
    * Check if supplied `target` is a DOM element or an `object`.
    * If it’s an object — target is a plugin, and we search `plugins`

+ 9 - 29
packages/@uppy/core/src/index.js

@@ -154,18 +154,6 @@ class Uppy {
 
     this.i18nInit()
 
-    this.getState = this.getState.bind(this)
-    this.getPlugin = this.getPlugin.bind(this)
-    this.setFileMeta = this.setFileMeta.bind(this)
-    this.setFileState = this.setFileState.bind(this)
-    this.log = this.log.bind(this)
-    this.info = this.info.bind(this)
-    this.hideInfo = this.hideInfo.bind(this)
-    this.addFile = this.addFile.bind(this)
-    this.removeFile = this.removeFile.bind(this)
-    this.pauseResume = this.pauseResume.bind(this)
-    this.validateRestrictions = this.validateRestrictions.bind(this)
-
     // ___Why throttle at 500ms?
     //    - We must throttle at >250ms for superfocus in Dashboard to work well
     //    (because animation takes 0.25s, and we want to wait for all animations to be over before refocusing).
@@ -175,13 +163,6 @@ class Uppy {
     //    [Practical Check] Firefox, try to upload a big file for a prolonged period of time. Laptop will start to heat up.
     this.calculateProgress = throttle(this.calculateProgress.bind(this), 500, { leading: true, trailing: true })
 
-    this.pauseAll = this.pauseAll.bind(this)
-    this.resumeAll = this.resumeAll.bind(this)
-    this.retryAll = this.retryAll.bind(this)
-    this.cancelAll = this.cancelAll.bind(this)
-    this.retryUpload = this.retryUpload.bind(this)
-    this.upload = this.upload.bind(this)
-
     this.preProcessors = []
     this.uploaders = []
     this.postProcessors = []
@@ -1413,6 +1394,14 @@ class Uppy {
     }
   }
 
+  hideInfo () {
+    const { info } = this.getState()
+
+    this.setState({ info: info.slice(1) })
+
+    this.emit('info-hidden')
+  }
+
   /**
    * Set info message in `state.info`, so that UI plugins like `Informer`
    * can display the message.
@@ -1421,7 +1410,6 @@ class Uppy {
    * @param {string} [type]
    * @param {number} [duration]
    */
-
   info (message, type = 'info', duration = 3000) {
     const isComplexMessage = typeof message === 'object'
 
@@ -1436,19 +1424,11 @@ class Uppy {
       ],
     })
 
-    setTimeout(this.hideInfo, duration)
+    setTimeout(() => this.hideInfo(), duration)
 
     this.emit('info-visible')
   }
 
-  hideInfo () {
-    const { info } = this.getState()
-
-    this.setState({ info: info.slice(1) })
-
-    this.emit('info-hidden')
-  }
-
   /**
    * Passes messages to a function, provided in `opts.logger`.
    * If `opts.logger: Uppy.debugLogger` or `opts.debug: true`, logs to the browser console.

+ 1 - 1
packages/@uppy/dashboard/src/components/Dashboard.js

@@ -160,7 +160,7 @@ module.exports = function Dashboard (props) {
 
           <div className="uppy-Dashboard-progressindicators">
             {props.progressindicators.map((target) => {
-              return props.getPlugin(target.id).render(props.state)
+              return props.uppy.getPlugin(target.id).render(props.state)
             })}
           </div>
         </div>