feat(Upload): showUploadList add extra option (#50098)

2024-11-27 20:49:53 +08:00 · 2024-07-26 17:45:11 +08:00 · 2024-07-26 17:45:11 +08:00 · 02853808ee
commit 02853808ee
parent ca1b0b17eb
10 changed files with 98 additions and 14 deletions
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@ -386,6 +386,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
    removeIcon,
    previewIcon,
    downloadIcon,
+    extra,
  } = typeof showUploadList === 'boolean' ? ({} as ShowUploadListInterface) : showUploadList;

  // use showRemoveIcon if it is specified explicitly
@ -412,6 +413,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
        previewIcon={previewIcon}
        downloadIcon={downloadIcon}
        iconRender={iconRender}
+        extra={extra}
        locale={{ ...contextLocale, ...propLocale }}
        isImageUrl={isImageUrl}
        progress={progress}
--- a/components/upload/UploadList/ListItem.tsx
+++ b/components/upload/UploadList/ListItem.tsx
@ -31,6 +31,7 @@ export interface ListItemProps {
  removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
  downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
  previewIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+  extra?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
  iconRender: (file: UploadFile) => React.ReactNode;
  actionIconRender: (
    customIcon: React.ReactNode,
@ -67,6 +68,7 @@ const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(
      previewIcon: customPreviewIcon,
      removeIcon: customRemoveIcon,
      downloadIcon: customDownloadIcon,
+      extra: customExtra,
      onPreview,
      onDownload,
      onClose,
@ -172,9 +174,13 @@ const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(
        {removeIcon}
      </span>
    );
+
+    const extraContent = typeof customExtra === 'function' ? customExtra(file) : customExtra;
+    const extra = extraContent && <span className={`${prefixCls}-list-item-extra`}>{extraContent}</span>
+
    const listItemNameClass = classNames(`${prefixCls}-list-item-name`);
    const fileName = file.url
-      ? [
+      ?
          <a
            key="view"
            target="_blank"
@ -186,10 +192,9 @@ const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(
            onClick={(e) => onPreview(file, e)}
          >
            {file.name}
-          </a>,
-          downloadOrDelete,
-        ]
-      : [
+            {extra}
+          </a>
+      :
          <span
            key="view"
            className={listItemNameClass}
@ -197,9 +202,9 @@ const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(
            title={file.name}
          >
            {file.name}
-          </span>,
-          downloadOrDelete,
-        ];
+            {extra}
+          </span>
+        ;

    const previewIcon =
      showPreviewIcon && (file.url || file.thumbUrl) ? (
@ -232,6 +237,7 @@ const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(
      <div className={listItemClassName}>
        {icon}
        {fileName}
+        {downloadOrDelete}
        {pictureCardActions}
        {showProgress && (
          <CSSMotion
--- a/components/upload/UploadList/index.tsx
+++ b/components/upload/UploadList/index.tsx
@ -43,6 +43,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<UploadListRef, UploadLi
    removeIcon,
    previewIcon,
    downloadIcon,
+    extra,
    progress = { size: [-1, 2], showInfo: false },
    appendAction,
    appendActionVisible = true,
@ -225,6 +226,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<UploadListRef, UploadLi
            removeIcon={removeIcon}
            previewIcon={previewIcon}
            downloadIcon={downloadIcon}
+            extra={extra}
            iconRender={internalIconRender}
            actionIconRender={actionIconRender}
            itemRender={itemRender}
--- a/components/upload/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/upload/tests/snapshots/demo-extend.test.ts.snap
@ -4620,6 +4620,15 @@ exports[`renders components/upload/demo/upload-custom-action-icon.tsx extend con
          title="xxx.png"
        >
          xxx.png
+          <span
+            class="ant-upload-list-item-extra"
+          >
+            <span
+              style="color: rgb(204, 204, 204);"
+            >
+              (1.18MB)
+            </span>
+          </span>
        </a>
        <span
          class="ant-upload-list-item-actions"
@ -4703,6 +4712,15 @@ exports[`renders components/upload/demo/upload-custom-action-icon.tsx extend con
          title="yyy.png"
        >
          yyy.png
+          <span
+            class="ant-upload-list-item-extra"
+          >
+            <span
+              style="color: rgb(204, 204, 204);"
+            >
+              (1.18MB)
+            </span>
+          </span>
        </a>
        <span
          class="ant-upload-list-item-actions"
@ -4786,6 +4804,15 @@ exports[`renders components/upload/demo/upload-custom-action-icon.tsx extend con
          title="zzz.png"
        >
          zzz.png
+          <span
+            class="ant-upload-list-item-extra"
+          >
+            <span
+              style="color: rgb(204, 204, 204);"
+            >
+              (1.18MB)
+            </span>
+          </span>
        </a>
        <span
          class="ant-upload-list-item-actions"
--- a/components/upload/tests/snapshots/demo.test.ts.snap
+++ b/components/upload/tests/snapshots/demo.test.ts.snap
@ -4341,6 +4341,19 @@ exports[`renders components/upload/demo/upload-custom-action-icon.tsx correctly
          title="xxx.png"
        >
          xxx.png
+          <span
+            class="ant-upload-list-item-extra"
+          >
+            <span
+              style="color:#cccccc"
+            >
+              (
+              <!-- -->
+              1.18
+              <!-- -->
+              MB)
+            </span>
+          </span>
        </a>
        <span
          class="ant-upload-list-item-actions"
@ -4424,6 +4437,19 @@ exports[`renders components/upload/demo/upload-custom-action-icon.tsx correctly
          title="yyy.png"
        >
          yyy.png
+          <span
+            class="ant-upload-list-item-extra"
+          >
+            <span
+              style="color:#cccccc"
+            >
+              (
+              <!-- -->
+              1.18
+              <!-- -->
+              MB)
+            </span>
+          </span>
        </a>
        <span
          class="ant-upload-list-item-actions"
@ -4507,6 +4533,19 @@ exports[`renders components/upload/demo/upload-custom-action-icon.tsx correctly
          title="zzz.png"
        >
          zzz.png
+          <span
+            class="ant-upload-list-item-extra"
+          >
+            <span
+              style="color:#cccccc"
+            >
+              (
+              <!-- -->
+              1.18
+              <!-- -->
+              MB)
+            </span>
+          </span>
        </a>
        <span
          class="ant-upload-list-item-actions"
--- a/components/upload/demo/upload-custom-action-icon.md
+++ b/components/upload/demo/upload-custom-action-icon.md
@ -1,7 +1,7 @@
 ## zh-CN

-使用 `showUploadList` 设置列表交互图标。
+使用 `showUploadList` 设置列表交互图标和其他文件信息。

 ## en-US

-Use `showUploadList` for custom action icons of files.
+Use `showUploadList` for custom action icons and extra information of files.
--- a/components/upload/demo/upload-custom-action-icon.tsx
+++ b/components/upload/demo/upload-custom-action-icon.tsx
@ -14,6 +14,7 @@ const props: UploadProps = {
    {
      uid: '1',
      name: 'xxx.png',
+      size: 1234567,
      status: 'done',
      response: 'Server Error 500', // custom error message to show
      url: 'http://www.baidu.com/xxx.png',
@ -21,18 +22,23 @@ const props: UploadProps = {
    {
      uid: '2',
      name: 'yyy.png',
+      size: 1234567,
      status: 'done',
      url: 'http://www.baidu.com/yyy.png',
    },
    {
      uid: '3',
      name: 'zzz.png',
+      size: 1234567,
      status: 'error',
      response: 'Server Error 500', // custom error message to show
      url: 'http://www.baidu.com/zzz.png',
    },
  ],
  showUploadList: {
+    extra: ({ size = 0 }) => (
+      <span style={{ color: '#cccccc' }}>({(size / 1024 / 1024).toFixed(2)}MB)</span>
+    ),
    showDownloadIcon: true,
    downloadIcon: 'Download',
    showRemoveIcon: true,
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@ -36,7 +36,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 <code src="./demo/transform-file.tsx">Transform file before request</code>
 <code src="./demo/upload-with-aliyun-oss.tsx">Aliyun OSS</code>
 <code src="./demo/file-type.tsx" debug>custom show icon</code>
-<code src="./demo/upload-custom-action-icon.tsx">custom action icon</code>
+<code src="./demo/upload-custom-action-icon.tsx">Custom action icon and extra info</code>
 <code src="./demo/drag-sorting.tsx">Drag sorting of uploadList</code>
 <code src="./demo/crop-image.tsx">Crop image before uploading</code>
 <code src="./demo/customize-progress-bar.tsx">Customize Progress Bar</code>
@ -70,7 +70,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | openFileDialogOnClick | Click open file dialog | boolean | true |  |
 | previewFile | Customize preview file logic | (file: File \| Blob) => Promise&lt;dataURL: string> | - |  |
 | progress | Custom progress bar | [ProgressProps](/components/progress/#api) (support `type="line"` only) | { strokeWidth: 2, showInfo: false } | 4.3.0 |
-| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually | boolean \| { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, previewIcon?: ReactNode \| (file: UploadFile) => ReactNode, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
+| showUploadList | Whether to show default upload list, could be an object to specify `extra`(5.20.0+), `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually | boolean \| { extra?: ReactNode \| (file: UploadFile) => ReactNode, showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, previewIcon?: ReactNode \| (file: UploadFile) => ReactNode, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | `extra`: 5.20.0 |
 | withCredentials | The ajax upload with cookie sent | boolean | false |  |
 | onChange | A callback function, can be executed when uploading state is changing. It will trigger by every uploading phase. see [onChange](#onchange) | function | - |  |
 | onDrop | A callback function executed when files are dragged and dropped into the upload area | (event: React.DragEvent) => void | - | 4.16.0 |
--- a/components/upload/index.zh-CN.md
+++ b/components/upload/index.zh-CN.md
@ -37,7 +37,7 @@ demo:
 <code src="./demo/transform-file.tsx">上传前转换文件</code>
 <code src="./demo/upload-with-aliyun-oss.tsx">阿里云 OSS</code>
 <code src="./demo/file-type.tsx" debug>自定义显示 icon</code>
-<code src="./demo/upload-custom-action-icon.tsx">自定义交互图标</code>
+<code src="./demo/upload-custom-action-icon.tsx">自定义交互图标和文件信息</code>
 <code src="./demo/drag-sorting.tsx">上传列表拖拽排序</code>
 <code src="./demo/crop-image.tsx">上传前裁切图片</code>
 <code src="./demo/customize-progress-bar.tsx">自定义进度条样式</code>
@ -71,7 +71,7 @@ demo:
 | openFileDialogOnClick | 点击打开文件对话框 | boolean | true |  |
 | previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise&lt;dataURL: string> | - |  |
 | progress | 自定义进度条样式 | [ProgressProps](/components/progress-cn#api)（仅支持 `type="line"`） | { strokeWidth: 2, showInfo: false } | 4.3.0 |
-| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, previewIcon?: ReactNode \| (file: UploadFile) => ReactNode, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
+| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `extra`(5.20.0+), `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { extra?: ReactNode \| (file: UploadFile) => ReactNode, showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, previewIcon?: ReactNode \| (file: UploadFile) => ReactNode, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | `extra`: 5.20.0 |
 | withCredentials | 上传请求时是否携带 cookie | boolean | false |  |
 | onChange | 上传文件改变时的回调，上传每个阶段都会触发该事件。详见 [onChange](#onchange) | function | - |  |
 | onDrop | 当文件被拖入上传区域时执行的回调功能 | (event: React.DragEvent) => void | - | 4.16.0 |
--- a/components/upload/interface.ts
+++ b/components/upload/interface.ts
@ -50,6 +50,7 @@ export interface UploadChangeParam<T = UploadFile> {
 }

 export interface ShowUploadListInterface<T = any> {
+  extra?: React.ReactNode | ((file: UploadFile<T>) => React.ReactNode);
  showRemoveIcon?: boolean;
  showPreviewIcon?: boolean;
  showDownloadIcon?: boolean;
@ -155,6 +156,7 @@ export interface UploadListProps<T = any> {
  removeIcon?: React.ReactNode | ((file: UploadFile<T>) => React.ReactNode);
  downloadIcon?: React.ReactNode | ((file: UploadFile<T>) => React.ReactNode);
  previewIcon?: React.ReactNode | ((file: UploadFile<T>) => React.ReactNode);
+  extra?: React.ReactNode | ((file: UploadFile<T>) => React.ReactNode);
  locale: UploadLocale;
  previewFile?: PreviewFileHandler;
  iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;