style: 💄 fix Upload picture-card button style (#26367)

* style: fix Upload picture-card button style close #26317 close #23339 * style: tweak Upload list animation close #22386 * fix snapshot change * docs: update Upload demos * add test case * update form demo * fix test case
ant-design · Aug 24, 2020 · 24a86df · 24a86df
1 parent fbef76e
commit 24a86df
Show file tree

Hide file tree

Showing 23 changed files with 989 additions and 988 deletions.
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -6055,7 +6055,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                     </svg>
                   </span>
                   <span>
-                     Click to upload
+                    Click to upload
                   </span>
                 </button>
               </span>

diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md
@@ -177,9 +177,7 @@ const Demo = () => {
         extra="longgggggggggggggggggggggggggggggggggg"
       >
         <Upload name="logo" action="/upload.do" listType="picture">
-          <Button>
-            <UploadOutlined /> Click to upload
-          </Button>
+          <Button icon={<UploadOutlined />}>Click to upload</Button>
         </Upload>
       </Form.Item>
 

diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
@@ -217,35 +217,6 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     forceUpdate,
   }));
 
-  const renderUploadList = (locale: UploadLocale) => {
-    const {
-      showRemoveIcon,
-      showPreviewIcon,
-      showDownloadIcon,
-      removeIcon,
-      downloadIcon,
-    } = showUploadList as any;
-    return (
-      <UploadList
-        listType={listType}
-        items={getFileList()}
-        previewFile={previewFile}
-        onPreview={onPreview}
-        onDownload={onDownload}
-        onRemove={handleRemove}
-        showRemoveIcon={!disabled && showRemoveIcon}
-        showPreviewIcon={showPreviewIcon}
-        showDownloadIcon={showDownloadIcon}
-        removeIcon={removeIcon}
-        downloadIcon={downloadIcon}
-        iconRender={iconRender}
-        locale={{ ...locale, ...propLocale }}
-        isImageUrl={isImageUrl}
-        progress={progress}
-      />
-    );
-  };
-
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('upload', customizePrefixCls);
@@ -271,11 +242,35 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     delete rcUploadProps.id;
   }
 
-  const uploadList = showUploadList ? (
-    <LocaleReceiver componentName="Upload" defaultLocale={defaultLocale.Upload}>
-      {renderUploadList}
-    </LocaleReceiver>
-  ) : null;
+  const renderUploadList = (button?: React.ReactNode) =>
+    showUploadList ? (
+      <LocaleReceiver componentName="Upload" defaultLocale={defaultLocale.Upload}>
+        {(locale: UploadLocale) => {
+          const { showRemoveIcon, showPreviewIcon, showDownloadIcon, removeIcon, downloadIcon } =
+            typeof showUploadList === 'boolean' ? ({} as any) : showUploadList;
+          return (
+            <UploadList
+              listType={listType}
+              items={getFileList()}
+              previewFile={previewFile}
+              onPreview={onPreview}
+              onDownload={onDownload}
+              onRemove={handleRemove}
+              showRemoveIcon={!disabled && showRemoveIcon}
+              showPreviewIcon={showPreviewIcon}
+              showDownloadIcon={showDownloadIcon}
+              removeIcon={removeIcon}
+              downloadIcon={downloadIcon}
+              iconRender={iconRender}
+              locale={{ ...locale, ...propLocale }}
+              isImageUrl={isImageUrl}
+              progress={progress}
+              appendAction={button}
+            />
+          );
+        }}
+      </LocaleReceiver>
+    ) : button;
 
   if (type === 'drag') {
     const dragCls = classNames(
@@ -302,7 +297,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
             <div className={`${prefixCls}-drag-container`}>{children}</div>
           </RcUpload>
         </div>
-        {uploadList}
+        {renderUploadList()}
       </span>
     );
   }
@@ -323,16 +318,15 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
   if (listType === 'picture-card') {
     return (
       <span className={classNames(className, `${prefixCls}-picture-card-wrapper`)}>
-        {uploadList}
-        {uploadButton}
+        {renderUploadList(uploadButton)}
       </span>
     );
   }
 
   return (
     <span className={className}>
       {uploadButton}
-      {uploadList}
+      {renderUploadList()}
     </span>
   );
 };

diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx
@@ -36,6 +36,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
     removeIcon: customRemoveIcon,
     downloadIcon: customDownloadIcon,
     progress: progressProps,
+    appendAction,
   },
   ref,
 ) => {
@@ -334,13 +335,13 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
     [`${prefixCls}-list-rtl`]: direction === 'rtl',
   });
   const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
+  const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
   return (
-    <Animate
-      transitionName={`${prefixCls}-${animationDirection}`}
-      component="div"
-      className={listClassNames}
-    >
+    <Animate transitionName={transitionName} component="div" className={listClassNames}>
       {list}
+      {React.isValidElement(appendAction)
+        ? React.cloneElement(appendAction, { key: 'appendAction' })
+        : appendAction}
     </Animate>
   );
 };