mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 19:19:26 +08:00
feat: upload add icon (#20034)
* feat: add custom icon * chore: test * fix: eye style * fix: anticon style * fix: stylelint * Update Form.tsx * Update Form.tsx * feat: 26 * feat: fiie-type * Update basic.md * Update debug.md * Update target.md * Update Steps.tsx * Update element.md * chore: clearn up * chore: clearn up * chore: clearn up * fix: handleIconRender * fix: iconNode
This commit is contained in:
叶枫
二货机器人
parent
2fb26363a6
commit
6c3d6e7247
@ -18514,26 +18514,30 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
|
||||
class="config-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
<div
|
||||
class="config-upload-text-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="config-upload-list-item-name config-upload-list-item-name-icon-count-2"
|
||||
title="xxx.png"
|
||||
@ -18639,26 +18643,30 @@ exports[`ConfigProvider components Upload normal 1`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
|
||||
title="xxx.png"
|
||||
@ -18764,26 +18772,30 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
|
||||
title="xxx.png"
|
||||
|
||||
@ -234,6 +234,7 @@ class Upload extends React.Component<UploadProps, UploadState> {
|
||||
previewFile,
|
||||
disabled,
|
||||
locale: propLocale,
|
||||
iconRender,
|
||||
} = this.props;
|
||||
const { showRemoveIcon, showPreviewIcon, showDownloadIcon } = showUploadList as any;
|
||||
const { fileList } = this.state;
|
||||
@ -248,6 +249,7 @@ class Upload extends React.Component<UploadProps, UploadState> {
|
||||
showRemoveIcon={!disabled && showRemoveIcon}
|
||||
showPreviewIcon={showPreviewIcon}
|
||||
showDownloadIcon={showDownloadIcon}
|
||||
iconRender={iconRender}
|
||||
locale={{ ...locale, ...propLocale }}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -82,6 +82,22 @@ export default class UploadList extends React.Component<UploadListProps, any> {
|
||||
}
|
||||
};
|
||||
|
||||
handleIconRender = (file: UploadFile) => {
|
||||
const { listType, locale, iconRender } = this.props;
|
||||
if (iconRender) {
|
||||
return iconRender(file, listType);
|
||||
}
|
||||
const isLoading = file.status === 'uploading';
|
||||
const fileIcon = isImageUrl(file) ? <PictureTwoTone /> : <FileTwoTone />;
|
||||
let icon: React.ReactNode = isLoading ? <LoadingOutlined /> : <PaperClipOutlined />;
|
||||
if (listType === 'picture') {
|
||||
icon = isLoading ? <LoadingOutlined /> : fileIcon;
|
||||
} else if (listType === 'picture-card') {
|
||||
icon = isLoading ? locale.uploading : fileIcon;
|
||||
}
|
||||
return icon;
|
||||
};
|
||||
|
||||
renderUploadList = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
@ -96,13 +112,15 @@ export default class UploadList extends React.Component<UploadListProps, any> {
|
||||
const prefixCls = getPrefixCls('upload', customizePrefixCls);
|
||||
const list = items.map(file => {
|
||||
let progress;
|
||||
let icon = file.status === 'uploading' ? <LoadingOutlined /> : <PaperClipOutlined />;
|
||||
|
||||
const iconNode = this.handleIconRender(file);
|
||||
let icon = <div className={`${prefixCls}-text-icon`}>{iconNode}</div>;
|
||||
if (listType === 'picture' || listType === 'picture-card') {
|
||||
if (listType === 'picture-card' && file.status === 'uploading') {
|
||||
icon = <div className={`${prefixCls}-list-item-uploading-text`}>{locale.uploading}</div>;
|
||||
} else if (!file.thumbUrl && !file.url) {
|
||||
icon = <PictureTwoTone className={`${prefixCls}-list-item-thumbnail`} />;
|
||||
if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) {
|
||||
const uploadingClassName = classNames({
|
||||
[`${prefixCls}-list-item-thumbnail`]: true,
|
||||
[`${prefixCls}-list-item-file`]: file.status !== 'uploading',
|
||||
});
|
||||
icon = <div className={uploadingClassName}>{iconNode}</div>;
|
||||
} else {
|
||||
const thumbnail = isImageUrl(file) ? (
|
||||
<img
|
||||
@ -111,11 +129,15 @@ export default class UploadList extends React.Component<UploadListProps, any> {
|
||||
className={`${prefixCls}-list-item-image`}
|
||||
/>
|
||||
) : (
|
||||
<FileTwoTone className={`${prefixCls}-list-item-icon`} />
|
||||
iconNode
|
||||
);
|
||||
const aClassName = classNames({
|
||||
[`${prefixCls}-list-item-thumbnail`]: true,
|
||||
[`${prefixCls}-list-item-file`]: !isImageUrl(file),
|
||||
});
|
||||
icon = (
|
||||
<a
|
||||
className={`${prefixCls}-list-item-thumbnail`}
|
||||
className={aClassName}
|
||||
onClick={e => this.handlePreview(file, e)}
|
||||
href={file.url || file.thumbUrl}
|
||||
target="_blank"
|
||||
|
||||
@ -167,26 +167,30 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
|
||||
href="http://www.baidu.com/xxx.png"
|
||||
@ -268,26 +272,30 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
|
||||
href="http://www.baidu.com/yyy.png"
|
||||
@ -368,26 +376,30 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
|
||||
href="http://www.baidu.com/zzz.png"
|
||||
@ -614,26 +626,30 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
|
||||
href="http://www.baidu.com/xxx.png"
|
||||
@ -1176,43 +1192,47 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="picture"
|
||||
class="anticon anticon-picture ant-upload-list-item-thumbnail"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="picture"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="picture"
|
||||
class="anticon anticon-picture"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
||||
fill="#1890ff"
|
||||
/>
|
||||
<path
|
||||
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
||||
fill="#1890ff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="picture"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
||||
fill="#1890ff"
|
||||
/>
|
||||
<path
|
||||
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
||||
fill="#1890ff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
|
||||
title="image.png"
|
||||
@ -1481,43 +1501,47 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="picture"
|
||||
class="anticon anticon-picture ant-upload-list-item-thumbnail"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="picture"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="picture"
|
||||
class="anticon anticon-picture"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
||||
fill="#1890ff"
|
||||
/>
|
||||
<path
|
||||
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
||||
fill="#1890ff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="picture"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
||||
fill="#1890ff"
|
||||
/>
|
||||
<path
|
||||
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
||||
fill="#1890ff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
|
||||
title="yyy.png"
|
||||
@ -1714,43 +1738,47 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="picture"
|
||||
class="anticon anticon-picture ant-upload-list-item-thumbnail"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="picture"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="picture"
|
||||
class="anticon anticon-picture"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
||||
fill="#1890ff"
|
||||
/>
|
||||
<path
|
||||
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
||||
fill="#1890ff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="picture"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
||||
fill="#1890ff"
|
||||
/>
|
||||
<path
|
||||
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
|
||||
fill="#e6f7ff"
|
||||
/>
|
||||
<path
|
||||
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
||||
fill="#1890ff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
|
||||
title="yyy.png"
|
||||
|
||||
@ -37,26 +37,30 @@ exports[`Upload List handle error 1`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
|
||||
title="foo.png"
|
||||
@ -139,26 +143,30 @@ exports[`Upload List should be uploading when upload a file 1`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
|
||||
title="foo.png"
|
||||
@ -264,26 +272,30 @@ exports[`Upload List should be uploading when upload a file 2`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-upload-text-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="paper-clip"
|
||||
class="anticon anticon-paper-clip"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="paper-clip"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
|
||||
title="foo.png"
|
||||
@ -416,14 +428,14 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
>
|
||||
<span>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
href="https://cdn.xxx.com/aaa.zip"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<span
|
||||
aria-label="file"
|
||||
class="anticon anticon-file ant-upload-list-item-icon"
|
||||
class="anticon anticon-file"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -622,14 +634,14 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
>
|
||||
<span>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
href="https://cdn.xxx.com/aaa.xx"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<span
|
||||
aria-label="file"
|
||||
class="anticon anticon-file ant-upload-list-item-icon"
|
||||
class="anticon anticon-file"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -735,14 +747,14 @@ exports[`Upload List should non-image format file preview 1`] = `
|
||||
>
|
||||
<span>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
href="https://cdn.xxx.com/aaa.png/xx.xx"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<span
|
||||
aria-label="file"
|
||||
class="anticon anticon-file ant-upload-list-item-icon"
|
||||
class="anticon anticon-file"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -1436,18 +1448,30 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
|
||||
class="ant-upload-list-item-info"
|
||||
>
|
||||
<span>
|
||||
<a
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://cdn.xxx.com/aaa"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="image"
|
||||
class="ant-upload-list-item-image"
|
||||
src="https://cdn.xxx.com/aaa"
|
||||
/>
|
||||
</a>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-0"
|
||||
href="https://cdn.xxx.com/aaa"
|
||||
|
||||
@ -565,7 +565,7 @@ describe('Upload List', () => {
|
||||
const wrapper = mount(
|
||||
<UploadList listType="picture-card" items={items} locale={{ previewFile: '' }} />,
|
||||
);
|
||||
expect(wrapper.find('.anticon.ant-upload-list-item-thumbnail').length).toBe(1);
|
||||
expect(wrapper.find('.ant-upload-list-item-thumbnail').length).toBe(1);
|
||||
});
|
||||
|
||||
it('extname should work correctly when url exists', () => {
|
||||
@ -588,8 +588,8 @@ describe('Upload List', () => {
|
||||
const wrapper = mount(
|
||||
<UploadList listType="picture-card" items={items} locale={{ uploading: 'uploading' }} />,
|
||||
);
|
||||
expect(wrapper.find('.ant-upload-list-item-uploading-text').length).toBe(1);
|
||||
expect(wrapper.find('.ant-upload-list-item-uploading-text').text()).toBe('uploading');
|
||||
expect(wrapper.find('.ant-upload-list-item-thumbnail').length).toBe(1);
|
||||
expect(wrapper.find('.ant-upload-list-item-thumbnail').text()).toBe('uploading');
|
||||
});
|
||||
|
||||
it('onPreview should be called, when url exists', () => {
|
||||
|
||||
156
components/upload/demo/file-type.md
Normal file
156
components/upload/demo/file-type.md
Normal file
@ -0,0 +1,156 @@
|
||||
---
|
||||
order: 12
|
||||
debug: true
|
||||
title:
|
||||
zh-CN: 自定义显示 icon
|
||||
en-US: custom show icon
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
根据类型默认显示对应 icon
|
||||
|
||||
## en-US
|
||||
|
||||
Displays the corresponding by default by type icon
|
||||
|
||||
```jsx
|
||||
import { Upload, Modal } from 'antd';
|
||||
import {
|
||||
LoadingOutlined,
|
||||
PaperClipOutlined,
|
||||
PictureTwoTone,
|
||||
FilePdfTwoTone,
|
||||
FileWordTwoTone,
|
||||
FileExcelTwoTone,
|
||||
PlusOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
function getBase64(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = error => reject(error);
|
||||
});
|
||||
}
|
||||
|
||||
class PicturesWall extends React.Component {
|
||||
state = {
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
fileList: [
|
||||
{
|
||||
uid: '-2',
|
||||
name: 'pdf.pdf',
|
||||
status: 'done',
|
||||
url: 'http://cdn07.foxitsoftware.cn/pub/foxit/cpdf/FoxitCompanyProfile.pdf',
|
||||
},
|
||||
{
|
||||
uid: '-3',
|
||||
name: 'doc.doc',
|
||||
status: 'done',
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.doc',
|
||||
},
|
||||
{
|
||||
uid: '-4',
|
||||
name: 'image.png',
|
||||
status: 'error',
|
||||
},
|
||||
{
|
||||
uid: '-5',
|
||||
name: 'pdf.pdf',
|
||||
status: 'error',
|
||||
},
|
||||
{
|
||||
uid: '-6',
|
||||
name: 'doc.doc',
|
||||
status: 'error',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
handleCancel = () => this.setState({ previewVisible: false });
|
||||
|
||||
handlePreview = async file => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
previewImage: file.url || file.preview,
|
||||
previewVisible: true,
|
||||
});
|
||||
};
|
||||
|
||||
handleChange = ({ fileList }) => this.setState({ fileList });
|
||||
|
||||
handleIconRender = (file, listType) => {
|
||||
const fileSufIconList = [
|
||||
{ type: <FilePdfTwoTone />, suf: ['.pdf'] },
|
||||
{ type: <FileExcelTwoTone />, suf: ['.xlsx', '.xls', '.csv'] },
|
||||
{ type: <FileWordTwoTone />, suf: ['.doc', '.docx'] },
|
||||
{
|
||||
type: <PictureTwoTone />,
|
||||
suf: ['.webp', '.svg', '.png', '.gif', '.jpg', '.jpeg', '.jfif', '.bmp', '.dpg'],
|
||||
},
|
||||
];
|
||||
// console.log(1, file, listType);
|
||||
let icon = file.status === 'uploading' ? <LoadingOutlined /> : <PaperClipOutlined />;
|
||||
if (listType === 'picture' || listType === 'picture-card') {
|
||||
if (listType === 'picture-card' && file.status === 'uploading') {
|
||||
icon = <LoadingOutlined />; // or icon = 'uploading...';
|
||||
} else {
|
||||
fileSufIconList.forEach(item => {
|
||||
if (item.suf.includes(file.name.substr(file.name.lastIndexOf('.')))) {
|
||||
icon = item.type;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return icon;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { previewVisible, previewImage, fileList } = this.state;
|
||||
const uploadButton = (
|
||||
<div>
|
||||
<PlusOutlined />
|
||||
<div className="ant-upload-text">Upload</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="clearfix">
|
||||
<Upload
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
listType="picture-card"
|
||||
fileList={fileList}
|
||||
onPreview={this.handlePreview}
|
||||
onChange={this.handleChange}
|
||||
iconRender={this.handleIconRender}
|
||||
>
|
||||
{fileList.length >= 8 ? null : uploadButton}
|
||||
</Upload>
|
||||
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
||||
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<PicturesWall />, mountNode);
|
||||
```
|
||||
|
||||
```css
|
||||
/* you can make up upload button and sample style by using stylesheets */
|
||||
.ant-upload-select-picture-card i {
|
||||
color: #999;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
```
|
||||
@ -111,8 +111,8 @@ ReactDOM.render(<PicturesWall />, mountNode);
|
||||
```css
|
||||
/* you can make up upload button and sample style by using stylesheets */
|
||||
.ant-upload-select-picture-card i {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
|
||||
@ -42,6 +42,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 | - | |
|
||||
|
||||
### onChange
|
||||
|
||||
|
||||
@ -43,6 +43,7 @@ title: Upload
|
||||
| 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 | 无 | |
|
||||
|
||||
### onChange
|
||||
|
||||
|
||||
@ -104,6 +104,7 @@ export interface UploadProps {
|
||||
id?: string;
|
||||
previewFile?: PreviewFileHandler;
|
||||
transformFile?: TransformFileHandler;
|
||||
iconRender?: (file: UploadFile, listType?: UploadListType) => React.ReactNode;
|
||||
}
|
||||
|
||||
export interface UploadState {
|
||||
@ -124,4 +125,5 @@ export interface UploadListProps {
|
||||
showPreviewIcon?: boolean;
|
||||
locale: UploadLocale;
|
||||
previewFile?: PreviewFileHandler;
|
||||
iconRender?: (file: UploadFile, listType?: UploadListType) => React.ReactNode;
|
||||
}
|
||||
|
||||
@ -211,7 +211,7 @@
|
||||
line-height: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.anticon {
|
||||
.@{iconfont-css-prefix} {
|
||||
padding-right: 5px;
|
||||
color: @upload-actions-color;
|
||||
|
||||
@ -238,11 +238,13 @@
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-loading,
|
||||
.@{iconfont-css-prefix}-paper-clip {
|
||||
position: absolute;
|
||||
top: @font-size-base / 2 - 2px;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
.@{upload-prefix-cls}-text-icon {
|
||||
.@{iconfont-css-prefix} {
|
||||
position: absolute;
|
||||
top: @font-size-base / 2 - 2px;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -281,13 +283,13 @@
|
||||
}
|
||||
|
||||
&-error,
|
||||
&-error .@{iconfont-css-prefix}-paper-clip,
|
||||
&-error .@{upload-prefix-cls}-text-icon > .@{iconfont-css-prefix},
|
||||
&-error &-name {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
&-error &-card-actions {
|
||||
.anticon {
|
||||
.@{iconfont-css-prefix} {
|
||||
padding-right: 5px;
|
||||
color: @error-color;
|
||||
|
||||
@ -348,11 +350,14 @@
|
||||
left: 8px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 26px;
|
||||
line-height: 54px;
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 8px;
|
||||
left: auto;
|
||||
@ -366,6 +371,10 @@
|
||||
font-size: 26px;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
@ -511,7 +520,7 @@
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-eye-o,
|
||||
.@{iconfont-css-prefix}-eye,
|
||||
.@{iconfont-css-prefix}-download,
|
||||
.@{iconfont-css-prefix}-delete {
|
||||
z-index: 10;
|
||||
@ -549,7 +558,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.anticon-picture + .@{upload-item}-name {
|
||||
.@{upload-item}-file + .@{upload-item}-name {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
display: block;
|
||||
@ -568,16 +577,11 @@
|
||||
.@{upload-item}-info {
|
||||
height: auto;
|
||||
&::before,
|
||||
.@{iconfont-css-prefix}-eye-o,
|
||||
.@{iconfont-css-prefix}-eye,
|
||||
.@{iconfont-css-prefix}-delete {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
margin-top: 18px;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-progress {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user