Merge pull request #425 from XiaoMi/hotfix/upload_style

Upload Style
XiaoMi · Jul 18, 2019 · 0755f4d · 0755f4d
2 parents 0b1de5b + 15f13a7
commit 0755f4d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 13 deletions.
diff --git a/components/upload/Upload.js b/components/upload/Upload.js
@@ -12,7 +12,7 @@ class Upload extends Component {
     const fileList = this.prepareDefaultFileList(props.defaultFileList)
     this.state = {
       fileList,
-      fileCountLimted: false
+      fileCountLimted: props.defaultFileList.length >= props.maxCount
     }
   }
   componentWillReceiveProps (nextProps) {
@@ -123,7 +123,7 @@ class Upload extends Component {
       this.setState({ fileList })
       this.uploadFile(file)
     }
-    if (fileList.length === maxCount) {
+    if (fileList.length >= maxCount) {
       this.setState({fileCountLimted: true})
     }
     ReactDOM.findDOMNode(this.uploadRef).value = ''

diff --git a/components/upload/UploadDrag.js b/components/upload/UploadDrag.js
@@ -46,7 +46,8 @@ class UploadDrag extends Upload {
     } = this.props
     const {
       overEvent,
-      fileList
+      fileList,
+      fileCountLimted
     } = this.state
 
     const dragCls = classNames(
@@ -90,7 +91,7 @@ class UploadDrag extends Upload {
                 this.uploadFiles(e.target.files)
               }}
               multiple={multiple && 'multiple'}
-              disabled={disabled && 'disabled'}
+              disabled={(disabled || fileCountLimted) && 'disabled'}
               hidden
               accept={accept}
             />
@@ -105,7 +106,10 @@ class UploadDrag extends Upload {
         >
           {
             fileList.length > 0 && <li className='hi-upload__item hi-upload__item-tips'>
-              <Icon name='comment-circle-o' />{localeDatas.upload.dragTips}
+              <Icon name='comment-circle-o' />
+              <span className='hi-upload__tips--exist'>
+                {localeDatas.upload.dragTips}
+              </span>
             </li>
           }
           {fileList.map((file, index) => {

diff --git a/components/upload/UploadPhoto.js b/components/upload/UploadPhoto.js
@@ -41,7 +41,8 @@ class UploadPhoto extends Upload {
       fileList,
       showModal,
       previewFile,
-      activeIndex
+      activeIndex,
+      fileCountLimted
     } = this.state
     const {
       onRemove,
@@ -96,7 +97,7 @@ class UploadPhoto extends Upload {
                 }}
                 type='file'
                 accept={accept}
-                disabled={disabled && 'disabled'}
+                disabled={(disabled || fileCountLimted) && 'disabled'}
                 onChange={e => this.uploadFiles(e.target.files)}
                 hidden
               />

diff --git a/components/upload/UploadPictureCard.js b/components/upload/UploadPictureCard.js
@@ -16,7 +16,8 @@ class UploadPictureCard extends Upload {
       localeDatas
     } = this.props
     const {
-      fileList
+      fileList,
+      fileCountLimted
     } = this.state
 
     return (
@@ -29,11 +30,11 @@ class UploadPictureCard extends Upload {
               className='upload-input'
               onChange={e => this.uploadFiles(e.target.files)}
               multiple={multiple && 'multiple'}
-              disabled={disabled && 'disabled'}
+              disabled={(disabled || fileCountLimted) && 'disabled'}
               accept={accept}
               hidden
             />
-            <span className={`hi-upload__button ${disabled ? 'hi-upload__button--disabled' : ''}`}>
+            <span className={`hi-upload__button ${(disabled || fileCountLimted) ? 'hi-upload__button--disabled' : ''}`}>
               {buttonText || localeDatas.upload.buttonText}
             </span>
           </label>

diff --git a/components/upload/style/index.scss b/components/upload/style/index.scss
@@ -30,6 +30,10 @@
       display: block;
       padding: 12px 0 8px;
     }
+
+    &--exist {
+      padding-left: 3px;
+    }
   }
 
   &__list {
@@ -43,7 +47,7 @@
     color: #666;
     display: flex;
     align-items: center;
-    padding-bottom: 8px;
+    padding: 4px 0;
     overflow: hidden;
     position: relative;
 
@@ -61,6 +65,10 @@
       cursor: pointer;
       font-size: 18px;
     }
+
+    .icon-plus {
+      font-size: 32px;
+    }
   }
 
   &__right-content {
@@ -121,7 +129,7 @@
     width: 100%;
     min-height: 140px;
     box-sizing: border-box;
-    border: 1px dotted #dbdbdb;
+    border: 1px dashed #dbdbdb;
     cursor: pointer;
     padding: 12px;
 
@@ -148,6 +156,12 @@
       }
     }
 
+    .hi-upload__item {
+      &:not(:first-child):not(:last-child) {
+        border-bottom: 1px solid rgba(230, 230, 230, 1);
+      }
+    }
+
     .drop-content {
       display: none;
     }
@@ -230,7 +244,7 @@
         text-align: center;
         font-size: 28px;
         color: #e7e7e7;
-        border: 1px dotted #bcbcbc;
+        border: 1px dashed rgba(216, 216, 216, 1);
         line-height: 140px;
 
         &:hover {