fix: Upload listType="picture-card" select button should be hidden wh…

…en children is empty close #36183
ant-design · Jun 23, 2022 · 180ba51 · 180ba51
1 parent 726dd85
commit 180ba51
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
@@ -406,17 +406,19 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     </div>
   );
 
+  const uploadButton = renderUploadButton(children ? undefined : { display: 'none' });
+
   if (listType === 'picture-card') {
     return (
       <span className={classNames(`${prefixCls}-picture-card-wrapper`, className)}>
-        {renderUploadList(renderUploadButton(), !!children)}
+        {renderUploadList(uploadButton, !!children)}
       </span>
     );
   }
 
   return (
     <span className={className}>
-      {renderUploadButton(children ? undefined : { display: 'none' })}
+      {uploadButton}
       {renderUploadList()}
     </span>
   );

diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js
@@ -1499,4 +1499,43 @@ describe('Upload List', () => {
     });
     unmount();
   });
+
+  describe('should not display upload file-select button when listType is picture-card and children is empty', () => {
+    it('when showUploadList is true', () => {
+      const list = [
+        {
+          uid: '0',
+          name: 'xxx.png',
+          status: 'done',
+          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+        },
+      ];
+      const { container: wrapper, unmount } = render(
+        <Upload fileList={list} listType="picture-card" />,
+      );
+      expect(wrapper.querySelectorAll('.ant-upload-select').length).toBe(1);
+      expect(wrapper.querySelectorAll('.ant-upload-select')[0].style.display).toBe('none');
+      unmount();
+    });
+
+    // https://github.com/ant-design/ant-design/issues/36183
+    it('when showUploadList is false', () => {
+      const list = [
+        {
+          uid: '0',
+          name: 'xxx.png',
+          status: 'done',
+          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+        },
+      ];
+      const { container: wrapper, unmount } = render(
+        <Upload fileList={list} showUploadList={false} listType="picture-card" />,
+      );
+      expect(wrapper.querySelectorAll('.ant-upload-select').length).toBe(1);
+      expect(wrapper.querySelectorAll('.ant-upload-select')[0].style.display).toBe('none');
+      unmount();
+    });
+  });
 });