From 55e85a9f50f97b3bf2a753565bbc47b7fd5074f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E7=82=B9=E5=8C=85=E5=AD=90?= Date: Sun, 29 Mar 2020 13:16:41 +0800 Subject: [PATCH] feat: feat upload new icon (#1953) * feat: feat upload new icon * fix: format code * fix: upload icon code * fix: upload bug * test: update snapshots * fix: gitignore --- components/button/button.jsx | 1 - components/upload/UploadList.jsx | 21 ++++++++------ .../__tests__/__snapshots__/demo.test.js.snap | 28 +++++++++---------- .../__snapshots__/uploadlist.test.js.snap | 22 +++++++-------- .../upload/__tests__/uploadlist.test.js | 4 +-- components/upload/style/index.less | 2 +- 6 files changed, 40 insertions(+), 38 deletions(-) diff --git a/components/button/button.jsx b/components/button/button.jsx index bed34f541..eecf4bfda 100644 --- a/components/button/button.jsx +++ b/components/button/button.jsx @@ -3,7 +3,6 @@ import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'; import buttonTypes from './buttonTypes'; import { filterEmpty, getListeners } from '../_util/props-util'; import { ConfigConsumerProps } from '../config-provider'; - // eslint-disable-next-line no-console const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/; const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar); diff --git a/components/upload/UploadList.jsx b/components/upload/UploadList.jsx index 71bc5f29e..034e830b1 100644 --- a/components/upload/UploadList.jsx +++ b/components/upload/UploadList.jsx @@ -3,7 +3,13 @@ import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-u import getTransitionProps from '../_util/getTransitionProps'; import { ConfigConsumerProps } from '../config-provider'; import { previewImage, isImageUrl } from './utils'; -import Icon from '../icon'; +import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'; +import PaperClipOutlined from '@ant-design/icons-vue/PaperClipOutlined'; +import PictureTwoTone from '@ant-design/icons-vue/PictureTwoTone'; +import FileTwoTone from '@ant-design/icons-vue/FileOutlined'; +import DeleteOutlined from '@ant-design/icons-vue/DeleteOutlined'; +import DownloadOutlined from '@ant-design/icons-vue/DownloadOutlined'; +import EyeOutlined from '@ant-design/icons-vue/EyeOutlined'; import Tooltip from '../tooltip'; import Progress from '../progress'; import classNames from 'classnames'; @@ -93,13 +99,13 @@ export default { const list = items.map(file => { let progress; - let icon = ; + let icon = file.status === 'uploading' ? : ; if (listType === 'picture' || listType === 'picture-card') { if (listType === 'picture-card' && file.status === 'uploading') { icon =
{locale.uploading}
; } else if (!file.thumbUrl && !file.url) { - icon = ; + icon = ; } else { const thumbnail = isImageUrl(file) ? ( ) : ( - + ); icon = ( this.handleClose(file)} /> + this.handleClose(file)} /> ) : null; const downloadIcon = showDownloadIcon && file.status === 'done' ? ( - this.handleDownload(file)} /> @@ -218,7 +223,7 @@ export default { onClick={e => this.handlePreview(file, e)} title={locale.previewFile} > - + ) : null; const actions = listType === 'picture-card' && file.status !== 'uploading' && ( diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap index 5b29ad316..fe38e701e 100644 --- a/components/upload/__tests__/__snapshots__/demo.test.js.snap +++ b/components/upload/__tests__/__snapshots__/demo.test.js.snap @@ -2,20 +2,18 @@ exports[`renders ./antdv-demo/docs/upload/demo/avatar.md correctly 1`] = `
`; -exports[`renders ./antdv-demo/docs/upload/demo/basic copy 3.md correctly 1`] = `
`; - exports[`renders ./antdv-demo/docs/upload/demo/basic.md correctly 1`] = `
`; exports[`renders ./antdv-demo/docs/upload/demo/defaultFileList.md correctly 1`] = ` -
xxx.png
+
-
yyy.png
+ @@ -27,28 +25,28 @@ exports[`renders ./antdv-demo/docs/upload/demo/directory.md correctly 1`] = `
`; exports[`renders ./antdv-demo/docs/upload/demo/fileList.md correctly 1`] = ` -
xxx.png
+
 `; exports[`renders ./antdv-demo/docs/upload/demo/picture-card.md correctly 1`] = ` -
image.pngimage.png
+
image.pngimage.png
-
image.pngimage.png
+
image.pngimage.png
-
image.pngimage.png
+
image.pngimage.png
-
image.pngimage.png
+
image.pngimage.png
-
image.png
+
image.png
@@ -61,16 +59,16 @@ exports[`renders ./antdv-demo/docs/upload/demo/picture-card.md correctly 1`] = ` `; exports[`renders ./antdv-demo/docs/upload/demo/picture-style.md correctly 1`] = ` -
xxx.pngxxx.png
+
-
yyy.pngyyy.png
+ -

xxx.pngxxx.png
+

- diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap index d9bec99fe..44007353c 100644 --- a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap +++ b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Upload List handle error 1`] = ` -
foo.png
+
foo.png
@@ -18,7 +18,7 @@ exports[`Upload List handle error 1`] = ` `; exports[`Upload List handle error 2`] = ` -
foo.png
+
foo.png
@@ -37,31 +37,31 @@ exports[`Upload List handle error 2`] = ` exports[`Upload List should be uploading when upload a file 1`] = `
`; exports[`Upload List should non-image format file preview 1`] = ` -
not-image
+
-
imageimage
+ -
not-image
+ -
not-image
+ -
imageimage
+ -
imageimage
+ -
imageimage
+ -
imageimage
+ -
imageimage
+ `; diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js index 85671b23b..df8b80ef2 100644 --- a/components/upload/__tests__/uploadlist.test.js +++ b/components/upload/__tests__/uploadlist.test.js @@ -295,12 +295,12 @@ describe('Upload List', () => { const wrapper = mount(Upload, props); setTimeout(async () => { wrapper - .findAll('.anticon-eye-o') + .findAll('.anticon-eye') .at(0) .trigger('click'); expect(handlePreview).toBeCalledWith(fileList[0]); wrapper - .findAll('.anticon-eye-o') + .findAll('.anticon-eye') .at(1) .trigger('click'); expect(handlePreview).toBeCalledWith(fileList[1]); diff --git a/components/upload/style/index.less b/components/upload/style/index.less index b074e4615..faa888e2c 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -403,7 +403,7 @@ opacity: 0; transition: all 0.3s; - .@{iconfont-css-prefix}-eye-o, + .@{iconfont-css-prefix}-eye, .@{iconfont-css-prefix}-download, .@{iconfont-css-prefix}-delete { z-index: 10;