Browse Source

on --> handle, use style object

Artur Paikin 7 years ago
parent
commit
0f2258e990
1 changed files with 12 additions and 9 deletions
  1. 12 9
      src/plugins/DragDrop/index.js

+ 12 - 9
src/plugins/DragDrop/index.js

@@ -47,8 +47,8 @@ module.exports = class DragDrop extends Plugin {
 
     // Bind `this` to class methods
     this.handleDrop = this.handleDrop.bind(this)
-    this.onBrowseClick = this.onBrowseClick.bind(this)
-    this.onInputChange = this.onInputChange.bind(this)
+    this.handleBrowseClick = this.handleBrowseClick.bind(this)
+    this.handleInputChange = this.handleInputChange.bind(this)
     this.checkDragDropSupport = this.checkDragDropSupport.bind(this)
     this.render = this.render.bind(this)
   }
@@ -88,7 +88,7 @@ module.exports = class DragDrop extends Plugin {
     })
   }
 
-  onInputChange (ev) {
+  handleInputChange (ev) {
     this.uppy.log('[DragDrop] Files selected through input')
 
     const files = toArray(ev.target.files)
@@ -103,15 +103,18 @@ module.exports = class DragDrop extends Plugin {
     })
   }
 
-  onBrowseClick (ev) {
+  handleBrowseClick (ev) {
     this.input.click()
   }
 
   render (state) {
+    const DragDropClass = `Uppy UppyTheme--default uppy-DragDrop-container ${this.isDragDropSupported ? 'is-dragdrop-supported' : ''}`
+    const DragDropStyle = {
+      width: this.opts.width,
+      height: this.opts.height
+    }
     return (
-      <div class={`Uppy UppyTheme--default uppy-DragDrop-container ${this.isDragDropSupported ? 'is-dragdrop-supported' : ''}`}
-           style={`width: ${this.opts.width}; height: ${this.opts.height};`}
-           onclick={this.onBrowseClick}>
+      <div class={DragDropClass} style={DragDropStyle} onclick={this.handleBrowseClick}>
         <div class="uppy-DragDrop-inner">
           <svg aria-hidden="true" class="UppyIcon uppy-DragDrop-arrow" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
             <path d="M11 10V0H5v10H2l6 6 6-6h-3zm0 0" fill-rule="evenodd"/>
@@ -124,8 +127,8 @@ module.exports = class DragDrop extends Plugin {
                  ref={(input) => {
                    this.input = input
                  }}
-                 onchange={this.onInputChange} />
-          <label class="uppy-DragDrop-label" onclick={this.onBrowseClick}>
+                 onchange={this.handleInputChange} />
+          <label class="uppy-DragDrop-label" onclick={this.handleBrowseClick}>
             {this.i18n('dropHereOr')} <span class="uppy-DragDrop-dragText">{this.i18n('browse')}</span>
           </label>
           <span class="uppy-DragDrop-note">{this.opts.note}</span>