ant-design/components/upload/uploadList.jsx

56 lines
1.5 KiB
React
Raw Normal View History

import React from 'react';
2015-08-21 16:19:28 +08:00
import getFileItem from './getFileItem';
const prefixCls = 'ant-upload';
2015-08-21 17:12:42 +08:00
import Animate from 'rc-animate';
export default React.createClass({
getDefaultProps() {
return {
items: []
};
},
getInitialState() {
return {
items: this.props.items
};
},
componentWillReceiveProps(nextProps) {
if ('items' in nextProps) {
this.setState({
items: nextProps.items
});
}
},
2015-08-09 18:23:18 +08:00
handleClose(file) {
let items = this.state.items;
2015-08-21 16:19:28 +08:00
let removeItem = getFileItem(file, items);
2015-08-09 18:23:18 +08:00
if (removeItem) {
2015-08-21 16:19:28 +08:00
items.splice(items.indexOf(removeItem), 1);
2015-08-09 18:23:18 +08:00
}
this.setState({
items: items
});
2015-08-27 15:45:38 +08:00
this.props.onRemove(file.file);
},
render() {
2015-08-21 16:19:28 +08:00
let items = this.state.items;
let downloadItem = (file) => {
2015-08-27 15:45:38 +08:00
let statusIcon = file.status === 'done' ? <i className={'anticon anticon-check ' + prefixCls + '-success-icon'}></i> :
<i className="anticon anticon-loading"></i>;
return (
2015-08-21 16:19:28 +08:00
<div className={prefixCls + '-list-item'} key={file.index}>
{statusIcon}
2015-08-21 16:43:18 +08:00
<b className={prefixCls + '-item-name'}>{file.filename}</b>
<i className="anticon anticon-cross" ref="theCloseBtn"
2015-08-21 17:37:54 +08:00
onClick={this.handleClose.bind(this, file)}></i>
</div>
);
};
2015-08-21 17:12:42 +08:00
return (<div className={prefixCls + '-list'}>
2015-08-21 17:37:54 +08:00
<Animate transitionName={prefixCls + '-margin-top'}>
{items.map(downloadItem)}
2015-08-21 17:12:42 +08:00
</Animate>
</div>);
}
});