diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index 5ceeba228f..8badc57949 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -37627,15 +37627,16 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
-
-
+
@@ -37730,15 +37731,16 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
-
-
+
@@ -37833,15 +37835,16 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
-
-
+
@@ -37936,15 +37939,16 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
-
-
+
@@ -38039,15 +38043,16 @@ exports[`ConfigProvider components Upload normal 1`] = `
-
-
+
@@ -38142,15 +38147,16 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
-
-
+
diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx
index 2727a8613e..9a186fe019 100644
--- a/components/upload/UploadList.tsx
+++ b/components/upload/UploadList.tsx
@@ -9,12 +9,13 @@ import EyeOutlined from '@ant-design/icons/EyeOutlined';
import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
import DownloadOutlined from '@ant-design/icons/DownloadOutlined';
+import { cloneElement, isValidElement } from '../_util/reactNode';
import { UploadListProps, UploadFile, UploadListType } from './interface';
import { previewImage, isImageUrl } from './utils';
import Tooltip from '../tooltip';
import Progress from '../progress';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import { cloneElement, isValidElement } from '../_util/reactNode';
+import Button, { ButtonProps } from '../button';
export default class UploadList extends React.Component {
static defaultProps = {
@@ -98,23 +99,36 @@ export default class UploadList extends React.Component {
return icon;
};
- handleActionIconRender = (customIcon: React.ReactNode, callback: () => void, title?: string) => {
+ handleActionIconRender = (
+ customIcon: React.ReactNode,
+ callback: () => void,
+ prefixCls: string,
+ title?: string,
+ ) => {
+ const btnProps: ButtonProps = {
+ type: 'text',
+ size: 'small',
+ title,
+ onClick: (e: React.MouseEvent) => {
+ callback();
+ if (isValidElement(customIcon) && customIcon.props.onClick) {
+ customIcon.props.onClick(e);
+ }
+ },
+ className: `${prefixCls}-list-item-card-actions-btn`,
+ };
if (isValidElement(customIcon)) {
- return cloneElement(customIcon, {
+ const btnIcon = cloneElement(customIcon, {
...customIcon.props,
- title,
- onClick: (e: React.MouseEvent) => {
- callback();
- if (customIcon.props.onClick) {
- customIcon.props.onClick(e);
- }
- },
+ onClick: () => {},
});
+
+ return ;
}
return (
-
- {customIcon}
-
+
);
};
@@ -195,28 +209,21 @@ export default class UploadList extends React.Component {
typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
const removeIcon = showRemoveIcon
- ? (customRemoveIcon &&
- this.handleActionIconRender(
- customRemoveIcon,
- () => this.handleClose(file),
- locale.removeFile,
- )) || (
- this.handleClose(file)} />
+ ? this.handleActionIconRender(
+ customRemoveIcon || ,
+ () => this.handleClose(file),
+ prefixCls,
+ locale.removeFile,
)
: null;
const downloadIcon =
showDownloadIcon && file.status === 'done'
- ? (customDownloadIcon &&
- this.handleActionIconRender(
- customDownloadIcon,
- () => this.handleDownload(file),
- locale.downloadFile,
- )) || (
- this.handleDownload(file)}
- />
+ ? this.handleActionIconRender(
+ customDownloadIcon || ,
+ () => this.handleDownload(file),
+ prefixCls,
+ locale.downloadFile,
)
: null;
const downloadOrDelete = listType !== 'picture-card' && (
@@ -226,8 +233,8 @@ export default class UploadList extends React.Component {
listType === 'picture' ? 'picture' : ''
}`}
>
- {downloadIcon && {downloadIcon}}
- {removeIcon && {removeIcon}}
+ {downloadIcon}
+ {removeIcon}
);
const listItemNameClass = classNames({
diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap
index 162f5cfb3a..b58962a698 100644
--- a/components/upload/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/upload/__tests__/__snapshots__/demo.test.js.snap
@@ -177,28 +177,33 @@ exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
-
-
-
+
+
+
@@ -373,15 +378,16 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
-
-
+
@@ -452,15 +458,16 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
-
-
+
@@ -530,15 +537,16 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
-
-
+
@@ -788,28 +796,33 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
-
-
-
+
+
+
@@ -902,28 +915,33 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
-
-
-
+
+
+
@@ -1017,28 +1035,33 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
-
-
-
+
+
+
@@ -1131,28 +1154,33 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
-
-
-
+
+
+
@@ -1237,28 +1265,33 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
-
-
-
+
+
+
@@ -1411,15 +1444,16 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
-
-
+
@@ -1521,28 +1555,33 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
-
-
-
+
+
+
@@ -1611,28 +1650,33 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
-
-
-
+
+
+
@@ -1701,28 +1745,33 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
-
-
-
+
+
+
@@ -1791,28 +1840,33 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
-
-
-
+
+
+
@@ -1906,28 +1960,33 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
-
-
-
+
+
+
@@ -2068,15 +2127,16 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
-
-
+
@@ -2160,15 +2220,16 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
-
-
+
@@ -2279,15 +2340,16 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
-
-
+
@@ -2371,15 +2433,16 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
-
-
+
@@ -2614,24 +2677,25 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
-
-
+
download
-
-
+
+
@@ -2702,24 +2766,25 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
-
-
+
download
-
-
+
+
@@ -2789,15 +2854,16 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
-
-
+
diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
index 870e2796eb..f7c4ee02bd 100644
--- a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
+++ b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
@@ -70,15 +70,16 @@ exports[`Upload List handle error 1`] = `
-
-
+
@@ -176,15 +177,16 @@ exports[`Upload List should be uploading when upload a file 1`] = `
-
-
+
@@ -303,15 +305,16 @@ exports[`Upload List should be uploading when upload a file 2`] = `
-
-
+
@@ -441,15 +444,16 @@ exports[`Upload List should non-image format file preview 1`] = `
-
-
+
@@ -508,15 +512,16 @@ exports[`Upload List should non-image format file preview 1`] = `
-
-
+
@@ -595,15 +600,16 @@ exports[`Upload List should non-image format file preview 1`] = `
-
-
+
@@ -682,15 +688,16 @@ exports[`Upload List should non-image format file preview 1`] = `
-
-
+
@@ -749,15 +756,16 @@ exports[`Upload List should non-image format file preview 1`] = `
-
-
+
@@ -816,15 +824,16 @@ exports[`Upload List should non-image format file preview 1`] = `
-
-
+
@@ -883,15 +892,16 @@ exports[`Upload List should non-image format file preview 1`] = `
-
-
+
@@ -950,15 +960,16 @@ exports[`Upload List should non-image format file preview 1`] = `
-
-
+
@@ -1017,15 +1028,16 @@ exports[`Upload List should non-image format file preview 1`] = `
-
-
+
@@ -1084,15 +1096,16 @@ exports[`Upload List should non-image format file preview 1`] = `
-
-
+
@@ -1194,15 +1207,15 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
-
-
+
RM
-
+
@@ -1247,24 +1260,24 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
-
-
+
DL
-
-
+
+
diff --git a/components/upload/style/index.less b/components/upload/style/index.less
index fbde12889f..c090fe4682 100644
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@@ -119,6 +119,7 @@
color: @text-color-secondary;
font-size: @font-size-base;
}
+
.@{iconfont-css-prefix}-plus {
color: @disabled-color;
font-size: 30px;
@@ -176,15 +177,26 @@
&-card-actions {
position: absolute;
right: 0;
- opacity: 0;
+
+ &-btn {
+ opacity: 0;
+ }
+ &-btn.@{ant-prefix}-btn-sm {
+ height: 20px;
+ line-height: 1;
+ }
&.picture {
- top: 25px;
- line-height: 1;
+ top: 22px;
+ line-height: 0;
+ }
+
+ &-btn:focus,
+ &.picture &-btn {
opacity: 1;
}
+
.@{iconfont-css-prefix} {
- padding-right: 6px;
color: @upload-actions-color;
}
}
@@ -236,7 +248,7 @@
opacity: 1;
}
- &:hover &-card-actions {
+ &:hover &-card-actions-btn {
opacity: 1;
}
@@ -250,7 +262,9 @@
.@{iconfont-css-prefix} {
color: @error-color;
}
- opacity: 1;
+ &-btn {
+ opacity: 1;
+ }
}
&-progress {
@@ -271,9 +285,11 @@
padding: @padding-xs;
border: @border-width-base @upload-picture-card-border-style @border-color-base;
border-radius: @border-radius-base;
+
&:hover {
background: transparent;
}
+
&-error {
border-color: @error-color;
}
@@ -313,6 +329,7 @@
&[fill='#e6f7ff'] {
fill: color(~`colorPalette('@{error-color}', 1) `);
}
+
&[fill='#1890ff'] {
fill: @error-color;
}
@@ -389,12 +406,14 @@
&.@{upload-prefix-cls}-list::after {
display: none;
}
+
&-container {
float: left;
width: @upload-picture-card-size;
height: @upload-picture-card-size;
margin: 0 @margin-xs @margin-xs 0;
}
+
.@{upload-item} {
float: left;
width: @upload-picture-card-size;
@@ -443,6 +462,7 @@
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
+
&:hover {
color: @text-color-inverse;
}
@@ -484,6 +504,7 @@
.@{upload-item}-info {
height: auto;
+
&::before,
.@{iconfont-css-prefix}-eye,
.@{iconfont-css-prefix}-delete {
diff --git a/components/upload/style/index.tsx b/components/upload/style/index.tsx
index b8fd70a86a..582def0ccd 100644
--- a/components/upload/style/index.tsx
+++ b/components/upload/style/index.tsx
@@ -2,5 +2,6 @@ import '../../style/index.less';
import './index.less';
// style dependencies
+import '../../button/style';
import '../../progress/style';
import '../../tooltip/style';