diff --git a/components/upload/index.tsx b/components/upload/index.tsx index 53f440e98f..531d9636b9 100644 --- a/components/upload/index.tsx +++ b/components/upload/index.tsx @@ -66,8 +66,6 @@ export default class Upload extends React.Component { static defaultProps = { prefixCls: 'ant-upload', type: 'select', - // do not set - // name: '', multiple: false, action: '', data: {}, @@ -78,6 +76,8 @@ export default class Upload extends React.Component { listType: 'text', // or pictrue className: '', disabled: false, + onRemove() {}, + onPreview() {}, }; recentUploadStatus: boolean | PromiseLike; @@ -194,6 +194,7 @@ export default class Upload extends React.Component { } handleRemove(file) { + this.props.onRemove(file); let fileList = this.removeFile(file); if (fileList) { this.onChange({ @@ -206,11 +207,7 @@ export default class Upload extends React.Component { handleManualRemove = (file) => { this.refs.upload.abort(file); file.status = 'removed'; // eslint-disable-line - if ('onRemove' in this.props) { - this.props.onRemove(file); - } else { - this.handleRemove(file); - } + this.handleRemove(file); } onChange = (info) => { @@ -239,44 +236,46 @@ export default class Upload extends React.Component { } render() { - const { prefixCls } = this.props; - let type = this.props.type || 'select'; - let props = assign({}, this.props, { + const { + prefixCls, showUploadList, listType, onPreview, + type, disabled, children, className, + } = this.props; + + const rcUploadProps = assign({}, this.props, { onStart: this.onStart, onError: this.onError, onProgress: this.onProgress, onSuccess: this.onSuccess, - beforeUpload: this.props.beforeUpload, }); - let uploadList; - if (this.props.showUploadList) { - uploadList = ( - - ); - } + + const uploadList = showUploadList ? ( + + ) : null; + if (type === 'drag') { 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, + [`${prefixCls}-disabled`]: disabled, }); return ( - -
+
- +
- {this.props.children} + {children}
@@ -288,17 +287,17 @@ export default class Upload extends React.Component { const uploadButtonCls = classNames({ [prefixCls]: true, [`${prefixCls}-select`]: true, - [`${prefixCls}-select-${this.props.listType}`]: true, - [`${prefixCls}-disabled`]: this.props.disabled, + [`${prefixCls}-select-${listType}`]: true, + [`${prefixCls}-disabled`]: disabled, }); - const uploadButton = this.props.children - ?
+ const uploadButton = children + ?
+ +
: null; - const className = this.props.className; - - if (this.props.listType === 'picture-card') { + if (listType === 'picture-card') { return ( {uploadList} @@ -306,7 +305,6 @@ export default class Upload extends React.Component { ); } - return ( {uploadButton} diff --git a/components/upload/style/index.less b/components/upload/style/index.less index b029b55866..8e6bf2f0e9 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -7,6 +7,7 @@ .@{upload-prefix-cls} { font-size: @font-size-base; + outline: 0; &-btn { display: block; @@ -26,7 +27,6 @@ border: 1px dashed @border-color-base; width: @upload-pictrue-card-size; height: @upload-pictrue-card-size; - padding: 24px 0; border-radius: @border-radius-base; background-color: #fbfbfb; text-align: center; @@ -37,6 +37,13 @@ margin-right: 8px; margin-bottom: 8px; + > .@{upload-prefix-cls} { + display: block; + width: 100%; + height: 100%; + padding: 20px 0; + } + &:hover { border-color: @primary-color; } diff --git a/components/upload/uploadList.tsx b/components/upload/uploadList.tsx index 79f78a1faf..f8cfbeb725 100644 --- a/components/upload/uploadList.tsx +++ b/components/upload/uploadList.tsx @@ -28,10 +28,8 @@ export default class UploadList extends React.Component { } handlePreview = (file, e) => { - if (this.props.onPreview) { - e.preventDefault(); - return this.props.onPreview(file); - } + e.preventDefault(); + return this.props.onPreview(file); } componentDidUpdate() {