publish 2.1.0

CHANGELOG.md

@@ -1,3 +1,8 @@
+<a name="2.1.0"></a>
+# [2.1.0](https://github.com/tinper-bee/upload/compare/v2.0.8...v2.1.0) (2020-01-15)
+
+
+
 <a name="2.0.8"></a>
 ## [2.0.8](https://github.com/tinper-bee/upload/compare/v2.0.7...v2.0.8) (2019-12-20)
 

build/Upload.css

@@ -2684,3 +2684,6 @@
   to {
     margin-top: -25px;
     opacity: 0; } }
+
+.u-upload.u-upload-drag-hover * {
+  pointer-events: none; }

build/index.js

@@ -191,7 +191,7 @@ var Upload = function (_Component) {
 
       // beforeUpload=(file,fileList)=>{
       //   this.props.beforeUpload(file,this.state.fileList)
-      // }
+      // }  
 
     };
 
@@ -289,6 +289,24 @@ var Upload = function (_Component) {
       }
     };
 
+    _this.onDragEnter = function (e) {
+      _this.lastenter = e.target; // 记录最后进入的元素
+      _this.setState({
+        dragState: 'dragover'
+      });
+    };
+
+    _this.onDragLeave = function (e) {
+      // 如果此时退的元素是最后进入的元素，说明是真正退出了`drag-zone`元素
+      if (_this.lastenter === e.target) {
+        _this.setState({
+          dragState: e.type
+        });
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+
     _this.onFileDrop = function (e) {
       _this.setState({
         dragState: e.type
@@ -317,6 +335,7 @@ var Upload = function (_Component) {
       fileList: _this.props.fileList || _this.props.defaultFileList || [],
       dragState: 'drop'
     };
+    _this.lastenter = null;
     return _this;
   }
 
@@ -444,9 +463,10 @@ var Upload = function (_Component) {
           'div',
           {
             className: dragCls,
-            onDrop: this.onFileDrop,
-            onDragOver: this.onFileDrop,
-            onDragLeave: this.onFileDrop
+            onDrop: this.onFileDrop
+            // onDragOver={this.onFileDrop}
+            , onDragLeave: this.onDragLeave,
+            onDragEnter: this.onDragEnter
           },
           _react2["default"].createElement(
             _Upload2["default"],

dist/demo.js

@@ -36690,10 +36690,11 @@
 	    _this.state = {
 	      previewVisible: false,
 	      previewImage: ''
-	    };
 
-	    _this.beforeUpload = function (file, fileList) {
-	      _this.props.beforeUpload(file, _this.state.fileList);
+	      // beforeUpload=(file,fileList)=>{
+	      //   this.props.beforeUpload(file,this.state.fileList)
+	      // }  
+
 	    };
 
 	    _this.onStart = function (file) {
@@ -36790,6 +36791,24 @@
 	      }
 	    };
 
+	    _this.onDragEnter = function (e) {
+	      _this.lastenter = e.target; // 记录最后进入的元素
+	      _this.setState({
+	        dragState: 'dragover'
+	      });
+	    };
+
+	    _this.onDragLeave = function (e) {
+	      // 如果此时退的元素是最后进入的元素，说明是真正退出了`drag-zone`元素
+	      if (_this.lastenter === e.target) {
+	        _this.setState({
+	          dragState: e.type
+	        });
+	        e.stopPropagation();
+	        e.preventDefault();
+	      }
+	    };
+
 	    _this.onFileDrop = function (e) {
 	      _this.setState({
 	        dragState: e.type
@@ -36818,6 +36837,7 @@
 	      fileList: _this.props.fileList || _this.props.defaultFileList || [],
 	      dragState: 'drop'
 	    };
+	    _this.lastenter = null;
 	    return _this;
 	  }
 
@@ -36918,8 +36938,8 @@
 	      onStart: this.onStart,
 	      onError: this.onError,
 	      onProgress: this.onProgress,
-	      onSuccess: this.onSuccess,
-	      beforeUpload: this.beforeUpload
+	      onSuccess: this.onSuccess
+	      // beforeUpload:this.beforeUpload
 	    });
 	    delete rcUploadProps.className;
 
@@ -36945,9 +36965,10 @@
 	          'div',
 	          {
 	            className: dragCls,
-	            onDrop: this.onFileDrop,
-	            onDragOver: this.onFileDrop,
-	            onDragLeave: this.onFileDrop
+	            onDrop: this.onFileDrop
+	            // onDragOver={this.onFileDrop}
+	            , onDragLeave: this.onDragLeave,
+	            onDragEnter: this.onDragEnter
 	          },
 	          _react2['default'].createElement(
 	            _Upload2['default'],
@@ -37384,13 +37405,15 @@
 	      if (file && file.uid) {
 	        uid = file.uid;
 	      }
-	      if (reqs[uid]) {
+	      if (reqs[uid] && reqs[uid].abort) {
 	        reqs[uid].abort();
-	        delete reqs[uid];
 	      }
+	      delete reqs[uid];
 	    } else {
 	      Object.keys(reqs).forEach(function (uid) {
-	        reqs[uid].abort();
+	        if (reqs[uid] && reqs[uid].abort) {
+	          reqs[uid].abort();
+	        }
 	        delete reqs[uid];
 	      });
 	    }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-upload",
- "version": "2.0.8",
+ "version": "2.1.0",
  "description": "upload ui component for react",
  "keywords": [
   "react",

src/Upload.scss

@@ -469,3 +469,7 @@
     opacity: 0;
   }
 }
+// fix: dragleave-of-parent-element-fires-when-dragging-over-children-elements
+.u-upload.u-upload-drag-hover * {
+    pointer-events: none;
+}

src/index.js

@@ -143,6 +143,7 @@ class Upload extends Component {
       fileList: this.props.fileList || this.props.defaultFileList || [],
       dragState: 'drop',
     };
+    this.lastenter = null;
   }
   state = {
     previewVisible: false,
@@ -151,7 +152,7 @@ class Upload extends Component {
 
   // beforeUpload=(file,fileList)=>{
   //   this.props.beforeUpload(file,this.state.fileList)
-  // }
+  // }  
 
   onStart = (file) => {
     let targetItem;
@@ -310,10 +311,28 @@ class Upload extends Component {
     }
   }
 
+  onDragEnter = (e) => {
+    this.lastenter = e.target; // 记录最后进入的元素
+    this.setState({
+      dragState: 'dragover'
+    })
+  }
+
+  onDragLeave = (e) => {
+    // 如果此时退的元素是最后进入的元素，说明是真正退出了`drag-zone`元素
+    if(this.lastenter === e.target){ 
+      this.setState({
+        dragState: e.type
+      })
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+
   onFileDrop = (e) => {
     this.setState({
-      dragState: e.type,
-    });
+      dragState: e.type
+    })
   }
 
   clearProgressTimer() {
@@ -373,8 +392,9 @@ class Upload extends Component {
           <div
             className={dragCls}
             onDrop={this.onFileDrop}
-            onDragOver={this.onFileDrop}
-            onDragLeave={this.onFileDrop}
+            // onDragOver={this.onFileDrop}
+            onDragLeave={this.onDragLeave}
+            onDragEnter={this.onDragEnter}
           >
             <RcUpload {...rcUploadProps} ref="upload" className={`${clsPrefix}-btn`}>
               <div className={`${clsPrefix}-drag-container`}>