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

* style: fix Upload picture-card button style close https://github.com/ant-design/ant-design/issues/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
2025-08-06 16:06:28 +08:00 · 2020-08-24 16:33:24 +08:00 · 2020-08-24 16:33:24 +08:00 · 24a86df257
commit 24a86df257
parent fbef76e943
23 changed files with 1012 additions and 1011 deletions
--- 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>
--- 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>

--- 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,8 +318,7 @@ 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>
    );
  }
@ -332,7 +326,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
  return (
    <span className={className}>
      {uploadButton}
-      {uploadList}
+      {renderUploadList()}
    </span>
  );
 };
--- 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>
  );
 };
--- a/components/upload/tests/snapshots/demo.test.js.snap
+++ b/components/upload/tests/snapshots/demo.test.js.snap
--- a/components/upload/tests/uploadlist.test.js
+++ b/components/upload/tests/uploadlist.test.js
@ -880,4 +880,27 @@ describe('Upload List', () => {
      },
    });
  });
+
+  it('should render button inside UploadList when listStyle is picture-card', () => {
+    const wrapper = mount(
+      <Upload
+        action="http://jsonplaceholder.typicode.com/posts/"
+        listType="picture-card"
+        fileList={[
+          {
+            uid: '0',
+            name: 'xxx.png',
+          },
+        ]}
+        showUploadList
+      >
+        <button className="trigger" type="button">
+          upload
+        </button>
+      </Upload>,
+    );
+    expect(wrapper.exists('.ant-upload-list button.trigger')).toBe(true);
+    wrapper.setProps({ showUploadList: false });
+    expect(wrapper.exists('.ant-upload-list button.trigger')).toBe(false);
+  });
 });
