Merge branch 'joesonw-uploadList#1' into develop-1.0.0

components/upload/demo/multiple.md

@@ -1,6 +1,6 @@
 ---
 order: 5
-hidden: 5
+hidden: true
 title: 多文件选择
 ---
 

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 = {
+const ImageUploadList = React.createClass({
-  action: '/upload.do',
+  getInitialState() {
-  listType: 'picture-card',
+    return {
-  defaultFileList: [{
+      priviewVisible: false,
-    uid: -1,
+      priviewImage: '',
-    name: 'xxx.png',
+    };
-    status: 'done',
+  },
-    url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
+  handleCancel() {
-    thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
+    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 (
+      <div className="clearfix">
+        <Upload {...props}>
+          <Icon type="plus" />
+          <div className="ant-upload-text">上传照片</div>
+        </Upload>
+        <a href="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" target="_blank" className="upload-example">
+          <img src="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" />
+          <span>示例</span>
+        </a>
+        <Modal visible={this.state.priviewVisible} footer={null} onCancel={this.handleCancel}>
+          <img src={this.state.priviewImage} />
+        </Modal>
+      </div>
+    );
+  }
+});
 
-ReactDOM.render(
+ReactDOM.render(<ImageUploadList />, mountNode);
-<div className="clearfix">
-  <Upload {...props}>
-    <Icon type="plus" />
-    <div className="ant-upload-text">上传照片</div>
-  </Upload>
-  <a href="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" target="_blank" className="upload-example">
-    <img src="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" />
-    <span>示例</span>
-  </a>
-</div>
-, mountNode);
 ````
 
 ````css

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 = (
         <UploadList listType={this.props.listType}
           items={this.state.fileList}
+          onPreview={this.handlePreview}
           onRemove={this.handleManualRemove} />
       );
     }

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
 

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 = (<a className={`${prefixCls}-list-item-thumbnail`}
+            onClick={(e) => this.handlePreview(file, e)}
             href={file.url}
             target="_blank"><img src={file.thumbUrl || file.url} alt={file.name} /></a>
           );
@@ -88,13 +94,13 @@ export default class UploadList extends React.Component {
           <div className={`${prefixCls}-list-item-info`}>
             {icon}
             {file.url
-               ? <a href={file.url} target="_blank" className={`${prefixCls}-list-item-name`}>{file.name}</a>
+               ? <a onClick={(e) => this.handlePreview(file, e)} href={file.url} target="_blank" className={`${prefixCls}-list-item-name`}>{file.name}</a>
                : <span className={`${prefixCls}-list-item-name`}>{file.name}</span>}
             {
               this.props.listType === 'picture-card' && file.status !== 'uploading'
               ? (
                 <span>
-                  <a href={file.url} target="_blank" style={{ pointerEvents: file.url ? '' : 'none' }}><Icon type="eye-o" /></a>
+                  <a onClick={(e) => this.handlePreview(file, e)} href={file.url} target="_blank" style={{ pointerEvents: file.url ? '' : 'none' }}><Icon type="eye-o" /></a>
                   <Icon type="delete" onClick={() => this.handleClose(file)} />
                 </span>
               ) : <Icon type="cross" onClick={() => this.handleClose(file)} />