diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index d30e5970a4..c6d08c7f02 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -17362,94 +17362,100 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
-
-
- - - +
+
+
- - - - - xxx.png - - - - - - - - - - - - + + - - - - - - -
+ xxx.png + + + + + + + + + + + + + + +
+
+
+
@@ -17465,94 +17471,100 @@ exports[`ConfigProvider components Upload normal 1`] = `
-
-
- - - +
+
+
- - - - - xxx.png - - - - - - - - - - - - + + - - - - - - -
+ xxx.png + + + + + + + + + + + + + + +
+
+
+
@@ -17568,94 +17580,100 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
-
-
- - - +
+
+
- - - - - xxx.png - - - - - - - - - - - - + + - - - - - - -
+ xxx.png + + + + + + + + + + + + + + +
+
+
+
diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx index 261c890325..435500ddec 100644 --- a/components/upload/UploadList.tsx +++ b/components/upload/UploadList.tsx @@ -226,26 +226,27 @@ export default class UploadList extends React.Component { } else { message = (file.error && file.error.statusText) || locale.uploadError; } - const iconAndPreview = - file.status === 'error' ? ( - - {icon} - {preview} - - ) : ( - - {icon} - {preview} - - ); + const iconAndPreview = ( + + {icon} + {preview} + + ); + const dom = ( +
+
+
{iconAndPreview}
+ {actions} + + {progress} + +
+
+ ); return ( -
-
{iconAndPreview}
- {actions} - - {progress} - +
+ {file.status === 'error' ? {dom} : {dom}}
); }); diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap index 84414f30a4..5b45820448 100644 --- a/components/upload/__tests__/__snapshots__/demo.test.js.snap +++ b/components/upload/__tests__/__snapshots__/demo.test.js.snap @@ -33,241 +33,219 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
-
-
- - - +
+ +
+
+
-
-
- - - +
+ +
+
+
-
+
- - +
- - - - zzz.png - - - + - - - + + zzz.png + + + + + + + + + +
+
@@ -324,72 +340,636 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
-
-
- - - +
+ +
+ +
+
+ +`; + +exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = ` +
+ +
+
+ +
+
+
+ + + image.png + + + image.png + + +
+ + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+ + + image.png + + + image.png + + +
+ + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+ + + image.png + + + image.png + + +
+ + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+ + + image.png + + + image.png + + +
+ + + + + + + + + + + + + +
+
+ +
+
+
+
+
+ + + + + + image.png + + +
+ + + + + + - - - -
-
-
- -`; - -exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = ` -
- -
-
-
- - - image.png - - - image.png - - + +
- - - - - - - - - - - - - -
-
-
- - - image.png - - - image.png - - -
- - - - - - - - - - - - - -
-
-
- - - image.png - - - image.png - - -
- - - - - - - - - - - - - -
-
-
- - - image.png - - - image.png - - -
- - - - - - - - - - - - - -
-
-
- - - image.png - - - image.png - - -
- - - - - - - - - - - - -
-
-
- - - xxx.png - - - xxx.png - - - + +
+ +
+
+
-
+
@@ -1147,135 +1203,114 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
-
-
- - - xxx.png - - - xxx.png - - - + +
+ +
+
+
-
+
diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap index b696d2c08e..67476e880d 100644 --- a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap +++ b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap @@ -28,53 +28,24 @@ exports[`Upload List handle error 1`] = ` class="ant-upload-list ant-upload-list-text" >
- - +
- - - - foo.png - - - + - - - -
-
-
-
-
-
-
-
-
+ foo.png + + + + + + + + +
@@ -145,90 +129,98 @@ exports[`Upload List should be uploading when upload a file 1`] = ` class="ant-upload-list ant-upload-list-text" >
-
- - - - - - foo.png - - - - - - - - - -
-
+
+ + + + + + foo.png + + + + + + + + + +
+
-
+
+
+
+
+
+
+
-
+
@@ -262,115 +254,123 @@ exports[`Upload List should be uploading when upload a file 2`] = ` class="ant-upload-list ant-upload-list-text" >
-
- - - - - - foo.png - - - - - - - - - - - - - - -
-
+
+ + + + + + foo.png + + + + + + + + + + + + + + +
+
-
+
+
+
+
+
+
+
-
+
@@ -403,912 +403,972 @@ exports[`Upload List should non-image format file preview 1`] = `
-
-
- - - + +
+ +
+
+
-
-
- - - image - - - image - - - + +
+ +
+
+
-
-
- - - + +
+ +
+
+
-
-
- - - + +
+ +
+
+
-
-
- - - image - - - image - - - + +
+ +
+
+
-
-
- - - image - - - image - - - + +
+ +
+
+
-
-
- - - image - - - image - - - + +
+ +
+
+
-
-
- - - image - - - image - - - + +
+ +
+
+
-
-
- - - image - - - image - - - + +
+ +
+
+
-
-
- - - image - - - image - - - + +
+ +
+
+
@@ -1341,102 +1401,114 @@ exports[`Upload List should support showRemoveIcon and showPreviewIcon 1`] = `
-
-
- - - image - - - image - - - -
-
-
-
-
- - - image - - - image - - - + +
+ +
+
+
+ +
+
+ +
+ +
+
diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md index 254f57e09b..5abd8b902e 100644 --- a/components/upload/demo/picture-card.md +++ b/components/upload/demo/picture-card.md @@ -57,8 +57,7 @@ class PicturesWall extends React.Component { { uid: '-5', name: 'image.png', - status: 'done', - url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', + status: 'error', }, ], }; diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md index 96e971b73d..63605eca0d 100644 --- a/components/upload/demo/picture-style.md +++ b/components/upload/demo/picture-style.md @@ -27,9 +27,7 @@ const fileList = [ { uid: '-2', name: 'yyy.png', - status: 'done', - url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', - thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', + status: 'error', }, ];