From 3ee634ba4c16264e10a52b974d805a79b46fda01 Mon Sep 17 00:00:00 2001 From: Kermit Date: Thu, 6 May 2021 14:12:26 +0800 Subject: [PATCH] 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 --- components/upload/UploadList/ListItem.tsx | 8 +++- components/upload/UploadList/index.tsx | 4 +- .../__snapshots__/uploadlist.test.js.snap | 46 ++++++++++++++++--- components/upload/__tests__/type.test.tsx | 19 +++++++- .../upload/__tests__/uploadlist.test.js | 46 ++++++++++++++++--- components/upload/index.en-US.md | 2 +- components/upload/index.zh-CN.md | 2 +- components/upload/interface.tsx | 7 ++- 8 files changed, 114 insertions(+), 20 deletions(-) diff --git a/components/upload/UploadList/ListItem.tsx b/components/upload/UploadList/ListItem.tsx index b61b5fc47a..03b564f907 100644 --- a/components/upload/UploadList/ListItem.tsx +++ b/components/upload/UploadList/ListItem.tsx @@ -272,7 +272,13 @@ const ListItem = React.forwardRef( return (
- {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}
); }, diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx index 73d7fbfc23..d05ed2a6c5 100644 --- a/components/upload/UploadList/index.tsx +++ b/components/upload/UploadList/index.tsx @@ -80,11 +80,11 @@ const InternalUploadList: React.ForwardRefRenderFunction) => { + const onInternalPreview = (file: UploadFile, e?: React.SyntheticEvent) => { if (!onPreview) { return; } - e.preventDefault(); + e?.preventDefault(); return onPreview(file); }; diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap index 60d50daf13..407303977e 100644 --- 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`] = `
- - uid:-1 name: xxx.png status: removed url: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png 1/2 - + + uid:-1 name: xxx.png status: removed url: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png 1/2 + + + remove + + + download + + + preview + +
- - uid:-2 name: yyy.png status: removed url: https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png 2/2 - + + uid:-2 name: yyy.png status: removed url: https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png 2/2 + + + remove + + + download + + + preview + +
`; diff --git a/components/upload/__tests__/type.test.tsx b/components/upload/__tests__/type.test.tsx index 6195db9d04..f4b987309c 100644 --- a/components/upload/__tests__/type.test.tsx +++ b/components/upload/__tests__/type.test.tsx @@ -100,7 +100,24 @@ describe('Upload.typescript', () => { }, ]; const upload = ( - + + ) + expect(upload).toBeTruthy(); + }); + it('itemRender', () => { + const upload = ( + ( +
+ {node} + {file.name} + {list.length} + remove + download + preview +
+ )} + > click to upload ); diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js index 201e97903c..68fbab36ce 100644 --- 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 ( - - {`uid:${uid} name: ${name} status: ${status} url: ${url} ${index + 1}/${ - currFileList.length - }`} - +
+ + {`uid:${uid} name: ${name} status: ${status} url: ${url} ${index + 1}/${ + currFileList.length + }`} + + + remove + + + download + + + preview + +
); }; - const wrapper = mount(); + const wrapper = mount( + , + ); 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(); }); diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index 04822782aa..dc11e7422b 100644 --- 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 <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` | | diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 6aa0fc71fe..7a47c48e62 100644 --- 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 | 自定义缩略图是否使用 <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` | | diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx index 43e61b165c..2aa11ae9e8 100755 --- a/components/upload/interface.tsx +++ b/components/upload/interface.tsx @@ -69,7 +69,12 @@ export type UploadListProgressProps = Omit; export type ItemRender = ( originNode: React.ReactElement, file: UploadFile, - fileList?: Array>, + fileList: Array>, + actions: { + download: () => void; + preview: () => void; + remove: () => void; + }, ) => React.ReactNode; type PreviewFileHandler = (file: File | Blob) => PromiseLike;