mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
feat: add custom isImgurl prop to Upload Component (#23248)
* feat: customize isImageUrl support * docs: Update Upload doc * docs: Add isImgUrl default implement link * docs: update default link address
This commit is contained in:
parent
fca1367085
commit
87da7bfe67
@ -241,6 +241,7 @@ class Upload extends React.Component<UploadProps, UploadState> {
|
||||
disabled,
|
||||
locale: propLocale,
|
||||
iconRender,
|
||||
isImageUrl,
|
||||
} = this.props;
|
||||
const {
|
||||
showRemoveIcon,
|
||||
@ -265,6 +266,7 @@ class Upload extends React.Component<UploadProps, UploadState> {
|
||||
downloadIcon={downloadIcon}
|
||||
iconRender={iconRender}
|
||||
locale={{ ...locale, ...propLocale }}
|
||||
isImageUrl={isImageUrl}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -26,6 +26,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
|
||||
showDownloadIcon: false,
|
||||
showPreviewIcon: true,
|
||||
previewFile: previewImage,
|
||||
isImageUrl,
|
||||
};
|
||||
|
||||
componentDidUpdate() {
|
||||
@ -81,12 +82,12 @@ export default class UploadList extends React.Component<UploadListProps, any> {
|
||||
};
|
||||
|
||||
handleIconRender = (file: UploadFile) => {
|
||||
const { listType, locale, iconRender } = this.props;
|
||||
const { listType, locale, iconRender, isImageUrl: isImgUrl } = this.props;
|
||||
if (iconRender) {
|
||||
return iconRender(file, listType);
|
||||
}
|
||||
const isLoading = file.status === 'uploading';
|
||||
const fileIcon = isImageUrl(file) ? <PictureTwoTone /> : <FileTwoTone />;
|
||||
const fileIcon = isImgUrl && isImgUrl(file) ? <PictureTwoTone /> : <FileTwoTone />;
|
||||
let icon: React.ReactNode = isLoading ? <LoadingOutlined /> : <PaperClipOutlined />;
|
||||
if (listType === 'picture') {
|
||||
icon = isLoading ? <LoadingOutlined /> : fileIcon;
|
||||
@ -128,6 +129,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
|
||||
downloadIcon: customDownloadIcon,
|
||||
locale,
|
||||
progressAttr,
|
||||
isImageUrl: isImgUrl,
|
||||
} = this.props;
|
||||
const prefixCls = getPrefixCls('upload', customizePrefixCls);
|
||||
const list = items.map(file => {
|
||||
@ -142,18 +144,19 @@ export default class UploadList extends React.Component<UploadListProps, any> {
|
||||
});
|
||||
icon = <div className={uploadingClassName}>{iconNode}</div>;
|
||||
} else {
|
||||
const thumbnail = isImageUrl(file) ? (
|
||||
<img
|
||||
src={file.thumbUrl || file.url}
|
||||
alt={file.name}
|
||||
className={`${prefixCls}-list-item-image`}
|
||||
/>
|
||||
) : (
|
||||
iconNode
|
||||
);
|
||||
const thumbnail =
|
||||
isImgUrl && isImgUrl(file) ? (
|
||||
<img
|
||||
src={file.thumbUrl || file.url}
|
||||
alt={file.name}
|
||||
className={`${prefixCls}-list-item-image`}
|
||||
/>
|
||||
) : (
|
||||
iconNode
|
||||
);
|
||||
const aClassName = classNames({
|
||||
[`${prefixCls}-list-item-thumbnail`]: true,
|
||||
[`${prefixCls}-list-item-file`]: !isImageUrl(file),
|
||||
[`${prefixCls}-list-item-file`]: isImgUrl && !isImgUrl(file),
|
||||
});
|
||||
icon = (
|
||||
<a
|
||||
|
@ -738,6 +738,56 @@ describe('Upload List', () => {
|
||||
test('Blob', () => new Blob());
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/22958
|
||||
describe('customize isImageUrl support', () => {
|
||||
const list = [
|
||||
...fileList,
|
||||
{
|
||||
uid: '0',
|
||||
name: 'xxx.png',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
thumbUrl:
|
||||
'http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg@!panda_style?spm=a2c4g.11186623.2.17.4dc56b29BHokyg&file=example.jpg@!panda_style',
|
||||
},
|
||||
];
|
||||
it('should not render <img /> when file.thumbUrl use "!" as separator', () => {
|
||||
const wrapper = mount(
|
||||
<Upload listType="picture-card" fileList={list}>
|
||||
<button type="button">button</button>
|
||||
</Upload>,
|
||||
);
|
||||
const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img');
|
||||
expect(imgNode.length).toBe(2);
|
||||
});
|
||||
it('should render <img /> when custom imageUrl return true', () => {
|
||||
const isImageUrl = jest.fn(() => {
|
||||
return true;
|
||||
});
|
||||
const wrapper = mount(
|
||||
<Upload listType="picture-card" fileList={list} isImageUrl={isImageUrl}>
|
||||
<button type="button">button</button>
|
||||
</Upload>,
|
||||
);
|
||||
const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img');
|
||||
expect(isImageUrl).toHaveBeenCalled();
|
||||
expect(imgNode.length).toBe(3);
|
||||
});
|
||||
it('should not render <img /> when custom imageUrl return false', () => {
|
||||
const isImageUrl = jest.fn(() => {
|
||||
return false;
|
||||
});
|
||||
const wrapper = mount(
|
||||
<Upload listType="picture-card" fileList={list} isImageUrl={isImageUrl}>
|
||||
<button type="button">button</button>
|
||||
</Upload>,
|
||||
);
|
||||
const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img');
|
||||
expect(isImageUrl).toHaveBeenCalled();
|
||||
expect(imgNode.length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
it('should support transformFile', done => {
|
||||
const handleTransformFile = jest.fn();
|
||||
const onChange = ({ file }) => {
|
||||
|
@ -33,6 +33,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
|
||||
| multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false | |
|
||||
| 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 or { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, removeIcon?: React.ReactNode, downloadIcon?: React.ReactNode } | true | |
|
||||
| supportServerRender | Need to be turned on while the server side is rendering | boolean | false | |
|
||||
| withCredentials | ajax upload with cookie sent | boolean | false | |
|
||||
|
@ -34,6 +34,7 @@ title: Upload
|
||||
| multiple | 是否支持多选文件,`ie10+` 支持。开启后按住 ctrl 可选择多个文件 | boolean | false | |
|
||||
| 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 or { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, removeIcon?: React.ReactNode, downloadIcon?: React.ReactNode } | true | |
|
||||
| supportServerRender | 服务端渲染时需要打开这个 | boolean | false | |
|
||||
| withCredentials | 上传请求时是否携带 cookie | boolean | false | |
|
||||
|
@ -105,6 +105,7 @@ export interface UploadProps<T = any> {
|
||||
previewFile?: PreviewFileHandler;
|
||||
transformFile?: TransformFileHandler;
|
||||
iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
|
||||
isImageUrl?: (file: UploadFile) => boolean;
|
||||
}
|
||||
|
||||
export interface UploadState<T = any> {
|
||||
@ -128,4 +129,5 @@ export interface UploadListProps<T = any> {
|
||||
locale: UploadLocale;
|
||||
previewFile?: PreviewFileHandler;
|
||||
iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
|
||||
isImageUrl?: (file: UploadFile) => boolean;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user