refactor: UploadList use rc-motion instead of rc-animate (#27923)

* chore: Update rc-motion version

* refactor: Move item into single file

* refactor: Use CSSMotion of progress bar

* chore: part style it

* chore: slit style of pic card

* chore: RM count-x

* support appendAction back

* chore: Style smooth

* fix progress makes shaking

* docs: clean up demo

* test: Update snapshot

* test: fix test case

* fix: lint

* test: Update snapshot

* test: coverage

* clean up

components/_util/reactNode.ts

@@ -13,7 +13,10 @@ export function replaceElement(
 ): React.ReactNode {
   if (!isValidElement(element)) return replacement;
 
-  return React.cloneElement(element, typeof props === 'function' ? props(element.props) : props);
+  return React.cloneElement(
+    element,
+    typeof props === 'function' ? props(element.props || {}) : props,
+  );
 }
 
 export function cloneElement(element: React.ReactNode, props?: RenderProps): React.ReactElement {

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -37674,16 +37674,17 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
     class="config-upload-list config-upload-list-text"
   >
     <div
-      class=""
+      class="config-upload-list-text-container"
     >
-      <span>
       <div
         class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
       >
         <div
           class="config-upload-list-item-info"
         >
-            <span>
+          <span
+            class="config-upload-span"
+          >
             <div
               class="config-upload-text-icon"
             >
@@ -37708,13 +37709,13 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
               </span>
             </div>
             <span
-                class="config-upload-list-item-name config-upload-list-item-name-icon-count-1"
+              class="config-upload-list-item-name"
               title="xxx.png"
             >
               xxx.png
             </span>
             <span
-                class="config-upload-list-item-card-actions "
+              class="config-upload-list-item-card-actions"
             >
               <button
                 class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
@@ -37746,7 +37747,6 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
   </div>
 </span>
@@ -37776,16 +37776,17 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
     class="config-upload-list config-upload-list-text"
   >
     <div
-      class=""
+      class="config-upload-list-text-container"
     >
-      <span>
       <div
         class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
       >
         <div
           class="config-upload-list-item-info"
         >
-            <span>
+          <span
+            class="config-upload-span"
+          >
             <div
               class="config-upload-text-icon"
             >
@@ -37810,13 +37811,13 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
               </span>
             </div>
             <span
-                class="config-upload-list-item-name config-upload-list-item-name-icon-count-1"
+              class="config-upload-list-item-name"
               title="xxx.png"
             >
               xxx.png
             </span>
             <span
-                class="config-upload-list-item-card-actions "
+              class="config-upload-list-item-card-actions"
             >
               <button
                 class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
@@ -37848,7 +37849,6 @@ exports[`ConfigProvider components Upload configProvider componentSize large 1`]
           </span>
         </div>
       </div>
-      </span>
     </div>
   </div>
 </span>
@@ -37878,16 +37878,17 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
     class="config-upload-list config-upload-list-text"
   >
     <div
-      class=""
+      class="config-upload-list-text-container"
     >
-      <span>
       <div
         class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
       >
         <div
           class="config-upload-list-item-info"
         >
-            <span>
+          <span
+            class="config-upload-span"
+          >
             <div
               class="config-upload-text-icon"
             >
@@ -37912,13 +37913,13 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
               </span>
             </div>
             <span
-                class="config-upload-list-item-name config-upload-list-item-name-icon-count-1"
+              class="config-upload-list-item-name"
               title="xxx.png"
             >
               xxx.png
             </span>
             <span
-                class="config-upload-list-item-card-actions "
+              class="config-upload-list-item-card-actions"
             >
               <button
                 class="config-btn config-btn-text config-btn-sm config-btn-icon-only config-upload-list-item-card-actions-btn"
@@ -37950,7 +37951,6 @@ exports[`ConfigProvider components Upload configProvider componentSize middle 1`
           </span>
         </div>
       </div>
-      </span>
     </div>
   </div>
 </span>
@@ -37980,16 +37980,17 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -38014,13 +38015,13 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
               </span>
             </div>
             <span
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               title="xxx.png"
             >
               xxx.png
             </span>
             <span
-                class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -38052,7 +38053,6 @@ exports[`ConfigProvider components Upload configProvider virtual and dropdownMat
           </span>
         </div>
       </div>
-      </span>
     </div>
   </div>
 </span>
@@ -38082,16 +38082,17 @@ exports[`ConfigProvider components Upload normal 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -38116,13 +38117,13 @@ exports[`ConfigProvider components Upload normal 1`] = `
               </span>
             </div>
             <span
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               title="xxx.png"
             >
               xxx.png
             </span>
             <span
-                class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -38154,7 +38155,6 @@ exports[`ConfigProvider components Upload normal 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
   </div>
 </span>
@@ -38184,16 +38184,17 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -38218,13 +38219,13 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
               </span>
             </div>
             <span
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               title="xxx.png"
             >
               xxx.png
             </span>
             <span
-                class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -38256,7 +38257,6 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
   </div>
 </span>

components/style/themes/default.less

@@ -860,7 +860,7 @@
 
 // Skeleton
 // ---
-@skeleton-color: rgba(190, 190, 190, .2);
+@skeleton-color: rgba(190, 190, 190, 0.2);
 @skeleton-to-color: shade(@skeleton-color, 5%);
 @skeleton-paragraph-margin-top: 28px;
 @skeleton-paragraph-li-margin-top: @margin-md;

components/upload/UploadList.tsx

@@ -1,373 +0,0 @@
-import * as React from 'react';
-import Animate from 'rc-animate';
-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 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 { ConfigContext } from '../config-provider';
-import Button, { ButtonProps } from '../button';
-import useForceUpdate from '../_util/hooks/useForceUpdate';
-
-const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProps> = (
-  {
-    listType,
-    previewFile,
-    onPreview,
-    onDownload,
-    onRemove,
-    locale,
-    iconRender,
-    isImageUrl: isImgUrl,
-    prefixCls: customizePrefixCls,
-    items = [],
-    showPreviewIcon,
-    showRemoveIcon,
-    showDownloadIcon,
-    removeIcon: customRemoveIcon,
-    downloadIcon: customDownloadIcon,
-    progress: progressProps,
-    appendAction,
-    itemRender,
-  },
-  ref,
-) => {
-  const forceUpdate = useForceUpdate();
-
-  React.useEffect(() => {
-    if (listType !== 'picture' && listType !== 'picture-card') {
-      return;
-    }
-    (items || []).forEach(file => {
-      if (
-        typeof document === 'undefined' ||
-        typeof window === 'undefined' ||
-        !(window as any).FileReader ||
-        !(window as any).File ||
-        !(file.originFileObj instanceof File || file.originFileObj instanceof Blob) ||
-        file.thumbUrl !== undefined
-      ) {
-        return;
-      }
-      file.thumbUrl = '';
-      if (previewFile) {
-        previewFile(file.originFileObj as File).then((previewDataUrl: string) => {
-          // Need append '' to avoid dead loop
-          file.thumbUrl = previewDataUrl || '';
-          forceUpdate();
-        });
-      }
-    });
-  }, [listType, items, previewFile]);
-
-  const handlePreview = (file: UploadFile, e: React.SyntheticEvent<HTMLElement>) => {
-    if (!onPreview) {
-      return;
-    }
-    e.preventDefault();
-    return onPreview(file);
-  };
-
-  const handleDownload = (file: UploadFile) => {
-    if (typeof onDownload === 'function') {
-      onDownload(file);
-    } else if (file.url) {
-      window.open(file.url);
-    }
-  };
-
-  const handleClose = (file: UploadFile) => {
-    if (onRemove) {
-      onRemove(file);
-    }
-  };
-
-  const handleIconRender = (file: UploadFile) => {
-    if (iconRender) {
-      return iconRender(file, listType);
-    }
-    const isLoading = file.status === 'uploading';
-    const fileIcon = isImgUrl && isImgUrl(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;
-  };
-
-  const handleActionIconRender = (
-    customIcon: React.ReactNode,
-    callback: () => void,
-    prefixCls: string,
-    title?: string,
-  ) => {
-    const btnProps: ButtonProps = {
-      type: 'text',
-      size: 'small',
-      title,
-      onClick: (e: React.MouseEvent<HTMLElement>) => {
-        callback();
-        if (isValidElement(customIcon) && customIcon.props.onClick) {
-          customIcon.props.onClick(e);
-        }
-      },
-      className: `${prefixCls}-list-item-card-actions-btn`,
-    };
-    if (isValidElement(customIcon)) {
-      const btnIcon = cloneElement(customIcon, {
-        ...customIcon.props,
-        onClick: () => {},
-      });
-
-      return <Button {...btnProps} icon={btnIcon} />;
-    }
-    return (
-      <Button {...btnProps}>
-        <span>{customIcon}</span>
-      </Button>
-    );
-  };
-
-  // Test needs
-  React.useImperativeHandle(ref, () => ({
-    handlePreview,
-    handleDownload,
-  }));
-
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
-
-  const prefixCls = getPrefixCls('upload', customizePrefixCls);
-  const list = items.map(file => {
-    let progress;
-    const iconNode = handleIconRender(file);
-    let icon = <div className={`${prefixCls}-text-icon`}>{iconNode}</div>;
-    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 = <div className={uploadingClassName}>{iconNode}</div>;
-      } else {
-        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`]: isImgUrl && !isImgUrl(file),
-        });
-        icon = (
-          <a
-            className={aClassName}
-            onClick={e => handlePreview(file, e)}
-            href={file.url || file.thumbUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {thumbnail}
-          </a>
-        );
-      }
-    }
-
-    if (file.status === 'uploading') {
-      // show loading icon if upload progress listener is disabled
-      const loadingProgress =
-        'percent' in file ? (
-          <Progress {...progressProps} type="line" percent={file.percent} />
-        ) : null;
-
-      progress = (
-        <div className={`${prefixCls}-list-item-progress`} key="progress">
-          {loadingProgress}
-        </div>
-      );
-    }
-    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) || (
-            <DeleteOutlined />
-          ),
-          () => handleClose(file),
-          prefixCls,
-          locale.removeFile,
-        )
-      : null;
-
-    const downloadIcon =
-      showDownloadIcon && file.status === 'done'
-        ? handleActionIconRender(
-            (typeof customDownloadIcon === 'function'
-              ? customDownloadIcon(file)
-              : customDownloadIcon) || <DownloadOutlined />,
-            () => handleDownload(file),
-            prefixCls,
-            locale.downloadFile,
-          )
-        : null;
-    const downloadOrDelete = listType !== 'picture-card' && (
-      <span
-        key="download-delete"
-        className={`${prefixCls}-list-item-card-actions ${listType === 'picture' ? 'picture' : ''}`}
-      >
-        {downloadIcon}
-        {removeIcon}
-      </span>
-    );
-    const listItemNameClass = classNames({
-      [`${prefixCls}-list-item-name`]: true,
-      [`${prefixCls}-list-item-name-icon-count-${
-        [downloadIcon, removeIcon].filter(x => x).length
-      }`]: true,
-    });
-    const preview = file.url
-      ? [
-          <a
-            key="view"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={listItemNameClass}
-            title={file.name}
-            {...linkProps}
-            href={file.url}
-            onClick={e => handlePreview(file, e)}
-          >
-            {file.name}
-          </a>,
-          downloadOrDelete,
-        ]
-      : [
-          <span
-            key="view"
-            className={listItemNameClass}
-            onClick={e => handlePreview(file, e)}
-            title={file.name}
-          >
-            {file.name}
-          </span>,
-          downloadOrDelete,
-        ];
-    const style: React.CSSProperties = {
-      pointerEvents: 'none',
-      opacity: 0.5,
-    };
-    const previewIcon = showPreviewIcon ? (
-      <a
-        href={file.url || file.thumbUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        style={file.url || file.thumbUrl ? undefined : style}
-        onClick={e => handlePreview(file, e)}
-        title={locale.previewFile}
-      >
-        <EyeOutlined />
-      </a>
-    ) : null;
-
-    const actions = listType === 'picture-card' && file.status !== 'uploading' && (
-      <span className={`${prefixCls}-list-item-actions`}>
-        {previewIcon}
-        {file.status === 'done' && downloadIcon}
-        {removeIcon}
-      </span>
-    );
-
-    let message;
-    if (file.response && typeof file.response === 'string') {
-      message = file.response;
-    } else {
-      message = (file.error && file.error.statusText) || locale.uploadError;
-    }
-    const iconAndPreview = (
-      <span>
-        {icon}
-        {preview}
-      </span>
-    );
-    const dom = (
-      <div className={infoUploadingClass}>
-        <div className={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
-        {actions}
-        <Animate transitionName="fade" component="">
-          {progress}
-        </Animate>
-      </div>
-    );
-    const listContainerNameClass = classNames({
-      [`${prefixCls}-list-picture-card-container`]: listType === 'picture-card',
-    });
-    const item =
-      file.status === 'error' ? (
-        <Tooltip title={message} getPopupContainer={node => node.parentNode as HTMLElement}>
-          {dom}
-        </Tooltip>
-      ) : (
-        <span>{dom}</span>
-      );
-    return (
-      <div key={file.uid} className={listContainerNameClass}>
-        {itemRender ? itemRender(item, file, items) : item}
-      </div>
-    );
-  });
-  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 (
-    <Animate transitionName={transitionName} component="div" className={listClassNames}>
-      {list}
-      {React.isValidElement(appendAction)
-        ? React.cloneElement(appendAction, { key: 'appendAction' })
-        : appendAction}
-    </Animate>
-  );
-};
-
-const UploadList = React.forwardRef<unknown, UploadListProps>(InternalUploadList);
-
-UploadList.displayName = 'UploadList';
-
-UploadList.defaultProps = {
-  listType: 'text' as UploadListType, // or picture
-  progress: {
-    strokeWidth: 2,
-    showInfo: false,
-  },
-  showRemoveIcon: true,
-  showDownloadIcon: false,
-  showPreviewIcon: true,
-  previewFile: previewImage,
-  isImageUrl,
-};
-
-export default UploadList;

components/upload/UploadList/ListItem.tsx

@@ -0,0 +1,273 @@
+import * as React from 'react';
+import CSSMotion from 'rc-motion';
+import classNames from 'classnames';
+import EyeOutlined from '@ant-design/icons/EyeOutlined';
+import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
+import DownloadOutlined from '@ant-design/icons/DownloadOutlined';
+import Tooltip from '../../tooltip';
+import Progress from '../../progress';
+import {
+  ItemRender,
+  UploadFile,
+  UploadListProgressProps,
+  UploadListType,
+  UploadLocale,
+} from '../interface';
+
+export interface ListItemProps {
+  prefixCls: string;
+  className?: string;
+  style?: React.CSSProperties;
+  locale: UploadLocale;
+  file: UploadFile;
+  items: UploadFile[];
+  listType?: UploadListType;
+  isImgUrl?: (file: UploadFile) => boolean;
+  showRemoveIcon?: boolean;
+  showDownloadIcon?: boolean;
+  showPreviewIcon?: boolean;
+  removeIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+  downloadIcon?: React.ReactNode | ((file: UploadFile) => React.ReactNode);
+  iconRender: (file: UploadFile) => React.ReactNode;
+  actionIconRender: (
+    customIcon: React.ReactNode,
+    callback: () => void,
+    prefixCls: string,
+    title?: string | undefined,
+  ) => React.ReactNode;
+  itemRender?: ItemRender;
+  onPreview: (file: UploadFile, e: React.SyntheticEvent<HTMLElement>) => void;
+  onClose: (file: UploadFile) => void;
+  onDownload: (file: UploadFile) => void;
+  progress?: UploadListProgressProps;
+}
+
+const ListItem = React.forwardRef(
+  (
+    {
+      prefixCls,
+      className,
+      style,
+      locale,
+      listType,
+      file,
+      items,
+      progress: progressProps,
+      iconRender,
+      actionIconRender,
+      itemRender,
+      isImgUrl,
+      showPreviewIcon,
+      showRemoveIcon,
+      showDownloadIcon,
+      removeIcon: customRemoveIcon,
+      downloadIcon: customDownloadIcon,
+      onPreview,
+      onDownload,
+      onClose,
+    }: ListItemProps,
+    ref: React.Ref<HTMLDivElement>,
+  ) => {
+    // Delay to show the progress bar
+    const [showProgress, setShowProgress] = React.useState(false);
+    const progressRafRef = React.useRef<any>();
+    React.useEffect(() => {
+      progressRafRef.current = setTimeout(() => {
+        setShowProgress(true);
+      }, 300);
+
+      return () => {
+        window.clearTimeout(progressRafRef.current);
+      };
+    }, []);
+
+    // This is used for legacy span make scrollHeight the wrong value.
+    // We will force these to be `display: block` with non `picture-card`
+    const spanClassName = `${prefixCls}-span`;
+
+    const iconNode = iconRender(file);
+    let icon = <div className={`${prefixCls}-text-icon`}>{iconNode}</div>;
+    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 = <div className={uploadingClassName}>{iconNode}</div>;
+      } else {
+        const thumbnail = 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`]: isImgUrl && !isImgUrl(file),
+        });
+        icon = (
+          <a
+            className={aClassName}
+            onClick={e => onPreview(file, e)}
+            href={file.url || file.thumbUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {thumbnail}
+          </a>
+        );
+      }
+    }
+
+    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
+      ? actionIconRender(
+          (typeof customRemoveIcon === 'function' ? customRemoveIcon(file) : customRemoveIcon) || (
+            <DeleteOutlined />
+          ),
+          () => onClose(file),
+          prefixCls,
+          locale.removeFile,
+        )
+      : null;
+
+    const downloadIcon =
+      showDownloadIcon && file.status === 'done'
+        ? actionIconRender(
+            (typeof customDownloadIcon === 'function'
+              ? customDownloadIcon(file)
+              : customDownloadIcon) || <DownloadOutlined />,
+            () => onDownload(file),
+            prefixCls,
+            locale.downloadFile,
+          )
+        : null;
+    const downloadOrDelete = listType !== 'picture-card' && (
+      <span
+        key="download-delete"
+        className={classNames(`${prefixCls}-list-item-card-actions`, {
+          picture: listType === 'picture',
+        })}
+      >
+        {downloadIcon}
+        {removeIcon}
+      </span>
+    );
+    const listItemNameClass = classNames(`${prefixCls}-list-item-name`);
+    const preview = file.url
+      ? [
+          <a
+            key="view"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={listItemNameClass}
+            title={file.name}
+            {...linkProps}
+            href={file.url}
+            onClick={e => onPreview(file, e)}
+          >
+            {file.name}
+          </a>,
+          downloadOrDelete,
+        ]
+      : [
+          <span
+            key="view"
+            className={listItemNameClass}
+            onClick={e => onPreview(file, e)}
+            title={file.name}
+          >
+            {file.name}
+          </span>,
+          downloadOrDelete,
+        ];
+    const previewStyle: React.CSSProperties = {
+      pointerEvents: 'none',
+      opacity: 0.5,
+    };
+    const previewIcon = showPreviewIcon ? (
+      <a
+        href={file.url || file.thumbUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={file.url || file.thumbUrl ? undefined : previewStyle}
+        onClick={e => onPreview(file, e)}
+        title={locale.previewFile}
+      >
+        <EyeOutlined />
+      </a>
+    ) : null;
+
+    const actions = listType === 'picture-card' && file.status !== 'uploading' && (
+      <span className={`${prefixCls}-list-item-actions`}>
+        {previewIcon}
+        {file.status === 'done' && downloadIcon}
+        {removeIcon}
+      </span>
+    );
+
+    let message;
+    if (file.response && typeof file.response === 'string') {
+      message = file.response;
+    } else {
+      message = (file.error && file.error.statusText) || locale.uploadError;
+    }
+    const iconAndPreview = (
+      <span className={spanClassName}>
+        {icon}
+        {preview}
+      </span>
+    );
+
+    const dom = (
+      <div className={infoUploadingClass}>
+        <div className={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
+        {actions}
+        {showProgress && (
+          <CSSMotion motionName="fade" visible={file.status === 'uploading'}>
+            {({ className: motionClassName }) => {
+              // show loading icon if upload progress listener is disabled
+              const loadingProgress =
+                'percent' in file ? (
+                  <Progress {...progressProps} type="line" percent={file.percent} />
+                ) : null;
+
+              return (
+                <div className={classNames(`${prefixCls}-list-item-progress`, motionClassName)}>
+                  {loadingProgress}
+                </div>
+              );
+            }}
+          </CSSMotion>
+        )}
+      </div>
+    );
+    const listContainerNameClass = classNames(`${prefixCls}-list-${listType}-container`, className);
+    const item =
+      file.status === 'error' ? (
+        <Tooltip title={message} getPopupContainer={node => node.parentNode as HTMLElement}>
+          {dom}
+        </Tooltip>
+      ) : (
+        dom
+      );
+
+    return (
+      <div className={listContainerNameClass} style={style} ref={ref}>
+        {itemRender ? itemRender(item, file, items) : item}
+      </div>
+    );
+  },
+);
+
+export default ListItem;

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<CSSMotionListProps> = {
+  ...collapseMotion,
+};
+
+delete listItemMotion.onAppearEnd;
+delete listItemMotion.onEnterEnd;
+delete listItemMotion.onLeaveEnd;
+
+const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProps> = (
+  {
+    listType,
+    previewFile,
+    onPreview,
+    onDownload,
+    onRemove,
+    locale,
+    iconRender,
+    isImageUrl: isImgUrl,
+    prefixCls: customizePrefixCls,
+    items = [],
+    showPreviewIcon,
+    showRemoveIcon,
+    showDownloadIcon,
+    removeIcon,
+    downloadIcon,
+    progress,
+    appendAction,
+    itemRender,
+  },
+  ref,
+) => {
+  const forceUpdate = useForceUpdate();
+  const [motionAppear, setMotionAppear] = React.useState(false);
+
+  // ============================= Effect =============================
+  React.useEffect(() => {
+    if (listType !== 'picture' && listType !== 'picture-card') {
+      return;
+    }
+    (items || []).forEach(file => {
+      if (
+        typeof document === 'undefined' ||
+        typeof window === 'undefined' ||
+        !(window as any).FileReader ||
+        !(window as any).File ||
+        !(file.originFileObj instanceof File || file.originFileObj instanceof Blob) ||
+        file.thumbUrl !== undefined
+      ) {
+        return;
+      }
+      file.thumbUrl = '';
+      if (previewFile) {
+        previewFile(file.originFileObj as File).then((previewDataUrl: string) => {
+          // Need append '' to avoid dead loop
+          file.thumbUrl = previewDataUrl || '';
+          forceUpdate();
+        });
+      }
+    });
+  }, [listType, items, previewFile]);
+
+  React.useEffect(() => {
+    setMotionAppear(true);
+  }, []);
+
+  // ============================= Events =============================
+  const onInternalPreview = (file: UploadFile, e: React.SyntheticEvent<HTMLElement>) => {
+    if (!onPreview) {
+      return;
+    }
+    e.preventDefault();
+    return onPreview(file);
+  };
+
+  const onInternalDownload = (file: UploadFile) => {
+    if (typeof onDownload === 'function') {
+      onDownload(file);
+    } else if (file.url) {
+      window.open(file.url);
+    }
+  };
+
+  const onInternalClose = (file: UploadFile) => {
+    if (onRemove) {
+      onRemove(file);
+    }
+  };
+
+  const internalIconRender = (file: UploadFile) => {
+    if (iconRender) {
+      return iconRender(file, listType);
+    }
+    const isLoading = file.status === 'uploading';
+    const fileIcon = isImgUrl && isImgUrl(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;
+  };
+
+  const actionIconRender = (
+    customIcon: React.ReactNode,
+    callback: () => void,
+    prefixCls: string,
+    title?: string,
+  ) => {
+    const btnProps: ButtonProps = {
+      type: 'text',
+      size: 'small',
+      title,
+      onClick: (e: React.MouseEvent<HTMLElement>) => {
+        callback();
+        if (isValidElement(customIcon) && customIcon.props.onClick) {
+          customIcon.props.onClick(e);
+        }
+      },
+      className: `${prefixCls}-list-item-card-actions-btn`,
+    };
+    if (isValidElement(customIcon)) {
+      const btnIcon = cloneElement(customIcon, {
+        ...customIcon.props,
+        onClick: () => {},
+      });
+
+      return <Button {...btnProps} icon={btnIcon} />;
+    }
+    return (
+      <Button {...btnProps}>
+        <span>{customIcon}</span>
+      </Button>
+    );
+  };
+
+  // ============================== Ref ===============================
+  // Test needs
+  React.useImperativeHandle(ref, () => ({
+    handlePreview: onInternalPreview,
+    handleDownload: onInternalDownload,
+  }));
+
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+
+  // ============================= Render =============================
+  const prefixCls = getPrefixCls('upload', customizePrefixCls);
+
+  const listClassNames = classNames({
+    [`${prefixCls}-list`]: true,
+    [`${prefixCls}-list-${listType}`]: true,
+    [`${prefixCls}-list-rtl`]: direction === 'rtl',
+  });
+
+  // >>> Motion config
+  const motionKeyList = [
+    ...items.map(file => ({
+      key: file.uid,
+      file,
+    })),
+  ];
+
+  const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
+  // const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
+
+  let motionConfig: Omit<CSSMotionListProps, 'onVisibleChanged'> = {
+    motionName: `${prefixCls}-${animationDirection}`,
+    keys: motionKeyList,
+    motionAppear,
+  };
+
+  if (listType !== 'picture-card') {
+    motionConfig = {
+      ...listItemMotion,
+      ...motionConfig,
+    };
+  }
+
+  return (
+    <div className={listClassNames}>
+      <CSSMotionList {...motionConfig} component={false}>
+        {({ key, file, className: motionClassName, style: motionStyle }) => {
+          return (
+            <ListItem
+              key={key}
+              locale={locale}
+              prefixCls={prefixCls}
+              className={motionClassName}
+              style={motionStyle}
+              file={file}
+              items={items}
+              progress={progress}
+              listType={listType}
+              isImgUrl={isImgUrl}
+              showPreviewIcon={showPreviewIcon}
+              showRemoveIcon={showRemoveIcon}
+              showDownloadIcon={showDownloadIcon}
+              removeIcon={removeIcon}
+              downloadIcon={downloadIcon}
+              iconRender={internalIconRender}
+              actionIconRender={actionIconRender}
+              itemRender={itemRender}
+              onPreview={onInternalPreview}
+              onDownload={onInternalDownload}
+              onClose={onInternalClose}
+            />
+          );
+        }}
+      </CSSMotionList>
+
+      {/* Append action */}
+      {appendAction && (
+        <CSSMotion {...motionConfig}>
+          {({ className: motionClassName, style: motionStyle }) => {
+            return cloneElement(appendAction, oriProps => ({
+              className: classNames(oriProps.className, motionClassName),
+              style: {
+                ...motionStyle,
+                ...oriProps.style,
+              },
+            }));
+          }}
+        </CSSMotion>
+      )}
+    </div>
+  );
+};
+
+const UploadList = React.forwardRef<unknown, UploadListProps>(InternalUploadList);
+
+UploadList.displayName = 'UploadList';
+
+UploadList.defaultProps = {
+  listType: 'text' as UploadListType, // or picture
+  progress: {
+    strokeWidth: 2,
+    showInfo: false,
+  },
+  showRemoveIcon: true,
+  showDownloadIcon: false,
+  showPreviewIcon: true,
+  previewFile: previewImage,
+  isImageUrl,
+};
+
+export default UploadList;

components/upload/__tests__/__snapshots__/demo.test.js.snap

@@ -114,14 +114,15 @@ exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
     <div
       class="ant-upload-list-picture-card-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@@ -135,7 +136,7 @@ exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -202,7 +203,6 @@ exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
           </button>
         </span>
       </div>
-      </span>
     </div>
     <div
       class="ant-upload ant-upload-select ant-upload-select-picture-card"
@@ -326,16 +326,17 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -360,7 +361,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
               </span>
             </div>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="http://www.baidu.com/xxx.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -369,7 +370,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
               xxx.png
             </a>
             <span
-                class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -401,19 +402,19 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -438,7 +439,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
               </span>
             </div>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="http://www.baidu.com/yyy.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -447,7 +448,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
               yyy.png
             </a>
             <span
-                class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -479,10 +480,9 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
       <div
         class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-text"
@@ -490,7 +490,9 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
         <div
           class="ant-upload-list-item-info"
         >
-          <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -515,7 +517,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
               </span>
             </div>
             <a
-              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="http://www.baidu.com/zzz.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -524,7 +526,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
               zzz.png
             </a>
             <span
-              class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -726,20 +728,21 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
       <div
         class="ant-upload-draggable-list-item "
         style="cursor:move"
       >
-        <span>
         <div
           class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
         >
           <div
             class="ant-upload-list-item-info"
           >
-              <span>
+            <span
+              class="ant-upload-span"
+            >
               <div
                 class="ant-upload-text-icon"
               >
@@ -764,7 +767,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
                 </span>
               </div>
               <a
-                  class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+                class="ant-upload-list-item-name"
                 href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                 rel="noopener noreferrer"
                 target="_blank"
@@ -773,7 +776,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
                 image1.png
               </a>
               <span
-                  class="ant-upload-list-item-card-actions "
+                class="ant-upload-list-item-card-actions"
               >
                 <button
                   class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -805,24 +808,24 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
             </span>
           </div>
         </div>
-        </span>
       </div>
     </div>
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
       <div
         class="ant-upload-draggable-list-item "
         style="cursor:move"
       >
-        <span>
         <div
           class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
         >
           <div
             class="ant-upload-list-item-info"
           >
-              <span>
+            <span
+              class="ant-upload-span"
+            >
               <div
                 class="ant-upload-text-icon"
               >
@@ -847,7 +850,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
                 </span>
               </div>
               <a
-                  class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+                class="ant-upload-list-item-name"
                 href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                 rel="noopener noreferrer"
                 target="_blank"
@@ -856,7 +859,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
                 image2.png
               </a>
               <span
-                  class="ant-upload-list-item-card-actions "
+                class="ant-upload-list-item-card-actions"
               >
                 <button
                   class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -888,24 +891,24 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
             </span>
           </div>
         </div>
-        </span>
       </div>
     </div>
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
       <div
         class="ant-upload-draggable-list-item "
         style="cursor:move"
       >
-        <span>
         <div
           class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
         >
           <div
             class="ant-upload-list-item-info"
           >
-              <span>
+            <span
+              class="ant-upload-span"
+            >
               <div
                 class="ant-upload-text-icon"
               >
@@ -930,7 +933,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
                 </span>
               </div>
               <a
-                  class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+                class="ant-upload-list-item-name"
                 href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                 rel="noopener noreferrer"
                 target="_blank"
@@ -939,7 +942,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
                 image3.png
               </a>
               <span
-                  class="ant-upload-list-item-card-actions "
+                class="ant-upload-list-item-card-actions"
               >
                 <button
                   class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -971,24 +974,24 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
             </span>
           </div>
         </div>
-        </span>
       </div>
     </div>
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
       <div
         class="ant-upload-draggable-list-item "
         style="cursor:move"
       >
-        <span>
         <div
           class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
         >
           <div
             class="ant-upload-list-item-info"
           >
-              <span>
+            <span
+              class="ant-upload-span"
+            >
               <div
                 class="ant-upload-text-icon"
               >
@@ -1013,7 +1016,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
                 </span>
               </div>
               <a
-                  class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+                class="ant-upload-list-item-name"
                 href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                 rel="noopener noreferrer"
                 target="_blank"
@@ -1022,7 +1025,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
                 image4.png
               </a>
               <span
-                  class="ant-upload-list-item-card-actions "
+                class="ant-upload-list-item-card-actions"
               >
                 <button
                   class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -1054,11 +1057,10 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
             </span>
           </div>
         </div>
-        </span>
       </div>
     </div>
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
       <div
         class="ant-upload-draggable-list-item "
@@ -1070,7 +1072,9 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
           <div
             class="ant-upload-list-item-info"
           >
-            <span>
+            <span
+              class="ant-upload-span"
+            >
               <div
                 class="ant-upload-text-icon"
               >
@@ -1095,13 +1099,13 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
                 </span>
               </div>
               <span
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+                class="ant-upload-list-item-name"
                 title="image.png"
               >
                 image.png
               </span>
               <span
-                class="ant-upload-list-item-card-actions "
+                class="ant-upload-list-item-card-actions"
               >
                 <button
                   class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -1149,14 +1153,15 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
     <div
       class="ant-upload-list-picture-card-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
               href="http://cdn07.foxitsoftware.cn/pub/foxit/cpdf/FoxitCompanyProfile.pdf"
@@ -1201,7 +1206,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
               </span>
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="http://cdn07.foxitsoftware.cn/pub/foxit/cpdf/FoxitCompanyProfile.pdf"
               rel="noopener noreferrer"
               target="_blank"
@@ -1268,19 +1273,19 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
           </button>
         </span>
       </div>
-      </span>
     </div>
     <div
       class="ant-upload-list-picture-card-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.doc"
@@ -1317,7 +1322,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
               </span>
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.doc"
               rel="noopener noreferrer"
               target="_blank"
@@ -1384,7 +1389,6 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
           </button>
         </span>
       </div>
-      </span>
     </div>
     <div
       class="ant-upload-list-picture-card-container"
@@ -1395,7 +1399,9 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
         <div
           class="ant-upload-list-item-info"
         >
-          <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
             >
@@ -1437,7 +1443,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
               </span>
             </div>
             <span
-              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               title="image.png"
             >
               image.png
@@ -1511,7 +1517,9 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
         <div
           class="ant-upload-list-item-info"
         >
-          <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
             >
@@ -1553,7 +1561,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
               </span>
             </div>
             <span
-              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               title="pdf.pdf"
             >
               pdf.pdf
@@ -1627,7 +1635,9 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
         <div
           class="ant-upload-list-item-info"
         >
-          <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
             >
@@ -1661,7 +1671,7 @@ exports[`renders ./components/upload/demo/file-type.md correctly 1`] = `
               </span>
             </div>
             <span
-              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               title="doc.doc"
             >
               doc.doc
@@ -1826,16 +1836,17 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -1860,7 +1871,7 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
               </span>
             </div>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="http://www.baidu.com/xxx.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -1869,7 +1880,7 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
               xxx.png
             </a>
             <span
-                class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -1901,7 +1912,6 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
   </div>
 </span>
@@ -1917,14 +1927,15 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
     <div
       class="ant-upload-list-picture-card-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@@ -1938,7 +1949,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -2005,19 +2016,19 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
           </button>
         </span>
       </div>
-      </span>
     </div>
     <div
       class="ant-upload-list-picture-card-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@@ -2031,7 +2042,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -2098,19 +2109,19 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
           </button>
         </span>
       </div>
-      </span>
     </div>
     <div
       class="ant-upload-list-picture-card-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@@ -2124,7 +2135,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -2191,19 +2202,19 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
           </button>
         </span>
       </div>
-      </span>
     </div>
     <div
       class="ant-upload-list-picture-card-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@@ -2217,7 +2228,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -2284,26 +2295,26 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
           </button>
         </span>
       </div>
-      </span>
     </div>
     <div
       class="ant-upload-list-picture-card-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture-card"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-list-item-thumbnail"
             >
               Uploading...
             </div>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -2313,29 +2324,8 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
             </a>
           </span>
         </div>
-          <div
-            class="ant-upload-list-item-progress"
-          >
-            <div
-              class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
-            >
-              <div
-                class="ant-progress-outer"
-              >
-                <div
-                  class="ant-progress-inner"
-                >
-                  <div
-                    class="ant-progress-bg"
-                    style="width:50%;height:2px;border-radius:"
-                  />
       </div>
     </div>
-            </div>
-          </div>
-        </div>
-      </span>
-    </div>
     <div
       class="ant-upload-list-picture-card-container"
     >
@@ -2345,7 +2335,9 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
         <div
           class="ant-upload-list-item-info"
         >
-          <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
             >
@@ -2387,7 +2379,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
               </span>
             </div>
             <span
-              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               title="image.png"
             >
               image.png
@@ -2552,16 +2544,17 @@ Array [
       class="ant-upload-list ant-upload-list-picture"
     >
       <div
-        class=""
+        class="ant-upload-list-picture-container"
       >
-        <span>
         <div
           class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
         >
           <div
             class="ant-upload-list-item-info"
           >
-              <span>
+            <span
+              class="ant-upload-span"
+            >
               <a
                 class="ant-upload-list-item-thumbnail"
                 href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@@ -2575,7 +2568,7 @@ Array [
                 />
               </a>
               <a
-                  class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+                class="ant-upload-list-item-name"
                 href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                 rel="noopener noreferrer"
                 target="_blank"
@@ -2616,10 +2609,9 @@ Array [
             </span>
           </div>
         </div>
-        </span>
       </div>
       <div
-        class=""
+        class="ant-upload-list-picture-container"
       >
         <div
           class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-picture"
@@ -2627,7 +2619,9 @@ Array [
           <div
             class="ant-upload-list-item-info"
           >
-            <span>
+            <span
+              class="ant-upload-span"
+            >
               <div
                 class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
               >
@@ -2669,7 +2663,7 @@ Array [
                 </span>
               </div>
               <span
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+                class="ant-upload-list-item-name"
                 title="yyy.png"
               >
                 yyy.png
@@ -2761,16 +2755,17 @@ Array [
       class="ant-upload-list ant-upload-list-picture"
     >
       <div
-        class=""
+        class="ant-upload-list-picture-container"
       >
-        <span>
         <div
           class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
         >
           <div
             class="ant-upload-list-item-info"
           >
-              <span>
+            <span
+              class="ant-upload-span"
+            >
               <a
                 class="ant-upload-list-item-thumbnail"
                 href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
@@ -2784,7 +2779,7 @@ Array [
                 />
               </a>
               <a
-                  class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+                class="ant-upload-list-item-name"
                 href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                 rel="noopener noreferrer"
                 target="_blank"
@@ -2825,10 +2820,9 @@ Array [
             </span>
           </div>
         </div>
-        </span>
       </div>
       <div
-        class=""
+        class="ant-upload-list-picture-container"
       >
         <div
           class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-picture"
@@ -2836,7 +2830,9 @@ Array [
           <div
             class="ant-upload-list-item-info"
           >
-            <span>
+            <span
+              class="ant-upload-span"
+            >
               <div
                 class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
               >
@@ -2878,7 +2874,7 @@ Array [
                 </span>
               </div>
               <span
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+                class="ant-upload-list-item-name"
                 title="yyy.png"
               >
                 yyy.png
@@ -3076,16 +3072,17 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -3110,7 +3107,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
               </span>
             </div>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
+              class="ant-upload-list-item-name"
               href="http://www.baidu.com/xxx.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -3119,7 +3116,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
               xxx.png
             </a>
             <span
-                class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-upload-list-item-card-actions-btn"
@@ -3160,19 +3157,19 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -3197,7 +3194,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
               </span>
             </div>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
+              class="ant-upload-list-item-name"
               href="http://www.baidu.com/yyy.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -3206,7 +3203,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
               yyy.png
             </a>
             <span
-                class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-upload-list-item-card-actions-btn"
@@ -3247,10 +3244,9 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-text-container"
     >
       <div
         class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-text"
@@ -3258,7 +3254,9 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
         <div
           class="ant-upload-list-item-info"
         >
-          <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -3283,7 +3281,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
               </span>
             </div>
             <a
-              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="http://www.baidu.com/zzz.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -3292,7 +3290,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
               zzz.png
             </a>
             <span
-              class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"

components/upload/__tests__/__snapshots__/uploadlist.test.js.snap

@@ -28,7 +28,8 @@ exports[`Upload List handle error 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class="ant-upload-animate-enter ant-upload-animate-enter-active"
+      class="ant-upload-list-text-container ant-upload-animate-appear ant-upload-animate-appear-start ant-upload-animate"
+      style="height: 0px; opacity: 0;"
     >
       <div
         class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-text"
@@ -36,7 +37,9 @@ exports[`Upload List handle error 1`] = `
         <div
           class="ant-upload-list-item-info"
         >
-          <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -61,13 +64,13 @@ exports[`Upload List handle error 1`] = `
               </span>
             </div>
             <span
-              class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               title="foo.png"
             >
               foo.png
             </span>
             <span
-              class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -109,7 +112,7 @@ exports[`Upload List itemRender 1`] = `
   class="ant-upload-list ant-upload-list-text"
 >
   <div
-    class=""
+    class="ant-upload-list-text-container"
   >
     <span
       class="custom-item-render"
@@ -118,7 +121,7 @@ exports[`Upload List itemRender 1`] = `
     </span>
   </div>
   <div
-    class=""
+    class="ant-upload-list-text-container"
   >
     <span
       class="custom-item-render"
@@ -157,16 +160,18 @@ exports[`Upload List should be uploading when upload a file 1`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class="ant-upload-animate-enter"
+      class="ant-upload-list-text-container ant-upload-animate-appear ant-upload-animate-appear-start ant-upload-animate"
+      style="height: 0px; opacity: 0;"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-text"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -191,13 +196,13 @@ exports[`Upload List should be uploading when upload a file 1`] = `
               </span>
             </div>
             <span
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               title="foo.png"
             >
               foo.png
             </span>
             <span
-                class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -228,30 +233,9 @@ exports[`Upload List should be uploading when upload a file 1`] = `
             </span>
           </span>
         </div>
-          <div
-            class="ant-upload-list-item-progress"
-          >
-            <div
-              class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
-            >
-              <div
-                class="ant-progress-outer"
-              >
-                <div
-                  class="ant-progress-inner"
-                >
-                  <div
-                    class="ant-progress-bg"
-                    style="width: 0%; height: 2px;"
-                  />
       </div>
     </div>
   </div>
-          </div>
-        </div>
-      </span>
-    </div>
-  </div>
 </span>
 `;
 
@@ -283,16 +267,18 @@ exports[`Upload List should be uploading when upload a file 2`] = `
     class="ant-upload-list ant-upload-list-text"
   >
     <div
-      class="ant-upload-animate-enter ant-upload-animate-enter-active"
+      class="ant-upload-list-text-container ant-upload-animate-appear ant-upload-animate-appear-start ant-upload-animate"
+      style="height: 0px; opacity: 0;"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-text-icon"
             >
@@ -317,13 +303,13 @@ exports[`Upload List should be uploading when upload a file 2`] = `
               </span>
             </div>
             <span
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               title="foo.png"
             >
               foo.png
             </span>
             <span
-                class="ant-upload-list-item-card-actions "
+              class="ant-upload-list-item-card-actions"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
@@ -354,30 +340,9 @@ exports[`Upload List should be uploading when upload a file 2`] = `
             </span>
           </span>
         </div>
-          <div
-            class="ant-upload-list-item-progress fade-leave"
-          >
-            <div
-              class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
-            >
-              <div
-                class="ant-progress-outer"
-              >
-                <div
-                  class="ant-progress-inner"
-                >
-                  <div
-                    class="ant-progress-bg"
-                    style="width: 0%; height: 2px;"
-                  />
       </div>
     </div>
   </div>
-          </div>
-        </div>
-      </span>
-    </div>
-  </div>
 </span>
 `;
 
@@ -409,16 +374,17 @@ exports[`Upload List should non-image format file preview 1`] = `
     class="ant-upload-list ant-upload-list-picture"
   >
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
               href="https://cdn.xxx.com/aaa.zip"
@@ -451,7 +417,7 @@ exports[`Upload List should non-image format file preview 1`] = `
               </span>
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/aaa.zip"
               rel="noopener noreferrer"
               target="_blank"
@@ -492,19 +458,19 @@ exports[`Upload List should non-image format file preview 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://cdn.xxx.com/aaa"
@@ -518,7 +484,7 @@ exports[`Upload List should non-image format file preview 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/aaa"
               rel="noopener noreferrer"
               target="_blank"
@@ -559,19 +525,19 @@ exports[`Upload List should non-image format file preview 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
               href="https://cdn.xxx.com/aaa.xx"
@@ -604,7 +570,7 @@ exports[`Upload List should non-image format file preview 1`] = `
               </span>
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/aaa.xx"
               rel="noopener noreferrer"
               target="_blank"
@@ -645,19 +611,19 @@ exports[`Upload List should non-image format file preview 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
               href="https://cdn.xxx.com/aaa.png/xx.xx"
@@ -690,7 +656,7 @@ exports[`Upload List should non-image format file preview 1`] = `
               </span>
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/aaa.png/xx.xx"
               rel="noopener noreferrer"
               target="_blank"
@@ -731,19 +697,19 @@ exports[`Upload List should non-image format file preview 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://cdn.xxx.com/xx.xx/aaa.png"
@@ -757,7 +723,7 @@ exports[`Upload List should non-image format file preview 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/xx.xx/aaa.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -798,19 +764,19 @@ exports[`Upload List should non-image format file preview 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://cdn.xxx.com/xx.xx/aaa.png"
@@ -824,7 +790,7 @@ exports[`Upload List should non-image format file preview 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/xx.xx/aaa.png"
               rel="noopener noreferrer"
               target="_blank"
@@ -865,19 +831,19 @@ exports[`Upload List should non-image format file preview 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://cdn.xxx.com/xx.xx/aaa.png?query=123"
@@ -891,7 +857,7 @@ exports[`Upload List should non-image format file preview 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/xx.xx/aaa.png?query=123"
               rel="noopener noreferrer"
               target="_blank"
@@ -932,19 +898,19 @@ exports[`Upload List should non-image format file preview 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://cdn.xxx.com/xx.xx/aaa.png#anchor"
@@ -958,7 +924,7 @@ exports[`Upload List should non-image format file preview 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/xx.xx/aaa.png#anchor"
               rel="noopener noreferrer"
               target="_blank"
@@ -999,19 +965,19 @@ exports[`Upload List should non-image format file preview 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot"
@@ -1025,7 +991,7 @@ exports[`Upload List should non-image format file preview 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot"
               rel="noopener noreferrer"
               target="_blank"
@@ -1066,19 +1032,19 @@ exports[`Upload List should non-image format file preview 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://publish-pic-cpu.baidu.com/1296beb3-50d9-4276-885f-52645cbb378e.jpeg@w_228%2ch_152"
@@ -1092,7 +1058,7 @@ exports[`Upload List should non-image format file preview 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://publish-pic-cpu.baidu.com/1296beb3-50d9-4276-885f-52645cbb378e.jpeg@w_228%2ch_152"
               rel="noopener noreferrer"
               target="_blank"
@@ -1133,7 +1099,6 @@ exports[`Upload List should non-image format file preview 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
   </div>
 </span>
@@ -1167,16 +1132,17 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
     class="ant-upload-list ant-upload-list-picture"
   >
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-list-item-thumbnail"
             >
@@ -1201,7 +1167,7 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
               </span>
             </div>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/aaa"
               rel="noopener noreferrer"
               target="_blank"
@@ -1224,23 +1190,20 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
             </span>
           </span>
         </div>
-          <div
-            class="ant-upload-list-item-progress"
-          />
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://cdn.xxx.com/aaa"
@@ -1254,7 +1217,7 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/aaa"
               rel="noopener noreferrer"
               target="_blank"
@@ -1287,7 +1250,6 @@ exports[`Upload List should support removeIcon and downloadIcon 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
   </div>
 </span>
@@ -1321,16 +1283,17 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
     class="ant-upload-list ant-upload-list-picture"
   >
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-list-item-thumbnail"
             >
@@ -1355,7 +1318,7 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
               </span>
             </div>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/aaa"
               rel="noopener noreferrer"
               target="_blank"
@@ -1378,23 +1341,20 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
             </span>
           </span>
         </div>
-          <div
-            class="ant-upload-list-item-progress"
-          />
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://cdn.xxx.com/aaa"
@@ -1408,7 +1368,7 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/aaa"
               rel="noopener noreferrer"
               target="_blank"
@@ -1441,7 +1401,6 @@ exports[`Upload List should support removeIcon and downloadIcon 2`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
   </div>
 </span>
@@ -1475,16 +1434,17 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
     class="ant-upload-list ant-upload-list-picture"
   >
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <div
               class="ant-upload-list-item-thumbnail"
             >
@@ -1509,7 +1469,7 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
               </span>
             </div>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-0"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/aaa"
               rel="noopener noreferrer"
               target="_blank"
@@ -1522,23 +1482,20 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
             />
           </span>
         </div>
-          <div
-            class="ant-upload-list-item-progress"
-          />
       </div>
-      </span>
     </div>
     <div
-      class=""
+      class="ant-upload-list-picture-container"
     >
-      <span>
       <div
         class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
       >
         <div
           class="ant-upload-list-item-info"
         >
-            <span>
+          <span
+            class="ant-upload-span"
+          >
             <a
               class="ant-upload-list-item-thumbnail"
               href="https://cdn.xxx.com/aaa"
@@ -1552,7 +1509,7 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
               />
             </a>
             <a
-                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-0"
+              class="ant-upload-list-item-name"
               href="https://cdn.xxx.com/aaa"
               rel="noopener noreferrer"
               target="_blank"
@@ -1566,7 +1523,6 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
           </span>
         </div>
       </div>
-      </span>
     </div>
   </div>
 </span>

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 act(async () => {
       await sleep(1000);
       wrapper.update();
-    expect(wrapper.find('.ant-upload-list-item').hostNodes().length).toBe(1);
+
+      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', () => {
         <button type="button">upload</button>
       </Upload>,
     );
+
+    // 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);
   });
 

components/upload/interface.tsx

@@ -72,6 +72,12 @@ export type UploadType = 'drag' | 'select';
 export type UploadListType = 'text' | 'picture' | 'picture-card';
 export type UploadListProgressProps = Omit<ProgressProps, 'percent' | 'type'>;
 
+export type ItemRender<T = any> = (
+  originNode: React.ReactElement,
+  file: UploadFile,
+  fileList?: Array<UploadFile<T>>,
+) => React.ReactNode;
+
 type PreviewFileHandler = (file: File | Blob) => PromiseLike<string>;
 type TransformFileHandler = (
   file: RcFile,
@@ -111,11 +117,7 @@ export interface UploadProps<T = any> {
   iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
   isImageUrl?: (file: UploadFile) => boolean;
   progress?: UploadListProgressProps;
-  itemRender?: (
+  itemRender?: ItemRender<T>;
-    originNode: React.ReactElement,
-    file: UploadFile,
-    fileList?: Array<UploadFile<T>>,
-  ) => React.ReactNode;
 }
 
 export interface UploadState<T = any> {
@@ -141,9 +143,5 @@ export interface UploadListProps<T = any> {
   iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
   isImageUrl?: (file: UploadFile) => boolean;
   appendAction?: React.ReactNode;
-  itemRender?: (
+  itemRender?: ItemRender<T>;
-    originNode: React.ReactElement,
-    file: UploadFile,
-    fileList?: Array<UploadFile<T>>,
-  ) => React.ReactNode;
 }

components/upload/style/index.less

@@ -142,16 +142,8 @@
   .reset-component;
   .clearfix;
   line-height: @line-height-base;
-  &-item-list-type-text {
+
-    &:hover {
+  // ============================ Item ============================
-      .@{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 {
     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 {
+  // ======================= Picture & Text =======================
-    color: @success-color;
+  &-text,
-    font-weight: bold;
+  &-picture {
+    &-container {
+      transition: opacity @animation-duration-slow, height @animation-duration-slow;
+
+      &::before {
+        display: table;
+        width: 0;
+        height: 0;
+        content: '';
       }
 
-  .@{upload-prefix-cls}-animate-enter,
+      // Don't know why span here, just stretch it
-  .@{upload-prefix-cls}-animate-leave,
+      .@{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;
+    }
+  }
+
+  // ============================ 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 {
+  // .@{upload-prefix-cls}-animate-appear,
-    animation-name: uploadAnimateIn;
+  // .@{upload-prefix-cls}-animate-enter {
-  }
+  //   animation-name: uploadAnimateIn;
+  // }
 
-  .@{upload-prefix-cls}-animate-leave {
+  // .@{upload-prefix-cls}-animate-leave {
-    animation-name: uploadAnimateOut;
+  //   animation-name: uploadAnimateOut;
-  }
+  // }
 
+  .@{upload-prefix-cls}-animate-inline-appear,
   .@{upload-prefix-cls}-animate-inline-enter {
     animation-name: uploadAnimateInlineIn;
   }
@@ -545,23 +580,23 @@
   }
 }
 
-@keyframes uploadAnimateIn {
+// @keyframes uploadAnimateIn {
-  from {
+//   from {
-    height: 0;
+//     height: 0;
-    margin: 0;
+//     margin: 0;
-    padding: 0;
+//     padding: 0;
-    opacity: 0;
+//     opacity: 0;
-  }
+//   }
-}
+// }
 
-@keyframes uploadAnimateOut {
+// @keyframes uploadAnimateOut {
-  to {
+//   to {
-    height: 0;
+//     height: 0;
-    margin: 0;
+//     margin: 0;
-    padding: 0;
+//     padding: 0;
-    opacity: 0;
+//     opacity: 0;
-  }
+//   }
-}
+// }
 
 @keyframes uploadAnimateInlineIn {
   from {

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",