test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

update upload detail

Browse Source
This commit is contained in:
afc163 2016-11-22 14:21:42 +08:00
parent f77d568322
commit e552880c32
5 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/upload/demo/inplace.md
View File

@ -24,7 +24,7 @@ const Demo = React.createClass({
if (info.file.status === 'done') {
this.setState({
// Get this url from response in real world.
imageUrl: 'https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg',
imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
});
}
},
@ -52,21 +52,22 @@ ReactDOM.render(<Demo />, mountNode);
```
```css
#components-upload-demo-inplace .avatar-uploader,
#components-upload-demo-inplace .avatar-uploader-trigger,
#components-upload-demo-inplace .avatar {
.avatar-uploader,
.avatar-uploader-trigger,
.avatar {
width: 150px;
height: 150px;
}
#components-upload-demo-inplace .avatar-uploader {
.avatar-uploader {
display: block;
border: 1px solid #d9d9d9;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
}
#components-upload-demo-inplace .avatar-uploader-trigger {
.avatar-uploader-trigger {
display: table-cell;
vertical-align: middle;
font-size: 28px;
color: #999;
}
```

15
components/upload/demo/picture-card.md
View File

@ -36,8 +36,8 @@ const ImageUploadList = React.createClass({
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}],
onPreview: (file) => {
this.setState({
@ -52,12 +52,17 @@ const ImageUploadList = React.createClass({
<Icon type="plus" />
<div className="ant-upload-text">Upload</div>
</Upload>
<a href="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" target="_blank" rel="noopener noreferrer" className="upload-example">
<img alt="example" src="https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png" />
<a
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
target="_blank"
rel="noopener noreferrer"
className="upload-example"
>
<img alt="example" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
<span>sample</span>
</a>
<Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
<img alt="example" src={this.state.previewImage} />
<img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
</Modal>
</div>
);

8
components/upload/demo/picture-style.md
View File

@ -24,14 +24,14 @@ const props = {
uid: -1,
name: 'xxx.png',
status: 'done',
url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}, {
uid: -2,
name: 'yyy.png',
status: 'done',
url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
thumbUrl: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}],
};

4
components/upload/style/index.less
View File

@ -208,6 +208,8 @@
width: 48px;
height: 48px;
display: block;
overflow: hidden;
border-radius: @border-radius-sm;
}
.@{upload-item}-thumbnail.@{iconfont-css-prefix}:before {
@ -221,7 +223,7 @@
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 0 0 8px;
line-height: 42px;
line-height: 44px;
transition: all 0.3s ease;
padding-left: 48px;
padding-right: 8px;

11
components/upload/uploadList.tsx
View File

@ -30,12 +30,11 @@ export default class UploadList extends React.Component<UploadListProps, any> {
}
handlePreview = (file, e) => {
e.preventDefault();
const onPreview = this.props.onPreview;
const { onPreview } = this.props;
if (!onPreview) {
return;
}
e.preventDefault();
return onPreview(file);
}
@ -81,7 +80,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
<a
className={`${prefixCls}-list-item-thumbnail`}
onClick={e => this.handlePreview(file, e)}
href={file.url}
href={file.thumbUrl || file.url}
target="_blank" rel="noopener noreferrer"
>
<img src={file.thumbUrl || file.url} alt={file.name} />
@ -137,9 +136,9 @@ export default class UploadList extends React.Component<UploadListProps, any> {
>
<Icon type="eye-o" />
</a>
<Icon type="delete" onClick={() => this.handleClose(file)} />
<Icon type="delete" title="Remove file" onClick={() => this.handleClose(file)} />
</span>
) : <Icon type="cross" onClick={() => this.handleClose(file)} />
) : <Icon type="cross" title="Remove file" onClick={() => this.handleClose(file)} />
}
</div>
{progress}