fix #2571 #2518 #2645 增加disabled属性及取消上传时cancel请求 (#2690)

* fix #2571 #2518 use rc-upload@2.x abort fix #2645 add `disabled` * fix
ant-design · Aug 14, 2016 · a5585bf · a5585bf
1 parent 7bbb26d
commit a5585bf
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/components/upload/index.jsx b/components/upload/index.jsx
@@ -72,6 +72,7 @@ export default class Upload extends React.Component {
     showUploadList: true,
     listType: 'text', // or pictrue
     className: '',
+    disabled: false,
   }
 
   constructor(props) {
@@ -197,6 +198,7 @@ export default class Upload extends React.Component {
   }
 
   handleManualRemove = (file) => {
+    this.refs.upload.abort(file);
     /*eslint-disable */
     file.status = 'removed';
     /*eslint-enable */
@@ -253,18 +255,21 @@ export default class Upload extends React.Component {
       );
     }
     if (type === 'drag') {
-      let dragUploadingClass = this.state.fileList.some(file => file.status === 'uploading')
-        ? `${prefixCls}-drag-uploading` : '';
-      let draggingClass = this.state.dragState === 'dragover'
-        ? `${prefixCls}-drag-hover` : '';
+      const dragCls = classNames({
+        [prefixCls]: true,
+        [`${prefixCls}-drag`]: true,
+        [`${prefixCls}-drag-uploading`]: this.state.fileList.some(file => file.status === 'uploading'),
+        [`${prefixCls}-drag-hover`]: this.state.dragState === 'dragover',
+        [`${prefixCls}-disabled`]: this.props.disabled,
+      });
       return (
         <span className={this.props.className}>
-          <div className={`${prefixCls} ${prefixCls}-drag ${dragUploadingClass} ${draggingClass}`}
+          <div className={dragCls}
             onDrop={this.onFileDrop}
             onDragOver={this.onFileDrop}
             onDragLeave={this.onFileDrop}
           >
-            <RcUpload {...props}>
+            <RcUpload {...props} ref="upload">
               <div className={`${prefixCls}-drag-container`}>
                 {this.props.children}
               </div>
@@ -279,10 +284,11 @@ export default class Upload extends React.Component {
       [prefixCls]: true,
       [`${prefixCls}-select`]: true,
       [`${prefixCls}-select-${this.props.listType}`]: true,
+      [`${prefixCls}-disabled`]: this.props.disabled,
     });
 
     const uploadButton = this.props.children
-      ? <div className={uploadButtonCls}><RcUpload {...props} /></div>
+      ? <div className={uploadButtonCls}><RcUpload {...props} ref="upload" /></div>
       : null;
 
     if (this.props.listType === 'picture-card') {

diff --git a/components/upload/index.md b/components/upload/index.md
@@ -34,6 +34,7 @@ english: Upload
 | onPreview  | 点击文件链接时的回调                                       | Function(file) | 无    |
 | onRemove   | 点击移除文件时的回调                                       | Function(file) | 无    |
 | supportServerRender | 服务端渲染时需要打开这个                           | Boolean | false    |
+| disabled | 是否禁用                           | Boolean | false    |
 
 ### onChange
 

diff --git a/components/upload/style/index.less b/components/upload/style/index.less
@@ -52,10 +52,14 @@
     height: 100%;
     position: relative;
 
-    &.@{upload-prefix-cls}-drag-hover {
+    &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
       border: 2px dashed tint(@primary-color, 20%);
     }
 
+    &.@{upload-prefix-cls}-disabled {
+      cursor: not-allowed;
+    }
+
     > span {
       display: table;
       height: 100%;
@@ -66,7 +70,7 @@
       vertical-align: middle;
     }
 
-    &:hover {
+    &:not(.@{upload-prefix-cls}-disabled):hover {
       border-color: tint(@primary-color, 20%);
     }
 

diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
     "rc-tooltip": "~3.4.2",
     "rc-tree": "~1.3.6",
     "rc-tree-select": "~1.8.0",
-    "rc-upload": "~1.13.3",
+    "rc-upload": "~2.0.3",
     "rc-util": "~3.3.0",
     "react-addons-pure-render-mixin": "^15.0.0",
     "react-slick": "~0.12.0",