diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md index d2fa42f313..f55f78e780 100644 --- a/components/upload/demo/picture-card.md +++ b/components/upload/demo/picture-card.md @@ -6,32 +6,57 @@ title: 图片卡片样式 上传文件为图片,可展示本地缩略图。 ````jsx -import { Upload, Icon } from 'antd'; +import { Upload, Icon, Modal } from 'antd'; -const props = { - action: '/upload.do', - listType: 'picture-card', - defaultFileList: [{ - uid: -1, - name: 'xxx.png', - status: 'done', - url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', - thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', - }] -}; +const ImageUploadList = React.createClass({ + getInitialState() { + return { + priviewVisible: false, + priviewImage: '', + }; + }, + handleCancel() { + this.setState({ + priviewVisible: false, + }); + }, + render() { + const props = { + action: '/upload.do', + listType: 'picture-card', + defaultFileList: [{ + uid: -1, + name: 'xxx.png', + status: 'done', + url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', + thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png', + }], + onPreview: (file) => { + this.setState({ + priviewImage: file.url, + priviewVisible: true, + }); + } + }; + return ( +
+ + +
上传照片
+
+ + + 示例 + + + + +
+ ); + } +}); -ReactDOM.render( -
- - -
上传照片
-
- - - 示例 - -
-, mountNode); +ReactDOM.render(, mountNode); ```` ````css diff --git a/components/upload/index.jsx b/components/upload/index.jsx index 4eaabfada6..3ec2a8403a 100644 --- a/components/upload/index.jsx +++ b/components/upload/index.jsx @@ -188,11 +188,21 @@ export default class Upload extends React.Component { } } + handlePreview = (file) => { + if ('onPreview' in this.props) { + this.props.onPreview(file); + } + } + handleManualRemove = (file) => { /*eslint-disable */ file.status = 'removed'; /*eslint-enable */ - this.handleRemove(file); + if ('onRemove' in this.props) { + this.props.onRemove(file); + } else { + this.handleRemove(file); + } } onChange = (info) => { @@ -235,6 +245,7 @@ export default class Upload extends React.Component { uploadList = ( ); } diff --git a/components/upload/index.md b/components/upload/index.md index d6ff2f8ed6..c5540c0ede 100644 --- a/components/upload/index.md +++ b/components/upload/index.md @@ -29,8 +29,8 @@ english: Upload | beforeUpload | 可选参数, 上传文件之前的钩子,参数为上传的文件,若返回 `false` 或者 Promise 则停止上传。**注意:该方法不支持老 IE**。 | Function | 无 | | onChange | 可选参数, 上传文件改变时的状态,详见 onChange | Function | 无 | | listType | 上传列表的内建样式,支持两种基本样式 `text` or `picture` | String | 'text'| -| className | 自定义类名 | String | 无 | - +| onPreview | 点击文件链接时的回调 | Function(file) | 无 | +| onRemove | 点击移除文件时的回调 | Function(file) | 无 | ### onChange diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx index 7fb1eafc23..8c962f13bb 100644 --- a/components/upload/uploadList.jsx +++ b/components/upload/uploadList.jsx @@ -24,10 +24,15 @@ export default class UploadList extends React.Component { } }; - handleClose(file) { + handleClose = (file) => { this.props.onRemove(file); } + handlePreview = (file, e) => { + e.preventDefault(); + return this.props.onPreview(file); + } + componentDidUpdate() { if (this.props.listType !== 'picture' && this.props.listType !== 'picture-card') { return; @@ -66,6 +71,7 @@ export default class UploadList extends React.Component { } } else { icon = ( this.handlePreview(file, e)} href={file.url} target="_blank">{file.name} ); @@ -88,13 +94,13 @@ export default class UploadList extends React.Component {
{icon} {file.url - ? {file.name} + ? this.handlePreview(file, e)} href={file.url} target="_blank" className={`${prefixCls}-list-item-name`}>{file.name} : {file.name}} { this.props.listType === 'picture-card' && file.status !== 'uploading' ? ( - + this.handlePreview(file, e)} href={file.url} target="_blank" style={{ pointerEvents: file.url ? '' : 'none' }}> this.handleClose(file)} /> ) : this.handleClose(file)} />