feat(upload): itemRender add actions params (#30236)

* feat(upload): itemRender add actions params * chore: optimize type definition * chore: update doc * chore: rename actions * chore: trigger ci * chore: rename method name of actions
2024-11-24 11:10:01 +08:00 · 2021-05-06 14:12:26 +08:00 · 2021-05-06 14:12:26 +08:00 · 3ee634ba4c
commit 3ee634ba4c
parent a79f9d7b68
8 changed files with 114 additions and 20 deletions
--- a/components/upload/UploadList/ListItem.tsx
+++ b/components/upload/UploadList/ListItem.tsx
@ -272,7 +272,13 @@ const ListItem = React.forwardRef(

    return (
      <div className={listContainerNameClass} style={style} ref={ref}>
-        {itemRender ? itemRender(item, file, items) : item}
+        {itemRender
+          ? itemRender(item, file, items, {
+              download: onDownload.bind(null, file),
+              preview: onPreview.bind(null, file),
+              remove: onClose.bind(null, file),
+            })
+          : item}
      </div>
    );
  },
--- a/components/upload/UploadList/index.tsx
+++ b/components/upload/UploadList/index.tsx
@ -80,11 +80,11 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
  }, []);

  // ============================= Events =============================
-  const onInternalPreview = (file: UploadFile, e: React.SyntheticEvent<HTMLElement>) => {
+  const onInternalPreview = (file: UploadFile, e?: React.SyntheticEvent<HTMLElement>) => {
    if (!onPreview) {
      return;
    }
-    e.preventDefault();
+    e?.preventDefault();
    return onPreview(file);
  };

--- a/components/upload/tests/snapshots/uploadlist.test.js.snap
+++ b/components/upload/tests/snapshots/uploadlist.test.js.snap
@ -114,20 +114,54 @@ exports[`Upload List itemRender 1`] = `
  <div
    class="ant-upload-list-text-container"
  >
-    <span
+    <div
      class="custom-item-render"
    >
-      uid:-1 name: xxx.png status: removed url: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png  1/2
-    </span>
+      <span>
+        uid:-1 name: xxx.png status: removed url: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png  1/2
+      </span>
+      <span
+        class="custom-item-render-action-remove"
+      >
+        remove
+      </span>
+      <span
+        class="custom-item-render-action-download"
+      >
+        download
+      </span>
+      <span
+        class="custom-item-render-action-preview"
+      >
+        preview
+      </span>
+    </div>
  </div>
  <div
    class="ant-upload-list-text-container"
  >
-    <span
+    <div
      class="custom-item-render"
    >
-      uid:-2 name: yyy.png status: removed url: https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png  2/2
-    </span>
+      <span>
+        uid:-2 name: yyy.png status: removed url: https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png  2/2
+      </span>
+      <span
+        class="custom-item-render-action-remove"
+      >
+        remove
+      </span>
+      <span
+        class="custom-item-render-action-download"
+      >
+        download
+      </span>
+      <span
+        class="custom-item-render-action-preview"
+      >
+        preview
+      </span>
+    </div>
  </div>
 </div>
 `;
--- a/components/upload/tests/type.test.tsx
+++ b/components/upload/tests/type.test.tsx
@ -100,7 +100,24 @@ describe('Upload.typescript', () => {
      },
    ];
    const upload = (
-      <Upload fileList={fileList} defaultFileList={fileList}>
+      <Upload fileList={fileList} defaultFileList={fileList} />
+    )
+    expect(upload).toBeTruthy();
+  });
+  it('itemRender', () => {
+    const upload = (
+      <Upload
+        itemRender={(node, file, list, actions) => (
+          <div>
+            {node}
+            {file.name}
+            {list.length}
+            <span onClick={actions.remove}>remove</span>
+            <span onClick={actions.download}>download</span>
+            <span onClick={actions.preview}>preview</span>
+          </div>
+        )}
+      >
        <span>click to upload</span>
      </Upload>
    );
--- a/components/upload/tests/uploadlist.test.js
+++ b/components/upload/tests/uploadlist.test.js
@ -1162,20 +1162,52 @@ describe('Upload List', () => {
  });

  it('itemRender', () => {
-    const itemRender = (originNode, file, currFileList) => {
+    const onDownload = jest.fn();
+    const onRemove = jest.fn();
+    const onPreview = jest.fn();
+    const itemRender = (originNode, file, currFileList, actions) => {
      const { name, status, uid, url } = file;
      const index = currFileList.indexOf(file);
      return (
-        <span className="custom-item-render">
-          {`uid:${uid} name: ${name} status: ${status} url: ${url}  ${index + 1}/${
-            currFileList.length
-          }`}
-        </span>
+        <div className="custom-item-render">
+          <span>
+            {`uid:${uid} name: ${name} status: ${status} url: ${url}  ${index + 1}/${
+              currFileList.length
+            }`}
+          </span>
+          <span onClick={actions.remove} className="custom-item-render-action-remove">
+            remove
+          </span>
+          <span onClick={actions.download} className="custom-item-render-action-download">
+            download
+          </span>
+          <span onClick={actions.preview} className="custom-item-render-action-preview">
+            preview
+          </span>
+        </div>
      );
    };
-    const wrapper = mount(<UploadList locale={{}} items={fileList} itemRender={itemRender} />);
+    const wrapper = mount(
+      <UploadList
+        onDownload={onDownload}
+        onPreview={onPreview}
+        onRemove={onRemove}
+        locale={{}}
+        items={fileList}
+        itemRender={itemRender}
+      />,
+    );
    expect(wrapper.render()).toMatchSnapshot();

+    wrapper.find('.custom-item-render-action-remove').first().simulate('click');
+    expect(onRemove.mock.calls[0][0]).toEqual(fileList[0]);
+
+    wrapper.find('.custom-item-render-action-download').first().simulate('click');
+    expect(onDownload.mock.calls[0][0]).toEqual(fileList[0]);
+
+    wrapper.find('.custom-item-render-action-preview').first().simulate('click');
+    expect(onPreview.mock.calls[0][0]).toEqual(fileList[0]);
+
    wrapper.unmount();
  });

--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@ -31,7 +31,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 | headers | Set request headers, valid above IE10 | object | - |  |
 | iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - |  |
 | isImageUrl | Customize if render &lt;img /> in thumbnail | (file: UploadFile) => boolean | [(inside implementation)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) |  |
-| itemRender | Custom item of uploadList | (originNode: ReactElement, file: UploadFile, fileList?: object\[]) => React.ReactNode | - | 4.7.0 |
+| itemRender | Custom item of uploadList | (originNode: ReactElement, file: UploadFile, fileList: object\[], actions: { download: function, preview: function, remove: function }) => React.ReactNode | - | 4.16.0 |
 | listType | Built-in stylesheets, support for three types: `text`, `picture` or `picture-card` | string | `text` |  |
 | maxCount | Limit the number of uploaded files. Will replace current one when `maxCount` is `1` | number | - | 4.10.0 |
 | method | The http method of upload request | string | `post` |  |
--- a/components/upload/index.zh-CN.md
+++ b/components/upload/index.zh-CN.md
@ -32,7 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
 | headers | 设置上传的请求头部，IE10 以上有效 | object | - |  |
 | iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - |  |
 | isImageUrl | 自定义缩略图是否使用 &lt;img /> 标签进行显示 | (file: UploadFile) => boolean | [(内部实现)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) |  |
-| itemRender | 自定义上传列表项 | (originNode: ReactElement, file: UploadFile, fileList?: object\[]) => React.ReactNode | - | 4.7.0 |
+| itemRender | 自定义上传列表项 | (originNode: ReactElement, file: UploadFile, fileList: object\[], actions: { download: function, preview: function, remove: function }) => React.ReactNode | - | 4.16.0 |
 | listType | 上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card` | string | `text` |  |
 | maxCount | 限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件 | number | - | 4.10.0 |
 | method | 上传请求的 http method | string | `post` |  |
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@ -69,7 +69,12 @@ export type UploadListProgressProps = Omit<ProgressProps, 'percent' | 'type'>;
 export type ItemRender<T = any> = (
  originNode: React.ReactElement,
  file: UploadFile,
-  fileList?: Array<UploadFile<T>>,
+  fileList: Array<UploadFile<T>>,
+  actions: {
+    download: () => void;
+    preview: () => void;
+    remove: () => void;
+  },
 ) => React.ReactNode;

 type PreviewFileHandler = (file: File | Blob) => PromiseLike<string>;