feat: upload add download icon (#18664)

* feat: upload add download icon * feat: clear up * feat: log * empty * feat: 理解错误 * feat: test * test * feat: clean up * Update components.test.js.snap * Update demo.test.js.snap * Update demo.test.js.snap * Update demo.test.js.snap * Update demo.test.js.snap * Update work-with-us.zh-CN.md * feat: clean up * fix: showDownloadIcon=false 24px * fix: More rigorous * fix: test * fix: test * fix: [] key * fix: hover css * fix: test
ant-design · Sep 11, 2019 · f659d23 · f659d23
1 parent f8af697
commit f659d23
Show file tree

Hide file tree

Showing 13 changed files with 1,653 additions and 596 deletions.
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -17309,7 +17309,7 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
     class="config-upload-list config-upload-list-text"
   >
     <div
-      class="config-upload-list-item config-upload-list-item-done"
+      class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
     >
       <div
         class="config-upload-list-item-info"
@@ -17335,34 +17335,67 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
             </svg>
           </i>
           <span
-            class="config-upload-list-item-name"
+            class="config-upload-list-item-name config-upload-list-item-name-icon-count-2"
             title="xxx.png"
           >
             xxx.png
+            <span
+              class="config-upload-list-item-card-actions "
+            >
+              <a
+                title="Download file"
+              >
+                <i
+                  aria-label="icon: download"
+                  class="anticon anticon-download"
+                  tabindex="-1"
+                  title="Download file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="download"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </i>
+              </a>
+              <a
+                title="Remove file"
+              >
+                <i
+                  aria-label="icon: delete"
+                  class="anticon anticon-delete"
+                  tabindex="-1"
+                  title="Remove file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="delete"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                    />
+                  </svg>
+                </i>
+              </a>
+            </span>
           </span>
         </span>
       </div>
-      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-        tabindex="-1"
-        title="Remove file"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
     </div>
   </div>
 </span>
@@ -17379,7 +17412,7 @@ exports[`ConfigProvider components Upload normal 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class="ant-upload-list-item ant-upload-list-item-done"
+      class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
     >
       <div
         class="ant-upload-list-item-info"
@@ -17405,34 +17438,67 @@ exports[`ConfigProvider components Upload normal 1`] = `
             </svg>
           </i>
           <span
-            class="ant-upload-list-item-name"
+            class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
             title="xxx.png"
           >
             xxx.png
+            <span
+              class="ant-upload-list-item-card-actions "
+            >
+              <a
+                title="Download file"
+              >
+                <i
+                  aria-label="icon: download"
+                  class="anticon anticon-download"
+                  tabindex="-1"
+                  title="Download file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="download"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </i>
+              </a>
+              <a
+                title="Remove file"
+              >
+                <i
+                  aria-label="icon: delete"
+                  class="anticon anticon-delete"
+                  tabindex="-1"
+                  title="Remove file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="delete"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                    />
+                  </svg>
+                </i>
+              </a>
+            </span>
           </span>
         </span>
       </div>
-      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-        tabindex="-1"
-        title="Remove file"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
     </div>
   </div>
 </span>
@@ -17449,7 +17515,7 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class="ant-upload-list-item ant-upload-list-item-done"
+      class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
     >
       <div
         class="ant-upload-list-item-info"
@@ -17475,34 +17541,67 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
             </svg>
           </i>
           <span
-            class="ant-upload-list-item-name"
+            class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
             title="xxx.png"
           >
             xxx.png
+            <span
+              class="ant-upload-list-item-card-actions "
+            >
+              <a
+                title="Download file"
+              >
+                <i
+                  aria-label="icon: download"
+                  class="anticon anticon-download"
+                  tabindex="-1"
+                  title="Download file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="download"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+                    />
+                  </svg>
+                </i>
+              </a>
+              <a
+                title="Remove file"
+              >
+                <i
+                  aria-label="icon: delete"
+                  class="anticon anticon-delete"
+                  tabindex="-1"
+                  title="Remove file"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="delete"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                    />
+                  </svg>
+                </i>
+              </a>
+            </span>
           </span>
         </span>
       </div>
-      <i
-        aria-label="icon: close"
-        class="anticon anticon-close"
-        tabindex="-1"
-        title="Remove file"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-          />
-        </svg>
-      </i>
     </div>
   </div>
 </span>

diff --git a/components/locale/default.tsx b/components/locale/default.tsx
@@ -42,6 +42,7 @@ export default {
     removeFile: 'Remove file',
     uploadError: 'Upload error',
     previewFile: 'Preview file',
+    downloadFile: 'Download file',
   },
   Empty: {
     description: 'No Data',

diff --git a/components/locale/zh_CN.tsx b/components/locale/zh_CN.tsx
@@ -42,6 +42,7 @@ export default {
     removeFile: '删除文件',
     uploadError: '上传错误',
     previewFile: '预览文件',
+    downloadFile: '下载文件',
   },
   Empty: {
     description: '暂无数据',

diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
@@ -253,21 +253,24 @@ class Upload extends React.Component<UploadProps, UploadState> {
       showUploadList,
       listType,
       onPreview,
+      onDownload,
       previewFile,
       disabled,
       locale: propLocale,
     } = this.props;
-    const { showRemoveIcon, showPreviewIcon } = showUploadList as any;
+    const { showRemoveIcon, showPreviewIcon, showDownloadIcon } = showUploadList as any;
     const { fileList } = this.state;
     return (
       <UploadList
         listType={listType}
         items={fileList}
         previewFile={previewFile}
         onPreview={onPreview}
+        onDownload={onDownload}
         onRemove={this.handleManualRemove}
         showRemoveIcon={!disabled && showRemoveIcon}
         showPreviewIcon={showPreviewIcon}
+        showDownloadIcon={showDownloadIcon}
         locale={{ ...locale, ...propLocale }}
       />
     );