mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
Feat: Support callbacks for removeIcon and downloadIcon in Upload (#26684)
* updated to support callback function * fixing compilation errors * feat: add support for per-file callbacks in Upload removeIcon and downloadIcon * Update components/upload/index.en-US.md Added version Co-authored-by: Tom Xu <ycxzhkx@gmail.com> * docs: Changed `React.ReactNode` to `ReactNode` * docs: Added version in CN documentation Co-authored-by: Tom Xu <ycxzhkx@gmail.com>
This commit is contained in:
Michael Waddell
GitHub
parent
1faabb219d
commit
add02767f0
@ -210,7 +210,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
|
||||
|
||||
const removeIcon = showRemoveIcon
|
||||
? handleActionIconRender(
|
||||
customRemoveIcon || <DeleteOutlined />,
|
||||
(typeof customRemoveIcon === 'function' ? customRemoveIcon(file) : customRemoveIcon) || <DeleteOutlined />,
|
||||
() => handleClose(file),
|
||||
prefixCls,
|
||||
locale.removeFile,
|
||||
@ -220,7 +220,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
|
||||
const downloadIcon =
|
||||
showDownloadIcon && file.status === 'done'
|
||||
? handleActionIconRender(
|
||||
customDownloadIcon || <DownloadOutlined />,
|
||||
(typeof customDownloadIcon=== 'function' ? customDownloadIcon(file) : customDownloadIcon) || <DownloadOutlined />,
|
||||
() => handleDownload(file),
|
||||
prefixCls,
|
||||
locale.downloadFile,
|
||||
|
||||
@ -533,7 +533,7 @@ describe('Upload List', () => {
|
||||
showUploadList={{
|
||||
showRemoveIcon: true,
|
||||
showDownloadIcon: true,
|
||||
removeIcon: <i>RM</i>,
|
||||
removeIcon: () => <i>RM</i>,
|
||||
downloadIcon: <i>DL</i>,
|
||||
}}
|
||||
>
|
||||
|
||||
@ -35,7 +35,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
|
||||
| name | The name of uploading file | string | `file` | |
|
||||
| previewFile | Customize preview file logic | (file: File \| Blob) => Promise<dataURL: string> | - | |
|
||||
| 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) | |
|
||||
| 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, removeIcon?: React.ReactNode, downloadIcon?: React.ReactNode } | true | |
|
||||
| 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, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
|
||||
| withCredentials | The ajax upload with cookie sent | boolean | false | |
|
||||
| openFileDialogOnClick | Click open file dialog | boolean | true | |
|
||||
| onChange | A callback function, can be executed when uploading state is changing, see [onChange](#onChange) | function | - | |
|
||||
@ -43,7 +43,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
|
||||
| onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is false or a Promise which resolve(false) or reject | function(file): boolean \| Promise | - | |
|
||||
| onDownload | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB | function(file): void | (Jump to new TAB) | |
|
||||
| transformFile | Customize transform file before request | Function(file): string \| Blob \| File \| Promise<string \| Blob \| File> | - | |
|
||||
| iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => React.ReactNode | - | |
|
||||
| iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |
|
||||
| progress | Custom progress bar | [ProgressProps](/components/progress/#API) (support `type="line"` only) | { strokeWidth: 2, showInfo: false } | 4.3.0 |
|
||||
|
||||
### onChange
|
||||
|
||||
@ -36,7 +36,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
|
||||
| name | 发到后台的文件参数名 | string | `file` | |
|
||||
| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | - | |
|
||||
| isImageUrl | 自定义缩略图是否使用 <img /> 标签进行显示 | (file: UploadFile) => boolean | [(内部实现)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) | |
|
||||
| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, removeIcon?: React.ReactNode, downloadIcon?: React.ReactNode } | true | |
|
||||
| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
|
||||
| withCredentials | 上传请求时是否携带 cookie | boolean | false | |
|
||||
| openFileDialogOnClick | 点击打开文件对话框 | boolean | true | |
|
||||
| onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | function | - | |
|
||||
@ -44,7 +44,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
|
||||
| onRemove | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除 | function(file): boolean \| Promise | - | |
|
||||
| onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页 | function(file): void | (跳转新标签页) | |
|
||||
| transformFile | 在上传之前转换文件。支持返回一个 Promise 对象 | function(file): string \| Blob \| File \| Promise<string \| Blob \| File> | - | |
|
||||
| iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => React.ReactNode | - | |
|
||||
| iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |
|
||||
| progress | 自定义进度条样式 | [ProgressProps](/components/progress/#API)（仅支持 `type="line"`） | { strokeWidth: 2, showInfo: false } | 4.3.0 |
|
||||
|
||||
### onChange
|
||||
|
||||
@ -56,8 +56,8 @@ export interface ShowUploadListInterface {
|
||||
showRemoveIcon?: boolean;
|
||||
showPreviewIcon?: boolean;
|
||||
showDownloadIcon?: boolean;
|
||||
removeIcon?: React.ReactNode;
|
||||
downloadIcon?: React.ReactNode;
|
||||
removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
|
||||
downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
|
||||
}
|
||||
|
||||
export interface UploadLocale {
|
||||
@ -129,8 +129,8 @@ export interface UploadListProps<T = any> {
|
||||
showRemoveIcon?: boolean;
|
||||
showDownloadIcon?: boolean;
|
||||
showPreviewIcon?: boolean;
|
||||
removeIcon?: React.ReactNode;
|
||||
downloadIcon?: React.ReactNode;
|
||||
removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
|
||||
downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
|
||||
locale: UploadLocale;
|
||||
previewFile?: PreviewFileHandler;
|
||||
iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user