feat: 增加enterDragger、leaveDragger回调

tinper-bee · Jan 17, 2020 · 7d95eaa · 7d95eaa
1 parent f48f741
commit 7d95eaa
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 17 deletions.
diff --git a/build/Upload.css b/build/Upload.css
@@ -2684,6 +2684,3 @@
   to {
     margin-top: -25px;
     opacity: 0; } }
-
-.u-upload.u-upload-drag-hover * {
-  pointer-events: none; }
diff --git a/build/index.js b/build/index.js
@@ -152,7 +152,9 @@ var propTypes = {
   supportServerRender: _propTypes2["default"].bool,
   style: _propTypes2["default"].object,
   disabled: _propTypes2["default"].bool,
-  clsPrefix: _propTypes2["default"].string
+  clsPrefix: _propTypes2["default"].string,
+  enterDragger: _propTypes2["default"].func,
+  leaveDragger: _propTypes2["default"].func
 };
 
 var defaultProps = {
@@ -167,7 +169,9 @@ var defaultProps = {
   listType: 'text', // or pictrue
   className: '',
   disabled: false,
-  supportServerRender: true
+  supportServerRender: true,
+  enterDragger: function enterDragger() {},
+  leaveDragger: function leaveDragger() {}
 };
 
 var Upload = function (_Component) {
@@ -294,6 +298,7 @@ var Upload = function (_Component) {
       _this.setState({
         dragState: 'dragover'
       });
+      _this.props.enterDragger();
     };
 
     _this.onDragLeave = function (e) {
@@ -304,13 +309,15 @@ var Upload = function (_Component) {
         });
         e.stopPropagation();
         e.preventDefault();
+        _this.props.leaveDragger();
       }
     };
 
     _this.onFileDrop = function (e) {
       _this.setState({
         dragState: e.type
       });
+      _this.props.leaveDragger();
     };
 
     _this.handlePreview = function (file) {

diff --git a/dist/demo.css b/dist/demo.css
diff --git a/dist/demo.css.map b/dist/demo.css.map
diff --git a/dist/demo.js b/dist/demo.js
@@ -36654,7 +36654,9 @@
 	  supportServerRender: _propTypes2['default'].bool,
 	  style: _propTypes2['default'].object,
 	  disabled: _propTypes2['default'].bool,
-	  clsPrefix: _propTypes2['default'].string
+	  clsPrefix: _propTypes2['default'].string,
+	  enterDragger: _propTypes2['default'].func,
+	  leaveDragger: _propTypes2['default'].func
 	};
 
 	var defaultProps = {
@@ -36669,7 +36671,9 @@
 	  listType: 'text', // or pictrue
 	  className: '',
 	  disabled: false,
-	  supportServerRender: true
+	  supportServerRender: true,
+	  enterDragger: function enterDragger() {},
+	  leaveDragger: function leaveDragger() {}
 	};
 
 	var Upload = function (_Component) {
@@ -36796,6 +36800,7 @@
 	      _this.setState({
 	        dragState: 'dragover'
 	      });
+	      _this.props.enterDragger();
 	    };
 
 	    _this.onDragLeave = function (e) {
@@ -36806,13 +36811,15 @@
 	        });
 	        e.stopPropagation();
 	        e.preventDefault();
+	        _this.props.leaveDragger();
 	      }
 	    };
 
 	    _this.onFileDrop = function (e) {
 	      _this.setState({
 	        dragState: e.type
 	      });
+	      _this.props.leaveDragger();
 	    };
 
 	    _this.handlePreview = function (file) {

diff --git a/dist/demo.js.map b/dist/demo.js.map
diff --git a/docs/api.md b/docs/api.md
@@ -44,6 +44,8 @@ import 'bee-upload/build/Upload.css';
 |supportServerRender|服务端渲染时需要打开这个|boolean|false|
 |disabled|是否禁用，设置为 true 后前端禁止删除已上传文件|boolean|false|
 |withCredentials|上传请求时是否携带 cookie|boolean|false|
+|enterDragger|拖拽上传，当鼠标拖拽文件进入 Dragger 区域时触发|Function|-|
+|leaveDragger|拖拽上传，当鼠标拖拽文件离开 Dragger 区域时触发|Function|-|
 
 ### onChange
 

diff --git a/src/Upload.scss b/src/Upload.scss
@@ -468,8 +468,4 @@
     margin-top: -25px;
     opacity: 0;
   }
-}
-// fix: dragleave-of-parent-element-fires-when-dragging-over-children-elements
-.u-upload.u-upload-drag-hover * {
-    pointer-events: none;
 }
diff --git a/src/index.js b/src/index.js
@@ -111,7 +111,9 @@ const propTypes = {
   supportServerRender: PropTypes.bool,
   style: PropTypes.object,
   disabled: PropTypes.bool,
-  clsPrefix: PropTypes.string
+  clsPrefix: PropTypes.string,
+  enterDragger: PropTypes.func,
+  leaveDragger: PropTypes.func
 }
 
 const defaultProps = {
@@ -127,6 +129,8 @@ const defaultProps = {
   className: '',
   disabled: false,
   supportServerRender: true,
+  enterDragger: ()=>{},
+  leaveDragger: ()=>{}
 };
 
 class Upload extends Component {
@@ -316,6 +320,7 @@ class Upload extends Component {
     this.setState({
       dragState: 'dragover'
     })
+    this.props.enterDragger()
   }
 
   onDragLeave = (e) => {
@@ -326,13 +331,15 @@ class Upload extends Component {
       })
       e.stopPropagation();
       e.preventDefault();
+      this.props.leaveDragger()
     }
   }
 
   onFileDrop = (e) => {
     this.setState({
       dragState: e.type
     })
+    this.props.leaveDragger()
   }
 
   clearProgressTimer() {