--- a/components/upload/demo/avatar.md
+++ b/components/upload/demo/avatar.md
@ -61,13 +61,13 @@ class Avatar extends React.Component {
  };

  render() {
+    const { loading, imageUrl } = this.state;
    const uploadButton = (
      <div>
-        {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
-        <div className="ant-upload-text">Upload</div>
+        {loading ? <LoadingOutlined /> : <PlusOutlined />}
+        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
-    const { imageUrl } = this.state;
    return (
      <Upload
        name="avatar"
--- a/components/upload/demo/basic.md
+++ b/components/upload/demo/basic.md
@ -37,9 +37,7 @@ const props = {

 ReactDOM.render(
  <Upload {...props}>
-    <Button>
-      <UploadOutlined /> Click to Upload
-    </Button>
+    <Button icon={<UploadOutlined />}>Click to Upload</Button>
  </Upload>,
  mountNode,
 );
--- a/components/upload/demo/customize-progress-bar.md
+++ b/components/upload/demo/customize-progress-bar.md
@ -45,9 +45,7 @@ const props = {

 ReactDOM.render(
  <Upload {...props}>
-    <Button>
-      <UploadOutlined /> Click to Upload
-    </Button>
+    <Button icon={<UploadOutlined />}>Click to Upload</Button>
  </Upload>,
  mountNode,
 );
--- a/components/upload/demo/defaultFileList.md
+++ b/components/upload/demo/defaultFileList.md
@ -50,9 +50,7 @@ const props = {

 ReactDOM.render(
  <Upload {...props}>
-    <Button>
-      <UploadOutlined /> Upload
-    </Button>
+    <Button icon={<UploadOutlined />}>Upload</Button>
  </Upload>,
  mountNode,
 );
--- a/components/upload/demo/directory.md
+++ b/components/upload/demo/directory.md
@ -19,9 +19,7 @@ import { UploadOutlined } from '@ant-design/icons';

 ReactDOM.render(
  <Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
-    <Button>
-      <UploadOutlined /> Upload Directory
-    </Button>
+    <Button icon={<UploadOutlined />}>Upload Directory</Button>
  </Upload>,
  mountNode,
 );
--- a/components/upload/demo/file-type.md
+++ b/components/upload/demo/file-type.md
@ -116,11 +116,11 @@ class PicturesWall extends React.Component {
    const uploadButton = (
      <div>
        <PlusOutlined />
-        <div className="ant-upload-text">Upload</div>
+        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
-      <div className="clearfix">
+      <>
        <Upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          listType="picture-card"
@ -134,23 +134,10 @@ class PicturesWall extends React.Component {
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
-      </div>
+      </>
    );
  }
 }

 ReactDOM.render(<PicturesWall />, mountNode);
 ```
-
-```css
-/* you can make up upload button and sample style by using stylesheets */
-.ant-upload-select-picture-card i {
-  color: #999;
-  font-size: 32px;
-}
-
-.ant-upload-select-picture-card .ant-upload-text {
-  margin-top: 8px;
-  color: #666;
-}
-```
--- a/components/upload/demo/fileList.md
+++ b/components/upload/demo/fileList.md
@ -64,9 +64,7 @@ class MyUpload extends React.Component {
    };
    return (
      <Upload {...props} fileList={this.state.fileList}>
-        <Button>
-          <UploadOutlined /> Upload
-        </Button>
+        <Button icon={<UploadOutlined />}>Upload</Button>
      </Upload>
    );
  }
--- a/components/upload/demo/picture-card.md
+++ b/components/upload/demo/picture-card.md
@ -56,6 +56,13 @@ class PicturesWall extends React.Component {
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
+      {
+        uid: '-xxx',
+        percent: 50,
+        name: 'image.png',
+        status: 'uploading',
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      },
      {
        uid: '-5',
        name: 'image.png',
@ -85,11 +92,11 @@ class PicturesWall extends React.Component {
    const uploadButton = (
      <div>
        <PlusOutlined />
-        <div className="ant-upload-text">Upload</div>
+        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
-      <div className="clearfix">
+      <>
        <Upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          listType="picture-card"
@ -107,23 +114,10 @@ class PicturesWall extends React.Component {
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
-      </div>
+      </>
    );
  }
 }

 ReactDOM.render(<PicturesWall />, mountNode);
 ```
-
-```css
-/* you can make up upload button and sample style by using stylesheets */
-.ant-upload-select-picture-card i {
-  color: #999;
-  font-size: 32px;
-}
-
-.ant-upload-select-picture-card .ant-upload-text {
-  margin-top: 8px;
-  color: #666;
-}
-```
--- a/components/upload/demo/picture-style.md
+++ b/components/upload/demo/picture-style.md
@ -32,32 +32,24 @@ const fileList = [
  },
 ];

-const props = {
-  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
-  listType: 'picture',
-  defaultFileList: [...fileList],
-};
-
-const props2 = {
-  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
-  listType: 'picture',
-  defaultFileList: [...fileList],
-  className: 'upload-list-inline',
-};
-
 ReactDOM.render(
  <>
-    <Upload {...props}>
-      <Button>
-        <UploadOutlined /> Upload
-      </Button>
+    <Upload
+      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+      listType="picture"
+      defaultFileList={[...fileList]}
+    >
+      <Button icon={<UploadOutlined />}>Upload</Button>
    </Upload>
    <br />
    <br />
-    <Upload {...props2}>
-      <Button>
-        <UploadOutlined /> Upload
-      </Button>
+    <Upload
+      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+      listType="picture"
+      defaultFileList={[...fileList]}
+      className="upload-list-inline"
+    >
+      <Button icon={<UploadOutlined />}>Upload</Button>
    </Upload>
  </>,
  mountNode,
@ -75,10 +67,4 @@ ReactDOM.render(
 .upload-list-inline [class*='-upload-list-rtl'] .ant-upload-list-item {
  float: right;
 }
-.upload-list-inline .ant-upload-animate-enter {
-  animation-name: uploadAnimateInlineIn;
-}
-.upload-list-inline .ant-upload-animate-leave {
-  animation-name: uploadAnimateInlineOut;
-}
 ```
--- a/components/upload/demo/preview-file.md
+++ b/components/upload/demo/preview-file.md
@ -34,9 +34,7 @@ const props = {

 ReactDOM.render(
  <Upload {...props}>
-    <Button>
-      <UploadOutlined /> Upload
-    </Button>
+    <Button icon={<UploadOutlined />}>Upload</Button>
  </Upload>,
  mountNode,
 );
--- a/components/upload/demo/transform-file.md
+++ b/components/upload/demo/transform-file.md
@ -43,9 +43,7 @@ const props = {
 ReactDOM.render(
  <>
    <Upload {...props}>
-      <Button>
-        <UploadOutlined /> Upload
-      </Button>
+      <Button icon={<UploadOutlined />}>Upload</Button>
    </Upload>
  </>,
  mountNode,
--- a/components/upload/demo/upload-custom-action-icon.md
+++ b/components/upload/demo/upload-custom-action-icon.md
@ -56,9 +56,7 @@ const props = {

 ReactDOM.render(
  <Upload {...props}>
-    <Button>
-      <UploadOutlined /> Upload
-    </Button>
+    <Button icon={<UploadOutlined />}>Upload</Button>
  </Upload>,
  mountNode,
 );
--- a/components/upload/demo/upload-manually.md
+++ b/components/upload/demo/upload-manually.md
@ -82,9 +82,7 @@ class Demo extends React.Component {
    return (
      <>
        <Upload {...props}>
-          <Button>
-            <UploadOutlined /> Select File
-          </Button>
+          <Button icon={<UploadOutlined />}>Select File</Button>
        </Upload>
        <Button
          type="primary"
--- a/components/upload/demo/upload-png-only.md
+++ b/components/upload/demo/upload-png-only.md
@ -36,9 +36,7 @@ const Uploader = () => {
  };
  return (
    <Upload {...props}>
-      <Button>
-        <UploadOutlined /> Upload png only
-      </Button>
+      <Button icon={<UploadOutlined />}>Upload png only</Button>
    </Upload>
  );
 };
--- a/components/upload/demo/upload-with-aliyun-oss.md
+++ b/components/upload/demo/upload-with-aliyun-oss.md
@ -114,9 +114,7 @@ class AliyunOSSUpload extends React.Component {
    };
    return (
      <Upload {...props}>
-        <Button>
-          <UploadOutlined /> Click to Upload
-        </Button>
+        <Button icon={<UploadOutlined />}>Click to Upload</Button>
      </Upload>
    );
  }
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@ -133,4 +133,5 @@ export interface UploadListProps<T = any> {
  previewFile?: PreviewFileHandler;
  iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
  isImageUrl?: (file: UploadFile) => boolean;
+  appendAction?: React.ReactNode;
 }
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@ -34,8 +34,6 @@
  }

  &&-select-picture-card {
-    display: table;
-    float: left;
    width: @upload-picture-card-size;
    height: @upload-picture-card-size;
    margin-right: 8px;
@ -46,15 +44,14 @@
    border: @border-width-base dashed @border-color-base;
    border-radius: @border-radius-base;
    cursor: pointer;
-    transition: border-color 0.3s ease;
+    transition: border-color 0.3s;

    > .@{upload-prefix-cls} {
-      display: table-cell;
-      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
      height: 100%;
-      padding: @padding-xs;
      text-align: center;
-      vertical-align: middle;
    }

    &:hover {
@ -408,17 +405,16 @@
    }

    &-container {
-      float: left;
+      display: inline-block;
      width: @upload-picture-card-size;
      height: @upload-picture-card-size;
      margin: 0 @margin-xs @margin-xs 0;
+      vertical-align: top;
    }

    .@{upload-item} {
-      float: left;
-      width: @upload-picture-card-size;
-      height: @upload-picture-card-size;
-      margin: 0 @margin-xs @margin-xs 0;
+      height: 100%;
+      margin: 0;
    }

    .@{upload-item}-info {
@ -515,6 +511,7 @@

    .@{upload-item}-progress {
      bottom: 32px;
+      width: calc(100% - 14px);
      padding-left: 0;
    }
  }