home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-09 04:46:52 +10:00
Code Issues Packages Projects Releases Wiki Activity

upload (#5210)

Browse Source 
* fix upload firefox delete anim, update list animate

* update picture cssName

* remove note

* update animate Name

* refactor upload animation code

* refactor upload dom structure

* update upload demo snapshots
This commit is contained in:
jiang
2017-03-08 18:02:15 +08:00
committed by 偏右
parent 56dc197c5b
commit 8ca2bfd12a
4 changed files with 278 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/upload/__tests__/__snapshots__/demo.test.js.snap
+175 -157
View File
@@ -30,58 +30,64 @@ exports[`test renders ./components/upload/demo/defaultFileList.md correctly 1`]
class="ant-upload-list-item ant-upload-list-item-done">
<div
class="ant-upload-list-item-info">
<i
class="anticon anticon-paper-clip" />
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/xxx.png"
rel="noopener noreferrer"
target="_blank"
title="xxx.png">
xxx.png
</a>
<i
class="anticon anticon-cross"
title="删除文件" />
<span>
<i
class="anticon anticon-paper-clip" />
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/xxx.png"
rel="noopener noreferrer"
target="_blank"
title="xxx.png">
xxx.png
</a>
</span>
</div>
<i
class="anticon anticon-cross"
title="删除文件" />
</div>
<div
class="ant-upload-list-item ant-upload-list-item-done">
<div
class="ant-upload-list-item-info">
<i
class="anticon anticon-paper-clip" />
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/yyy.png"
rel="noopener noreferrer"
target="_blank"
title="yyy.png">
yyy.png
</a>
<i
class="anticon anticon-cross"
title="删除文件" />
<span>
<i
class="anticon anticon-paper-clip" />
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/yyy.png"
rel="noopener noreferrer"
target="_blank"
title="yyy.png">
yyy.png
</a>
</span>
</div>
<i
class="anticon anticon-cross"
title="删除文件" />
</div>
<div
class="ant-upload-list-item ant-upload-list-item-error">
<div
class="ant-upload-list-item-info">
<i
class="anticon anticon-paper-clip" />
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/zzz.png"
rel="noopener noreferrer"
target="_blank"
title="zzz.png">
zzz.png
</a>
<i
class="anticon anticon-cross"
title="删除文件" />
<span>
<i
class="anticon anticon-paper-clip" />
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/zzz.png"
rel="noopener noreferrer"
target="_blank"
title="zzz.png">
zzz.png
</a>
</span>
</div>
<i
class="anticon anticon-cross"
title="删除文件" />
</div>
</div>
</span>
@@ -110,20 +116,22 @@ exports[`test renders ./components/upload/demo/fileList.md correctly 1`] = `
class="ant-upload-list-item ant-upload-list-item-done">
<div
class="ant-upload-list-item-info">
<i
class="anticon anticon-paper-clip" />
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/xxx.png"
rel="noopener noreferrer"
target="_blank"
title="xxx.png">
xxx.png
</a>
<i
class="anticon anticon-cross"
title="删除文件" />
<span>
<i
class="anticon anticon-paper-clip" />
<a
class="ant-upload-list-item-name"
href="http://www.baidu.com/xxx.png"
rel="noopener noreferrer"
target="_blank"
title="xxx.png">
xxx.png
</a>
</span>
</div>
<i
class="anticon anticon-cross"
title="删除文件" />
</div>
</div>
</span>
@@ -140,38 +148,40 @@ exports[`test renders ./components/upload/demo/picture-card.md correctly 1`] = `
class="ant-upload-list-item ant-upload-list-item-done">
<div
class="ant-upload-list-item-info">
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank">
<img
alt="xxx.png"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="xxx.png">
xxx.png
</a>
<span
class="ant-upload-list-item-actions">
<span>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank">
<img
alt="xxx.png"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="预览文件">
<i
class="anticon anticon-eye-o" />
title="xxx.png">
xxx.png
</a>
<i
class="anticon anticon-delete"
title="删除文件" />
</span>
</div>
<span
class="ant-upload-list-item-actions">
<a
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="预览文件">
<i
class="anticon anticon-eye-o" />
</a>
<i
class="anticon anticon-delete"
title="删除文件" />
</span>
</div>
</div>
<div
@@ -194,53 +204,57 @@ exports[`test renders ./components/upload/demo/picture-style.md correctly 1`] =
class="ant-upload-list-item ant-upload-list-item-done">
<div
class="ant-upload-list-item-info">
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank">
<img
alt="xxx.png"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="xxx.png">
xxx.png
</a>
<i
class="anticon anticon-cross"
title="删除文件" />
<span>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank">
<img
alt="xxx.png"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="xxx.png">
xxx.png
</a>
</span>
</div>
<i
class="anticon anticon-cross"
title="删除文件" />
</div>
<div
class="ant-upload-list-item ant-upload-list-item-done">
<div
class="ant-upload-list-item-info">
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank">
<img
alt="yyy.png"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="yyy.png">
yyy.png
</a>
<i
class="anticon anticon-cross"
title="删除文件" />
<span>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank">
<img
alt="yyy.png"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="yyy.png">
yyy.png
</a>
</span>
</div>
<i
class="anticon anticon-cross"
title="删除文件" />
</div>
</div>
</span>
@@ -257,53 +271,57 @@ exports[`test renders ./components/upload/demo/picture-style.md correctly 1`] =
class="ant-upload-list-item ant-upload-list-item-done">
<div
class="ant-upload-list-item-info">
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank">
<img
alt="xxx.png"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="xxx.png">
xxx.png
</a>
<i
class="anticon anticon-cross"
title="删除文件" />
<span>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank">
<img
alt="xxx.png"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="xxx.png">
xxx.png
</a>
</span>
</div>
<i
class="anticon anticon-cross"
title="删除文件" />
</div>
<div
class="ant-upload-list-item ant-upload-list-item-done">
<div
class="ant-upload-list-item-info">
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank">
<img
alt="yyy.png"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="yyy.png">
yyy.png
</a>
<i
class="anticon anticon-cross"
title="删除文件" />
<span>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank">
<img
alt="yyy.png"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="yyy.png">
yyy.png
</a>
</span>
</div>
<i
class="anticon anticon-cross"
title="删除文件" />
</div>
</div>
</span>
components/upload/demo/picture-style.md
+7 -1
View File
@@ -65,8 +65,14 @@ ReactDOM.render(
````css
/* tile uploaded pictures */
.upload-list-inline .ant-upload-list-item {
display: inline-block;
float: left;
width: 200px;
margin-right: 8px;
}
.upload-list-inline .ant-upload-animate-enter {
animation-name: uploadAnimateInlineIn;
}
.upload-list-inline .ant-upload-animate-leave {
animation-name: uploadAnimateInlineOut;
}
````
components/upload/style/index.less
+85 -44
View File
@@ -118,6 +118,7 @@
margin-top: 8px;
font-size: @font-size-base;
position: relative;
height: 22px;
&-name {
overflow: hidden;
@@ -129,7 +130,6 @@
}
&-info {
height: 22px;
line-height: 22px;
padding: 0 12px 0 4px;
transition: background-color .3s;
@@ -141,19 +141,20 @@
position: absolute;
top: 6px;
}
}
.@{iconfont-css-prefix}-cross {
.iconfont-size-under-12px(10px);
transition: all .3s;
opacity: 0;
cursor: pointer;
position: absolute;
right: 4px;
color: @text-color-secondary;
line-height: 22px;
&:hover {
color: @text-color;
}
.@{iconfont-css-prefix}-cross {
.iconfont-size-under-12px(10px);
transition: all .3s;
opacity: 0;
cursor: pointer;
position: absolute;
top: 0;
right: 4px;
color: @text-color-secondary;
line-height: 22px;
&:hover {
color: @text-color;
}
}
@@ -173,7 +174,7 @@
&-error .@{iconfont-css-prefix}-cross {
opacity: 1;
color: @error-color!important;
color: @error-color !important;
}
&-progress {
@@ -272,7 +273,7 @@
display: inline;
.@{upload-item} {
display: inline-block;
float: left;
width: @upload-pictrue-card-size;
height: @upload-pictrue-card-size;
margin: 0 8px 8px 0;
@@ -288,35 +289,14 @@
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
transition: all .3s;
opacity: 0;
width: 100%;
height: 100%;
}
.@{iconfont-css-prefix}-eye-o,
.@{iconfont-css-prefix}-delete {
z-index: 10;
transition: all .3;
cursor: pointer;
font-size: 16px;
width: 16px;
color: @text-color-dark;
opacity: 0;
margin: 0 4px;
&:hover {
color: #fff;
}
}
&:hover {
&:before {
opacity: 1;
}
.@{iconfont-css-prefix}-eye-o,
.@{iconfont-css-prefix}-delete {
opacity: 1;
}
}
}
@@ -327,6 +307,27 @@
transform: translate(-50%, -50%);
z-index: 10;
white-space: nowrap;
opacity: 0;
transition: all .3s;
.@{iconfont-css-prefix}-eye-o,
.@{iconfont-css-prefix}-delete {
z-index: 10;
transition: all .3s;
cursor: pointer;
font-size: 16px;
width: 16px;
color: @text-color-dark;
margin: 0 4px;
&:hover {
color: #fff;
}
}
}
.@{upload-item}-info:hover + .@{upload-item}-actions,
.@{upload-item}-actions:hover {
opacity: 1;
}
.@{upload-item}-thumbnail,
@@ -371,25 +372,65 @@
font-weight: bold;
}
.@{upload-prefix-cls}-margin-top-enter {
animation: uploadMarginTopIn .3s @ease-in-out-circ;
.@{upload-prefix-cls}-animate-enter,
.@{upload-prefix-cls}-animate-leave,
.@{upload-prefix-cls}-animate-inline-enter,
.@{upload-prefix-cls}-animate-inline-leave {
animation-duration: .3s;
animation-fill-mode: @ease-in-out-circ;
}
.@{upload-prefix-cls}-margin-top-leave {
animation: uploadMarginTopOut .3s @ease-in-out-circ;
.@{upload-prefix-cls}-animate-enter {
animation-name: uploadAnimateIn;
}
.@{upload-prefix-cls}-animate-leave {
animation-name: uploadAnimateOut;
}
.@{upload-prefix-cls}-animate-inline-enter {
animation-name: uploadAnimateInlineIn;
}
.@{upload-prefix-cls}-animate-inline-leave {
animation-name: uploadAnimateInlineOut;
}
}
@keyframes uploadMarginTopIn {
@keyframes uploadAnimateIn {
from {
margin-top: -25px;
height: 0;
margin: 0;
opacity: 0;
padding: 0;
}
}
@keyframes uploadAnimateOut {
to {
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
}
@keyframes uploadMarginTopOut {
@keyframes uploadAnimateInlineIn {
from {
width: 0;
height: 0;
margin: 0;
opacity: 0;
padding: 0;
}
}
@keyframes uploadAnimateInlineOut {
to {
margin-top: -25px;
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
}
components/upload/uploadList.tsx
+11 -16
View File
@@ -150,35 +150,30 @@ export default class UploadList extends React.Component<UploadListProps, any> {
? <span className={`${prefixCls}-list-item-actions`}>{previewIcon}{removeIcon}</span>
: removeIconCross;
const item = (
const message = file.response || (file.error && file.error.statusText) || locale.uploadError;
const iconAndPreview = (file.status === 'error')
? <Tooltip title={message}>{icon}{preview}</Tooltip>
: <span>{icon}{preview}</span>;
return (
<div className={infoUploadingClass} key={file.uid}>
<div className={`${prefixCls}-list-item-info`}>
{icon}
{preview}
{actions}
{iconAndPreview}
</div>
{actions}
{progress}
</div>
);
if (file.status === 'error') {
const message = file.response || (file.error && file.error.statusText) || locale.uploadError;
return (
<Tooltip title={message} key={file.uid}>
{item}
</Tooltip>
);
}
return item;
});
const listClassNames = classNames({
[`${prefixCls}-list`]: true,
[`${prefixCls}-list-${listType}`]: true,
});
const animationDirection =
listType === 'picture-card' ? 'animate-inline' : 'animate';
return (
<Animate
transitionName={`${prefixCls}-margin-top`}
transitionName={`${prefixCls}-${animationDirection}`}
component="div"
className={listClassNames}
>