diff --git a/components/upload/index.jsx b/components/upload/index.jsx index 198d067aabe4..ed162dd88c02 100644 --- 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 ( -
- +
{this.props.children}
@@ -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 - ?
+ ?
: null; if (this.props.listType === 'picture-card') { diff --git a/components/upload/index.md b/components/upload/index.md index c74c72ce9690..5d7d71174e0a 100644 --- 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 index 0ca5d96d0062..40a9ffa83c36 100644 --- 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 index d363d136128c..a1f04d5aba13 100644 --- 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",