mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

feat: add custom isImgurl prop to Upload Component (#23248)

Browse Source 
* feat: customize isImageUrl support

* docs: Update Upload doc

* docs: Add isImgUrl default implement link

* docs: update default link address
This commit is contained in:
nick 2020-04-14 19:32:16 +08:00 committed by GitHub
parent fca1367085
commit 87da7bfe67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 71 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/upload/Upload.tsx
View File

@ -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}
/>
);
};

27
components/upload/UploadList.tsx
View File

@ -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

50
components/upload/__tests__/uploadlist.test.js
View File

@ -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 }) => {

1
components/upload/index.en-US.md
View 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 | |

1
components/upload/index.zh-CN.md
View File

@ -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 | |

2
components/upload/interface.tsx
View File

@ -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;
}