From dc019dca56ee8c17d5a4e344f88a73899ca6debc Mon Sep 17 00:00:00 2001
From: Cole <cqiufan@outlook.com>
Date: Tue, 25 Jan 2022 11:20:46 +0800
Subject: [PATCH] fix: upload button position flashes when it changes from
 hidden to displayed (#33820)

* fix: fix upload button position flashes when it changes from hidden to displayed (#33819)

* fix: typo in upload

Co-authored-by: chenqiufan <chenqiufan@shiqiao.com>
---
 components/upload/Upload.tsx               | 11 ++++++-----
 components/upload/UploadList/index.tsx     |  6 +++++-
 components/upload/__tests__/upload.test.js | 22 ++++++++++++++++++++++
 components/upload/interface.tsx            |  1 +
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index 628f36afd8..305caad216 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -322,7 +322,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     delete rcUploadProps.id;
   }
 
-  const renderUploadList = (button?: React.ReactNode) =>
+  const renderUploadList = (button?: React.ReactNode, buttonVisible?: boolean) =>
     showUploadList ? (
       <LocaleReceiver componentName="Upload" defaultLocale={defaultLocale.Upload}>
         {(locale: UploadLocale) => {
@@ -354,6 +354,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
               isImageUrl={isImageUrl}
               progress={progress}
               appendAction={button}
+              appendActionVisible={buttonVisible}
               itemRender={itemRender}
             />
           );
@@ -400,8 +401,8 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     [`${prefixCls}-rtl`]: direction === 'rtl',
   });
 
-  const uploadButton = (
-    <div className={uploadButtonCls} style={children ? undefined : { display: 'none' }}>
+  const renderUploadButton = (uploadButtonStyle?: React.CSSProperties) => (
+    <div className={uploadButtonCls} style={uploadButtonStyle}>
       <RcUpload {...rcUploadProps} ref={upload} />
     </div>
   );
@@ -409,14 +410,14 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
   if (listType === 'picture-card') {
     return (
       <span className={classNames(`${prefixCls}-picture-card-wrapper`, className)}>
-        {renderUploadList(uploadButton)}
+        {renderUploadList(renderUploadButton(), !!children)}
       </span>
     );
   }
 
   return (
     <span className={className}>
-      {uploadButton}
+      {renderUploadButton(children ? undefined : { display: 'none' })}
       {renderUploadList()}
     </span>
   );
diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx
index 89955c2127..11f7083ea6 100644
--- a/components/upload/UploadList/index.tsx
+++ b/components/upload/UploadList/index.tsx
@@ -42,6 +42,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
     downloadIcon,
     progress,
     appendAction,
+    appendActionVisible,
     itemRender,
   },
   ref,
@@ -225,12 +226,14 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
 
       {/* Append action */}
       {appendAction && (
-        <CSSMotion {...motionConfig}>
+        <CSSMotion {...motionConfig} visible={appendActionVisible} forceRender>
           {({ className: motionClassName, style: motionStyle }) =>
             cloneElement(appendAction, oriProps => ({
               className: classNames(oriProps.className, motionClassName),
               style: {
                 ...motionStyle,
+                // prevent the element has hover css pseudo-class that may cause animation to end prematurely.
+                pointerEvents: motionClassName ? 'none' : undefined,
                 ...oriProps.style,
               },
             }))
@@ -254,6 +257,7 @@ UploadList.defaultProps = {
   showRemoveIcon: true,
   showDownloadIcon: false,
   showPreviewIcon: true,
+  appendActionVisible: true,
   previewFile: previewImage,
   isImageUrl,
 };
diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.js
index c096327999..71865b951e 100644
--- a/components/upload/__tests__/upload.test.js
+++ b/components/upload/__tests__/upload.test.js
@@ -867,4 +867,26 @@ describe('Upload', () => {
 
     expect(onChange.mock.calls[0][0].fileList).toHaveLength(1);
   });
+
+  // https://github.com/ant-design/ant-design/issues/33819
+  it('should show the animation of the upload children leaving when the upload children becomes null', async () => {
+    const wrapper = mount(
+      <Upload listType="picture-card">
+        <button type="button">upload</button>
+      </Upload>,
+    );
+    wrapper.setProps({ children: null });
+    expect(wrapper.find('.ant-upload-select-picture-card').getDOMNode().style.display).not.toBe(
+      'none',
+    );
+    await act(async () => {
+      await sleep(100);
+      wrapper
+        .find('.ant-upload-select-picture-card')
+        .getDOMNode()
+        .dispatchEvent(new Event('animationend'));
+      await sleep(20);
+    });
+    expect(wrapper.find('.ant-upload-select-picture-card').getDOMNode().style.display).toBe('none');
+  });
 });
diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx
index 7c11a8dd22..ff47c3c1b6 100755
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@@ -155,5 +155,6 @@ export interface UploadListProps<T = any> {
   iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
   isImageUrl?: (file: UploadFile) => boolean;
   appendAction?: React.ReactNode;
+  appendActionVisible?: boolean;
   itemRender?: ItemRender<T>;
 }