{iconNode}
;
- if (listType === 'picture' || listType === 'picture-card') {
- if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) {
- const uploadingClassName = classNames({
- [`${prefixCls}-list-item-thumbnail`]: true,
- [`${prefixCls}-list-item-file`]: file.status !== 'uploading',
- });
- icon = {iconNode}
;
- } else {
- const thumbnail =
- isImgUrl && isImgUrl(file) ? (
-
- {loadingProgress}
-
- );
- }
- const infoUploadingClass = classNames({
- [`${prefixCls}-list-item`]: true,
- [`${prefixCls}-list-item-${file.status}`]: true,
- [`${prefixCls}-list-item-list-type-${listType}`]: true,
- });
- const linkProps =
- typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
-
- const removeIcon = showRemoveIcon
- ? handleActionIconRender(
- (typeof customRemoveIcon === 'function' ? customRemoveIcon(file) : customRemoveIcon) || (
-
-
- {progress}
-
-
- );
- const listContainerNameClass = classNames({
- [`${prefixCls}-list-picture-card-container`]: listType === 'picture-card',
- });
- const item =
- file.status === 'error' ? (
- {iconAndPreview}
- {actions}
-
- {itemRender ? itemRender(item, file, items) : item}
-
- );
- });
- const listClassNames = classNames({
- [`${prefixCls}-list`]: true,
- [`${prefixCls}-list-${listType}`]: true,
- [`${prefixCls}-list-rtl`]: direction === 'rtl',
- });
- const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
- const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
- return (
- {iconNode}
;
+ if (listType === 'picture' || listType === 'picture-card') {
+ if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) {
+ const uploadingClassName = classNames({
+ [`${prefixCls}-list-item-thumbnail`]: true,
+ [`${prefixCls}-list-item-file`]: file.status !== 'uploading',
+ });
+ icon = {iconNode}
;
+ } else {
+ const thumbnail = isImgUrl?.(file) ? (
+
+
+ {({ className: motionClassName }) => {
+ // show loading icon if upload progress listener is disabled
+ const loadingProgress =
+ 'percent' in file ? (
+
+ ) : null;
+
+ return (
+
+ )}
+
+ );
+ const listContainerNameClass = classNames(`${prefixCls}-list-${listType}-container`, className);
+ const item =
+ file.status === 'error' ? (
+ {iconAndPreview}
+ {actions}
+ {showProgress && (
+
+ {loadingProgress}
+
+ );
+ }}
+
+ {itemRender ? itemRender(item, file, items) : item}
+
+ );
+ },
+);
+
+export default ListItem;
diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx
new file mode 100644
index 0000000000..f639be23d0
--- /dev/null
+++ b/components/upload/UploadList/index.tsx
@@ -0,0 +1,262 @@
+import * as React from 'react';
+import CSSMotion, { CSSMotionList, CSSMotionListProps } from 'rc-motion';
+import classNames from 'classnames';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
+import PictureTwoTone from '@ant-design/icons/PictureTwoTone';
+import FileTwoTone from '@ant-design/icons/FileTwoTone';
+import { cloneElement, isValidElement } from '../../_util/reactNode';
+import { UploadListProps, UploadFile, UploadListType } from '../interface';
+import { previewImage, isImageUrl } from '../utils';
+import collapseMotion from '../../_util/motion';
+import { ConfigContext } from '../../config-provider';
+import Button, { ButtonProps } from '../../button';
+import useForceUpdate from '../../_util/hooks/useForceUpdate';
+import ListItem from './ListItem';
+
+const listItemMotion: Partial
+
+ {({ key, file, className: motionClassName, style: motionStyle }) => {
+ return (
+
+
+ {/* Append action */}
+ {appendAction && (
+
+ {({ className: motionClassName, style: motionStyle }) => {
+ return cloneElement(appendAction, oriProps => ({
+ className: classNames(oriProps.className, motionClassName),
+ style: {
+ ...motionStyle,
+ ...oriProps.style,
+ },
+ }));
+ }}
+
+ )}
+
+ );
+};
+
+const UploadList = React.forwardRef
-
+
- 
-
+ image.png
+
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- image.png
-
-
-
-
-
-
+
-
-
- image.png
-
-
-
-
+ image.png
+
-
-
-
-
-
-
-
-
-
- xxx.png
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- yyy.png
-
-
-
-
-
-
-
-
+
+ xxx.png
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ yyy.png
+
+
+
+
+
+
+
+
+
-
+
+
-
+
-
+
+
-
+
-
+
+
-
+
-
+
-
+
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
- doc.doc
-
-
-
-
+ doc.doc
+
-
+
@@ -1437,7 +1443,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
@@ -1917,424 +1927,404 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
-
+
-
-
+ image.png
+
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- image.png
-
-
-
-
-
-
+
-
-
- image.png
-
-
-
-
+ image.png
+
-
+
-
-
+ image.png
+
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- image.png
-
-
-
-
-
-
+
-
-
- image.png
-
-
-
-
+ image.png
+
-
+
-
-
+ image.png
+
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- image.png
-
-
-
-
-
-
+
-
-
- image.png
-
-
-
-
+ image.png
+
-
+
-
-
+ image.png
+
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- image.png
-
-
-
-
-
-
+
-
-
- image.png
-
-
-
-
+ image.png
+
-
+
-
+
-
+
@@ -2387,7 +2379,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
image.png
@@ -2552,74 +2544,74 @@ Array [
class="ant-upload-list ant-upload-list-picture"
>
-
+
-
-
+
-
-
+
+
+
+ xxx.png
+
+
+
+
-
+
+
+
+ xxx.png
+
+
+
+
-
-
+
diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js
index b9a5516afe..7b066dfa58 100644
--- a/components/upload/__tests__/uploadlist.test.js
+++ b/components/upload/__tests__/uploadlist.test.js
@@ -131,9 +131,20 @@ describe('Upload List', () => {
);
expect(wrapper.find('.ant-upload-list-item').length).toBe(2);
wrapper.find('.ant-upload-list-item').at(0).find('.anticon-delete').simulate('click');
- await sleep(1000);
- wrapper.update();
- expect(wrapper.find('.ant-upload-list-item').hostNodes().length).toBe(1);
+
+ await act(async () => {
+ await sleep(1000);
+ wrapper.update();
+
+ const domNode = wrapper.find('.ant-upload-list-text-container').at(0).hostNodes().instance();
+ const transitionEndEvent = new Event('transitionend');
+ domNode.dispatchEvent(transitionEndEvent);
+ wrapper.update();
+ });
+
+ // console.log(wrapper.html());
+
+ expect(wrapper.find('.ant-upload-list-text-container').hostNodes().length).toBe(1);
});
it('should be uploading when upload a file', done => {
@@ -222,6 +233,10 @@ describe('Upload List', () => {
,
);
+
+ // Has error item className
+ wrapper.find('.ant-upload-list-item-error').simulate('mouseenter');
+
expect(wrapper.find('div.ant-upload-list-item i.anticon-download').length).toBe(0);
});
diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx
index 28464a763f..4debbfbd6a 100755
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@@ -72,6 +72,12 @@ export type UploadType = 'drag' | 'select';
export type UploadListType = 'text' | 'picture' | 'picture-card';
export type UploadListProgressProps = Omit;
+export type ItemRender = (
+ originNode: React.ReactElement,
+ file: UploadFile,
+ fileList?: Array>,
+) => React.ReactNode;
+
type PreviewFileHandler = (file: File | Blob) => PromiseLike;
type TransformFileHandler = (
file: RcFile,
@@ -111,11 +117,7 @@ export interface UploadProps {
iconRender?: (file: UploadFile, listType?: UploadListType) => React.ReactNode;
isImageUrl?: (file: UploadFile) => boolean;
progress?: UploadListProgressProps;
- itemRender?: (
- originNode: React.ReactElement,
- file: UploadFile,
- fileList?: Array>,
- ) => React.ReactNode;
+ itemRender?: ItemRender;
}
export interface UploadState {
@@ -141,9 +143,5 @@ export interface UploadListProps {
iconRender?: (file: UploadFile, listType?: UploadListType) => React.ReactNode;
isImageUrl?: (file: UploadFile) => boolean;
appendAction?: React.ReactNode;
- itemRender?: (
- originNode: React.ReactElement,
- file: UploadFile,
- fileList?: Array>,
- ) => React.ReactNode;
+ itemRender?: ItemRender;
}
diff --git a/components/upload/style/index.less b/components/upload/style/index.less
index b18613e1b5..b511edb0c0 100644
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@@ -142,16 +142,8 @@
.reset-component;
.clearfix;
line-height: @line-height-base;
- &-item-list-type-text {
- &:hover {
- .@{upload-prefix-cls}-list-item-name-icon-count-1 {
- padding-right: 14px;
- }
- .@{upload-prefix-cls}-list-item-name-icon-count-2 {
- padding-right: 28px;
- }
- }
- }
+
+ // ============================ Item ============================
&-item {
position: relative;
height: @line-height-base * @font-size-base;
@@ -167,10 +159,6 @@
text-overflow: ellipsis;
}
- &-name-icon-count-1 {
- padding-right: 14px;
- }
-
&-card-actions {
position: absolute;
right: 0;
@@ -200,7 +188,7 @@
&-info {
height: 100%;
- padding: 0 12px 0 4px;
+ padding: 0 4px;
transition: background-color 0.3s;
> span {
@@ -273,6 +261,7 @@
}
}
+ // =================== Picture & Picture Card ===================
&-picture,
&-picture-card {
.@{upload-item} {
@@ -304,9 +293,6 @@
}
.@{upload-item}-thumbnail {
- position: absolute;
- top: 8px;
- left: 8px;
width: 48px;
height: 48px;
line-height: 54px;
@@ -370,14 +356,6 @@
transition: all 0.3s;
}
- .@{upload-item}-name-icon-count-1 {
- padding-right: 18px;
- }
-
- .@{upload-item}-name-icon-count-2 {
- padding-right: 36px;
- }
-
.@{upload-item}-uploading .@{upload-item}-name {
line-height: 28px;
}
@@ -398,11 +376,8 @@
}
}
+ // ======================== Picture Card ========================
&-picture-card {
- &.@{upload-prefix-cls}-list::after {
- display: none;
- }
-
&-container {
display: inline-block;
width: @upload-picture-card-size;
@@ -411,6 +386,10 @@
vertical-align: top;
}
+ &.@{upload-prefix-cls}-list::after {
+ display: none;
+ }
+
.@{upload-item} {
height: 100%;
margin: 0;
@@ -492,6 +471,12 @@
display: block;
}
+ // .@{upload-item}-thumbnail {
+ // position: absolute;
+ // top: 8px;
+ // left: 8px;
+ // }
+
.@{upload-item}-uploading {
&.@{upload-item} {
background-color: @background-color-light;
@@ -515,27 +500,77 @@
}
}
- .@{upload-prefix-cls}-success-icon {
- color: @success-color;
- font-weight: bold;
+ // ======================= Picture & Text =======================
+ &-text,
+ &-picture {
+ &-container {
+ transition: opacity @animation-duration-slow, height @animation-duration-slow;
+
+ &::before {
+ display: table;
+ width: 0;
+ height: 0;
+ content: '';
+ }
+
+ // Don't know why span here, just stretch it
+ .@{upload-prefix-cls}-span {
+ display: block;
+ flex: auto;
+ }
+ }
+
+ // text & picture no need this additional element.
+ // But it used for picture-card, let's keep it.
+ .@{upload-prefix-cls}-span {
+ display: flex;
+ align-items: center;
+
+ > * {
+ flex: none;
+ }
+ }
+
+ .@{upload-item}-name {
+ flex: auto;
+ padding: 0 @padding-xs;
+ }
+
+ .@{upload-item}-card-actions {
+ position: static;
+ }
}
- .@{upload-prefix-cls}-animate-enter,
- .@{upload-prefix-cls}-animate-leave,
+ // ============================ Text ============================
+ &-text {
+ .@{upload-prefix-cls}-text-icon {
+ .@{iconfont-css-prefix} {
+ position: static;
+ }
+ }
+ }
+
+ // =========================== Motion ===========================
+ // .@{upload-prefix-cls}-animate-appear,
+ // .@{upload-prefix-cls}-animate-enter,
+ // .@{upload-prefix-cls}-animate-leave,
+ .@{upload-prefix-cls}-animate-inline-appear,
.@{upload-prefix-cls}-animate-inline-enter,
.@{upload-prefix-cls}-animate-inline-leave {
- animation-duration: 0.3s;
+ animation-duration: @animation-duration-slow;
animation-fill-mode: @ease-in-out-circ;
}
- .@{upload-prefix-cls}-animate-enter {
- animation-name: uploadAnimateIn;
- }
+ // .@{upload-prefix-cls}-animate-appear,
+ // .@{upload-prefix-cls}-animate-enter {
+ // animation-name: uploadAnimateIn;
+ // }
- .@{upload-prefix-cls}-animate-leave {
- animation-name: uploadAnimateOut;
- }
+ // .@{upload-prefix-cls}-animate-leave {
+ // animation-name: uploadAnimateOut;
+ // }
+ .@{upload-prefix-cls}-animate-inline-appear,
.@{upload-prefix-cls}-animate-inline-enter {
animation-name: uploadAnimateInlineIn;
}
@@ -545,23 +580,23 @@
}
}
-@keyframes uploadAnimateIn {
- from {
- height: 0;
- margin: 0;
- padding: 0;
- opacity: 0;
- }
-}
+// @keyframes uploadAnimateIn {
+// from {
+// height: 0;
+// margin: 0;
+// padding: 0;
+// opacity: 0;
+// }
+// }
-@keyframes uploadAnimateOut {
- to {
- height: 0;
- margin: 0;
- padding: 0;
- opacity: 0;
- }
-}
+// @keyframes uploadAnimateOut {
+// to {
+// height: 0;
+// margin: 0;
+// padding: 0;
+// opacity: 0;
+// }
+// }
@keyframes uploadAnimateInlineIn {
from {
diff --git a/package.json b/package.json
index 65bd4e931c..49db69450a 100644
--- a/package.json
+++ b/package.json
@@ -129,7 +129,7 @@
"rc-input-number": "~6.1.0",
"rc-mentions": "~1.5.0",
"rc-menu": "~8.10.0",
- "rc-motion": "^2.2.0",
+ "rc-motion": "^2.4.0",
"rc-notification": "~4.5.2",
"rc-pagination": "~3.1.0",
"rc-picker": "~2.4.1",
@@ -235,7 +235,7 @@
"open": "^7.0.3",
"preact": "^10.0.0",
"preact-compat": "^3.18.5",
- "prettier": "^2.0.1",
+ "prettier": "^2.2.0",
"pretty-quick": "^3.0.0",
"querystring": "^0.2.0",
"rc-footer": "^0.6.3",
@@ -271,7 +271,7 @@
"reqwest": "^2.0.5",
"rimraf": "^3.0.0",
"scrollama": "^2.0.0",
- "simple-git": "^2.0.0",
+ "simple-git": "^2.23.0",
"string-replace-loader": "^2.3.0",
"stylelint": "^13.0.0",
"stylelint-config-prettier": "^8.0.0",
@@ -2669,7 +2663,7 @@ Array [
yyy.png
@@ -2761,74 +2755,74 @@ Array [
class="ant-upload-list ant-upload-list-picture"
>
-
+
-
-
+
-
-
+
+
+
+ xxx.png
+
+
+
+
-
+
+
+
+ xxx.png
+
+
+
+
-
-
+
+
+
@@ -1475,98 +1434,95 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
class="ant-upload-list ant-upload-list-picture"
>
@@ -2878,7 +2874,7 @@ Array [
yyy.png
@@ -3076,189 +3072,17 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
class="ant-upload-list ant-upload-list-text"
>
-
-
-
-
-
-
-
-
-
- xxx.png
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- yyy.png
-
-
-
-
-
-
-
-
-
+
+ xxx.png
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ yyy.png
+
+
+
+
+
+
+
+
+
@@ -1321,127 +1283,124 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
class="ant-upload-list ant-upload-list-picture"
>
+
@@ -409,30 +374,74 @@ exports[`Upload List should non-image format file preview 1`] = `
class="ant-upload-list ant-upload-list-picture"
>
@@ -1167,127 +1132,124 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
class="ant-upload-list ant-upload-list-picture"
>
-
+
-
-
+
-
-
+
+
+
+
+
+ not-image
+
+
+
-
+
-
-
+
-
-
+
-
-
+
+
+
+
+
+ not-image
+
+
+
-
+
-
+
+
-
-
+
-
-
- 
-
-
- image
-
+
-
+
+
-
-
- image
-
+
-
+ 
+ 
+ 
+ 
+
-
+