Merge pull request #666 from ant-design/upload-list-picture-style

Add picture style upload list

components/upload/demo/picture-style.md

@@ -0,0 +1,35 @@
+# 图片列表样式
+
+- order: 6
+
+上传文件为图片，可展示缩略图。
+
+---
+
+````jsx
+import { Upload, Button, Icon } from 'antd';
+
+const props = {
+  action: '/upload.do',
+  listType: 'picture',
+  defaultFileList: [{
+    uid: -1,
+    name: 'xxx.png',
+    status: 'done',
+    url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png'
+  }, {
+    uid: -2,
+    name: 'yyy.png',
+    status: 'done',
+    url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png'
+  }]
+};
+
+ReactDOM.render(
+  <Upload {...props}>
+    <Button type="ghost">
+      <Icon type="upload" /> 点击上传
+    </Button>
+  </Upload>
+, document.getElementById('components-upload-demo-picture-style'));
+````

components/upload/index.jsx

@@ -169,7 +169,9 @@ const AntUpload = React.createClass({
       data: {},
       accept: '',
       onChange: noop,
-      showUploadList: true
+      showUploadList: true,
+      listType: 'text', // or pictrue
+      className: '',
     };
   },
   componentWillReceiveProps(nextProps) {
@@ -197,12 +199,15 @@ const AntUpload = React.createClass({
     });
     let uploadList;
     if (this.props.showUploadList) {
-      uploadList = <UploadList items={this.state.fileList} onRemove={this.handleManualRemove} />;
+      uploadList = (
+        <UploadList listType={this.props.listType}
+          items={this.state.fileList}
+          onRemove={this.handleManualRemove} />
+      );
     }
     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` : '';
       return (
@@ -223,7 +228,7 @@ const AntUpload = React.createClass({
       );
     } else if (type === 'select') {
       return (
-        <span>
+        <span className={this.props.className}>
           <div className={prefixCls + ' ' + prefixCls + '-select'}>
             <Upload {...props}>
               {this.props.children}

components/upload/index.md

@@ -23,10 +23,12 @@
 | name       | 可选参数, 上传的文件                                         | String      | file  |
 | action     | 必选参数, 上传的地址                                         | String      | 无    |
 | data       | 可选参数, 上传所需参数                                       | Object      | 无    |
-|showUploadList | 可选参数, 是否展示 uploadList, 默认开启                   | Boolean    | true    |
+| showUploadList | 可选参数, 是否展示 uploadList, 默认开启                  | Boolean     | true  |
 | multiple   | 可选参数, 是否支持多选文件，支持 `ie10+`                     | Boolean     | false |
 | accept     | 可选参数, 接受上传的文件类型, 详见 input accept Attribute    | String      | 无    |
 | onChange   | 可选参数, 上传文件改变时的状态，详见 onChange                | Function    | 无    |
+| listType   | 上传列表的内建样式，支持两种基本样式 `text` or `picture`     | String      | 'text'|
+| className  | 自定义类名                                                   | String      | 无    |
 
 
 ### onChange

components/upload/uploadList.jsx

@@ -3,10 +3,12 @@ import Animate from 'rc-animate';
 import Icon from '../icon';
 const prefixCls = 'ant-upload';
 import { Line } from '../progress';
+import classNames from 'classnames';
 
 export default React.createClass({
   getDefaultProps() {
     return {
+      listType: 'text',  // or picture
       items: [],
       progressAttr: {
         strokeWidth: 3,
@@ -20,25 +22,40 @@ export default React.createClass({
   render() {
     let list = this.props.items.map((file) => {
       let progress;
-      let infoUploadingClass = '';
+      let icon = <Icon type="paper-clip" />;
+
+      if (this.props.listType === 'picture') {
+        icon = (file.status === 'uploading' || !file.url)
+          ? <Icon className={prefixCls + '-list-item-thumbnail'} type="picture" />
+          : <a className={prefixCls + '-list-item-thumbnail'}
+               href={file.url}
+               target="_blank"><img src={file.url} alt={file.name} /></a>;
+      }
       if (file.status === 'uploading') {
         progress = <div className={prefixCls + '-list-item-progress'}>
           <Line {...this.props.progressAttr} percent={file.percent} />
         </div>;
-        infoUploadingClass = ' ' + prefixCls + '-list-item-uploading';
       }
+      const infoUploadingClass = classNames({
+        [`${prefixCls}-list-item`]: true,
+        [`${prefixCls}-list-item-uploading`]: file.status === 'uploading',
+      });
       return (
-        <div className={prefixCls + '-list-item' + infoUploadingClass} key={file.uid}>
+        <div className={infoUploadingClass} key={file.uid}>
           <div className={prefixCls + '-list-item-info'}>
-            <Icon type="paper-clip" />
-            <span className="ant-upload-item-name">{file.name}</span>
+            {icon}
+            <span className={prefixCls + '-list-item-name'}>{file.name}</span>
             <Icon type="cross" onClick={this.handleClose.bind(this, file)} />
           </div>
           { progress }
         </div>
       );
     });
-    return <div className={prefixCls + '-list'}>
+    const listClassNames = classNames({
+      [`${prefixCls}-list`]: true,
+      [`${prefixCls}-list-${this.props.listType}`]: true,
+    });
+    return <div className={listClassNames}>
       <Animate transitionName={prefixCls + '-margin-top'}>
         {list}
       </Animate>

style/components/upload.less

@@ -11,12 +11,12 @@
     cursor: pointer;
   }
 
-  &.@{upload-prefix-cls}-select {
+  &&-select {
     display: inline-block;
   }
 
-  &.@{upload-prefix-cls}-drag {
-    border: 1px dashed #d9d9d9;
+  &&-drag {
+    border: 1px dashed @border-color-base;
     transition: border-color 0.3s ease;
     cursor: pointer;
     border-radius: @border-radius-base;
@@ -74,11 +74,12 @@
 }
 
 .@{upload-prefix-cls}-list {
-  .@{upload-prefix-cls}-list-item {
+  &-item {
     overflow: hidden;
     margin-top: 8px;
+    font-size: 12px;
 
-    .@{upload-prefix-cls}-list-item-info {
+    &-info {
       height: 22px;
       line-height: 22px;
       padding: 0 4px;
@@ -101,15 +102,17 @@
           color: #666;
         }
       }
-      &:hover {
-        background-color: tint(@primary-color, 90%);
-        .anticon.anticon-cross {
-          opacity: 1;
-        }
-      }
     }
 
-    .@{upload-prefix-cls}-list-item-progress {
+    &:hover &-info {
+      background-color: tint(@primary-color, 90%);
+    }
+
+    &:hover .anticon-cross {
+      opacity: 1;
+    }
+
+    &-progress {
       padding: 0 8px 0 20px;
       margin-top: -2px;
       margin-bottom: 1px;
@@ -118,15 +121,75 @@
         vertical-align: middle;
       }
     }
-
-  }
-  .@{upload-prefix-cls}-item-name {
-    font-size: 12px;
-    font-weight: normal;
   }
 
-  b.@{upload-prefix-cls}-item-name {
-    color: #666;
+  &-picture &-item {
+    padding: 8px;
+    border-radius: @border-radius-base;
+    border: 1px solid @border-color-base;
+    height: 66px;
+    position: relative;
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  &-picture &-item-info {
+    padding: 0;
+  }
+
+  &-picture &-item:hover &-item-info {
+    background: transparent;
+    color: #345678;
+  }
+
+  &-picture &-item-uploading {
+    border-style: dashed;
+  }
+
+  &-picture &-item-thumbnail {
+    width: 48px;
+    height: 48px;
+    display: inline-block;
+    overflow: hidden;
+  }
+
+  &-picture &-item-thumbnail img {
+    width: 48px;
+    height: 48px;
+    display: block;
+  }
+
+  &-picture &-item-thumbnail.anticon:before {
+    line-height: 48px;
+    font-size: 24px;
+    color: #999;
+  }
+
+  &-picture &-item-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: top;
+    margin: 0 0 0 8px;
+    line-height: 42px;
+    transition: all 0.3s ease;
+  }
+
+  &-picture &-item-uploading &-item-name {
+    line-height: 28px;
+  }
+
+  &-picture &-item-progress {
+    padding-left: 56px;
+    margin-top: 0;
+  }
+
+  &-picture .anticon-cross {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    line-height: 1;
   }
 
   .@{upload-prefix-cls}-success-icon {