From 5742ae221c72d60b9a7c4de6ae3528678b043e48 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 22 Jul 2019 19:18:47 +0800
Subject: [PATCH] :zap: improve upload list layout style

---
 components/upload/Upload.tsx           |  3 ++-
 components/upload/UploadList.tsx       |  6 ++++-
 components/upload/demo/avatar.md       | 32 ++++++++++++--------------
 components/upload/demo/picture-card.md | 28 ++++++++++++++++++++--
 components/upload/style/index.less     |  8 +++++++
 5 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index 1564fb6cbc..7ec55aec43 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -332,12 +332,13 @@ class Upload extends React.Component<UploadProps, UploadState> {
 
     if (listType === 'picture-card') {
       return (
-        <span className={className}>
+        <span className={classNames(className, `${prefixCls}-picture-card-wrapper`)}>
           {uploadList}
           {uploadButton}
         </span>
       );
     }
+
     return (
       <span className={className}>
         {uploadButton}
diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx
index da9a90b312..705ecf2a21 100644
--- a/components/upload/UploadList.tsx
+++ b/components/upload/UploadList.tsx
@@ -89,7 +89,11 @@ export default class UploadList extends React.Component<UploadListProps, any> {
           );
         } else {
           const thumbnail = isImageUrl(file) ? (
-            <img src={file.thumbUrl || file.url} alt={file.name} />
+            <img
+              src={file.thumbUrl || file.url}
+              alt={file.name}
+              className={`${prefixCls}-list-item-image`}
+            />
           ) : (
             <Icon type="file" className={`${prefixCls}-list-item-icon`} theme="twoTone" />
           );
diff --git a/components/upload/demo/avatar.md b/components/upload/demo/avatar.md
index cbcb5848fa..1d42813690 100644
--- a/components/upload/demo/avatar.md
+++ b/components/upload/demo/avatar.md
@@ -27,15 +27,15 @@ function getBase64(img, callback) {
 }
 
 function beforeUpload(file) {
-  const isJPG = file.type === 'image/jpeg';
-  if (!isJPG) {
-    message.error('You can only upload JPG file!');
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+  if (!isJpgOrPng) {
+    message.error('You can only upload JPG/PNG file!');
   }
   const isLt2M = file.size / 1024 / 1024 < 2;
   if (!isLt2M) {
     message.error('Image must smaller than 2MB!');
   }
-  return isJPG && isLt2M;
+  return isJpgOrPng && isLt2M;
 }
 
 class Avatar extends React.Component {
@@ -68,19 +68,17 @@ class Avatar extends React.Component {
     );
     const { imageUrl } = this.state;
     return (
-      <div className="clearfix">
-        <Upload
-          name="avatar"
-          listType="picture-card"
-          className="avatar-uploader"
-          showUploadList={false}
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-          beforeUpload={beforeUpload}
-          onChange={this.handleChange}
-        >
-          {imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
-        </Upload>
-      </div>
+      <Upload
+        name="avatar"
+        listType="picture-card"
+        className="avatar-uploader"
+        showUploadList={false}
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        beforeUpload={beforeUpload}
+        onChange={this.handleChange}
+      >
+        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
+      </Upload>
     );
   }
 }
diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md
index bafbb98116..254f57e09b 100644
--- a/components/upload/demo/picture-card.md
+++ b/components/upload/demo/picture-card.md
@@ -32,7 +32,31 @@ class PicturesWall extends React.Component {
     fileList: [
       {
         uid: '-1',
-        name: 'xxx.png',
+        name: 'image.png',
+        status: 'done',
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      },
+      {
+        uid: '-2',
+        name: 'image.png',
+        status: 'done',
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      },
+      {
+        uid: '-3',
+        name: 'image.png',
+        status: 'done',
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      },
+      {
+        uid: '-4',
+        name: 'image.png',
+        status: 'done',
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      },
+      {
+        uid: '-5',
+        name: 'image.png',
         status: 'done',
         url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
       },
@@ -71,7 +95,7 @@ class PicturesWall extends React.Component {
           onPreview={this.handlePreview}
           onChange={this.handleChange}
         >
-          {fileList.length >= 3 ? null : uploadButton}
+          {fileList.length >= 8 ? null : uploadButton}
         </Upload>
         <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
           <img alt="example" style={{ width: '100%' }} src={previewImage} />
diff --git a/components/upload/style/index.less b/components/upload/style/index.less
index d281ef2bcb..b1129388d5 100644
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@@ -128,6 +128,10 @@
       color: @text-color-secondary;
     }
   }
+
+  &-picture-card-wrapper {
+    .clearfix;
+  }
 }
 
 .@{upload-prefix-cls}-list {
@@ -258,6 +262,10 @@
       transform: translate(-50%, -50%);
     }
 
+    .@{upload-item}-image {
+      max-width: 100%;
+    }
+
     .@{upload-item}-thumbnail img {
       display: block;
       width: 48px;