From 3f4eb4b9d1ee94663125eab54a5e363dd411423a Mon Sep 17 00:00:00 2001 From: Guo Yunhe Date: Wed, 7 Aug 2024 11:42:33 +0800 Subject: [PATCH] feat(upload): showUploadList options showPreviewIcon, showDownloadIcon and showRemoveIcon support function (#50245) --- components/upload/Upload.tsx | 2 +- components/upload/UploadList/ListItem.tsx | 18 +- .../__snapshots__/uploadlist.test.tsx.snap | 199 ++++++++++++++++++ .../upload/__tests__/uploadlist.test.tsx | 47 +++++ components/upload/index.en-US.md | 2 +- components/upload/index.zh-CN.md | 2 +- components/upload/interface.ts | 12 +- 7 files changed, 267 insertions(+), 15 deletions(-) diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index 9780cbfc17..c095ba2634 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -391,7 +391,7 @@ const InternalUpload: React.ForwardRefRenderFunction = ( // use showRemoveIcon if it is specified explicitly const realShowRemoveIcon = - typeof showRemoveIcon === 'undefined' ? !mergedDisabled : !!showRemoveIcon; + typeof showRemoveIcon === 'undefined' ? !mergedDisabled : showRemoveIcon; const renderUploadList = (button?: React.ReactNode, buttonVisible?: boolean) => { if (!showUploadList) { diff --git a/components/upload/UploadList/ListItem.tsx b/components/upload/UploadList/ListItem.tsx index 7ca2ef7d47..359f1d080d 100644 --- a/components/upload/UploadList/ListItem.tsx +++ b/components/upload/UploadList/ListItem.tsx @@ -25,9 +25,9 @@ export interface ListItemProps { items: UploadFile[]; listType?: UploadListType; isImgUrl?: (file: UploadFile) => boolean; - showRemoveIcon?: boolean; - showDownloadIcon?: boolean; - showPreviewIcon?: boolean; + showRemoveIcon?: boolean | ((file: UploadFile) => boolean); + showDownloadIcon?: boolean | ((file: UploadFile) => boolean); + showPreviewIcon?: boolean | ((file: UploadFile) => boolean); removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode); downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode); previewIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode); @@ -138,7 +138,11 @@ const ListItem = React.forwardRef( const linkProps = typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps; - const removeIcon = showRemoveIcon + const removeIcon = ( + typeof showRemoveIcon === 'function' + ? showRemoveIcon(file) + : showRemoveIcon + ) ? actionIconRender( (typeof customRemoveIcon === 'function' ? customRemoveIcon(file) : customRemoveIcon) || ( @@ -153,7 +157,8 @@ const ListItem = React.forwardRef( : null; const downloadIcon = - showDownloadIcon && mergedStatus === 'done' + (typeof showDownloadIcon === 'function' ? showDownloadIcon(file) : showDownloadIcon) && + mergedStatus === 'done' ? actionIconRender( (typeof customDownloadIcon === 'function' ? customDownloadIcon(file) @@ -208,7 +213,8 @@ const ListItem = React.forwardRef( ); const previewIcon = - showPreviewIcon && (file.url || file.thumbUrl) ? ( + (typeof showPreviewIcon === 'function' ? showPreviewIcon(file) : showPreviewIcon) && + (file.url || file.thumbUrl) ? ( `; + +exports[`Upload List should support showXxxIcon functions 1`] = ` + +
+ + + + +
+
+
+
+
+ + + +
+ + image + + + + +
+
+
+
+
+ + + +
+ + image + + +
+
+
+
+
+ + + +
+ + image + + + + + +
+
+
+ +`; diff --git a/components/upload/__tests__/uploadlist.test.tsx b/components/upload/__tests__/uploadlist.test.tsx index 78083475e6..24de32898f 100644 --- a/components/upload/__tests__/uploadlist.test.tsx +++ b/components/upload/__tests__/uploadlist.test.tsx @@ -685,6 +685,53 @@ describe('Upload List', () => { unmount(); }); + it('should support showXxxIcon functions', () => { + const list = [ + { + name: 'image', + status: 'uploading', + uid: '-4', + url: 'https://cdn.xxx.com/aaa', + response: { + protected: true, + }, + }, + { + name: 'image', + status: 'done', + uid: '-5', + url: 'https://cdn.xxx.com/aaa', + }, + { + name: 'image', + status: 'done', + uid: '-5', + url: 'https://cdn.xxx.com/aaa', + response: { + protected: true, + }, + }, + ]; + + const { container: wrapper, unmount } = render( + file.response?.protected, + showDownloadIcon: (file) => file.response?.protected, + showPreviewIcon: (file) => file.response?.protected, + removeIcon: RM, + downloadIcon: DL, + previewIcon: PV, + }} + > + + , + ); + expect(wrapper.firstChild).toMatchSnapshot(); + unmount(); + }); + it('should support removeIcon and downloadIcon', () => { const list = [ { diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index ca6d1cb2a2..a6a6d49ebc 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -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<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 `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 | +| showUploadList | Whether to show default upload list, could be an object to specify `extra`, `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually | boolean \| { extra?: ReactNode \| (file: UploadFile) => ReactNode, showPreviewIcon?: boolean \| (file: UploadFile) => boolean, showDownloadIcon?: boolean \| (file: UploadFile) => boolean, showRemoveIcon?: boolean \| (file: UploadFile) => boolean, previewIcon?: ReactNode \| (file: UploadFile) => ReactNode, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | `extra`: 5.20.0, `showPreviewIcon` function: 5.21.0, `showRemoveIcon` function: 5.21.0, `showDownloadIcon` function: 5.21.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 | diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index c4bd9c5ba0..cba975a0d9 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -71,7 +71,7 @@ demo: | openFileDialogOnClick | 点击打开文件对话框 | boolean | true | | | previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | - | | | progress | 自定义进度条样式 | [ProgressProps](/components/progress-cn#api)（仅支持 `type="line"`） | { strokeWidth: 2, showInfo: false } | 4.3.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 | +| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `extra`(5.20.0+), `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { extra?: ReactNode \| (file: UploadFile) => ReactNode, showPreviewIcon?: boolean \| (file: UploadFile) => boolean, showDownloadIcon?: boolean \| (file: UploadFile) => boolean, showRemoveIcon?: boolean \| (file: UploadFile) => boolean, previewIcon?: ReactNode \| (file: UploadFile) => ReactNode, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | `extra`: 5.20.0, `showPreviewIcon` function: 5.21.0, `showRemoveIcon` function: 5.21.0, `showDownloadIcon` function: 5.21.0 | | withCredentials | 上传请求时是否携带 cookie | boolean | false | | | onChange | 上传文件改变时的回调，上传每个阶段都会触发该事件。详见 [onChange](#onchange) | function | - | | | onDrop | 当文件被拖入上传区域时执行的回调功能 | (event: React.DragEvent) => void | - | 4.16.0 | diff --git a/components/upload/interface.ts b/components/upload/interface.ts index 17e0ae6768..06a40ef379 100755 --- a/components/upload/interface.ts +++ b/components/upload/interface.ts @@ -51,9 +51,9 @@ export interface UploadChangeParam { export interface ShowUploadListInterface { extra?: React.ReactNode | ((file: UploadFile) => React.ReactNode); - showRemoveIcon?: boolean; - showPreviewIcon?: boolean; - showDownloadIcon?: boolean; + showRemoveIcon?: boolean | ((file: UploadFile) => boolean); + showPreviewIcon?: boolean | ((file: UploadFile) => boolean); + showDownloadIcon?: boolean | ((file: UploadFile) => boolean); removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode); downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode); previewIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode); @@ -150,9 +150,9 @@ export interface UploadListProps { progress?: UploadListProgressProps; prefixCls?: string; className?: string; - showRemoveIcon?: boolean; - showDownloadIcon?: boolean; - showPreviewIcon?: boolean; + showRemoveIcon?: boolean | ((file: UploadFile) => boolean); + showDownloadIcon?: boolean | ((file: UploadFile) => boolean); + showPreviewIcon?: boolean | ((file: UploadFile) => boolean); removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode); downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode); previewIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);