yylib-quick-mobile
Version:
yylib-quick-mobile
199 lines (198 loc) • 7.57 kB
JavaScript
import React from 'react';
import {Checkbox,Icon,ListView, List,PullToRefresh} from 'antd-mobile';
import classnames from 'classnames';
import ReactDOM from 'react-dom';
const CheckboxItem = Checkbox.CheckboxItem;
import folder from '../../common/img/folder.png';
import ppt from '../../common/img/ppt.png';
import pdf from '../../common/img/pdf.png';
import excel from '../../common/img/excel.png';
import word from '../../common/img/word.png';
import zip from '../../common/img/zip.png';
import img from '../../common/img/img.png';
import unknow from '../../common/img/unknow.png';
import PropTypes from 'prop-types';
import {ADDR} from '../../common/RestUrl';
class YYLibraryList extends React.Component {
constructor(props) {
super(props);
const dataSource = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.state = {
dataSource,
isLoading: true,
refreshing:true,
height:document.documentElement.clientHeight,
initdata:'', //第一次传的列表参数
footer:'', //页脚是否显示加载完成
};
}
componentDidMount() {
const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
setTimeout(()=>{
let data = this.props.data; //获取列表初始值
this.setState({
initdata:data,
height:hei,
dataSource: this.state.dataSource.cloneWithRows(data),
isLoading: false,
refreshing:false,
});
}, 300);
}
componentWillReceiveProps(nextprops){
const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
if(nextprops.data!==this.props.data){
setTimeout(() => {
let data = this.props.data; //获取列表初始值
this.setState({
initdata:data,
height:hei,
dataSource: this.state.dataSource.cloneWithRows(data),
isLoading: false,
refreshing:false,
});
}, 300);
}
}
onChange(item,event){
event.stopPropagation();
this.props.onChange&&this.props.onChange(item);
}
operation(item,event){
event.stopPropagation();
this.props.operation&&this.props.operation(item);
}
//点击文件夹或者文件
clickFile(item,event){
event.stopPropagation();
let {multi,source} = this.props;
if (multi){
this.props.onChange&&this.props.onChange(item);
return;
}
if(item.type===0){
//如果是文件
let url=ADDR+'/icop-file/onlinePreview?url='+ADDR+'/'+item.filePath;
// let params = {
// text:item.fileName,
// url:url,
// title:item.fileName
// };
this.props.openFile&& this.props.openFile(item);//打开文件
//window.YYPlugin&& window.YYPlugin.call("CommonPlugin","openWebview", params)
}else{
//文件夹的情况
if(this.context.location){
let params=Object.assign({},this.context.location.query);
this.context.router.push({pathname:this.context.location.pathname,query:{...params,fileid:item.id}})
}
}
}
getFileType(type,item){
if (type===1) {//文件夹
return <img src={folder}/>;
}
else if (type===0){//文件
let fileName = item.fileName.lastIndexOf(".");//取到文件名开始到最后一个点的长度
let fileNameLength = item.fileName.length;//取到文件名长度
let filetype = item.fileName.substring(fileName + 1, fileNameLength);//截取
switch (filetype) {
case 'ppt':case'pptx':return <img src={ppt}/>;
break;
case 'doc':case'docx':return <img src={word}/>;
break;
case 'pdf':return <img src={pdf}/>;
break;
case 'xsl':case 'xlsx':return <img src={excel}/>;
break;
case 'zip':case 'rar':case'rars':return <img src={zip}/>;
break;
case 'jpg':case 'png':case 'gif':case 'jpeg':case 'PNG':case 'JPG':case 'GIF':return <img src={img}/>;
break;
default:return <img src={unknow}/>;
break;
}
}
}
getList = (data) => {
let list = [];
let {multi,selectAll,selectRowKeys} = this.props;
data&&data.map((item,index)=>{
var itemMulti = classnames('item',(multi&&'multi'));
var itemContent = (
<div key={item.id} className={itemMulti}>
<div className='Checkbox-item'>{multi&&<CheckboxItem key={item.id} checked={selectRowKeys.indexOf(item.id)>-1?true:false} onChange={this.onChange.bind(this,item)}>
</CheckboxItem>}
</div>
<div className='boder-content' onClick={this.clickFile.bind(this,item)}>
<div className='left-content'>
{this.getFileType(item.type,item)}
</div>
<div className='content'>
<div className='filename'>{item.fileName}</div>
<div className='note-content'><div className='left'>{item.createtime}</div><div>{item.creator}</div></div>
</div>
{!multi&&<div className='right-content' onClick={this.operation.bind(this,item)}><Icon type="check-circle-o" size='xs'/></div>}
</div>
</div>
);
list.push(itemContent);
});
return list;
}
createRow(item, sectionID, rowID, highlightRow){
let {multi,selectAll,selectRowKeys} = this.props;
var itemMulti = classnames('item',(multi&&'multi'));
var itemContent = (
<div key={item.id} className={itemMulti}>
<div className='Checkbox-item'>{multi&&<CheckboxItem key={item.id} checked={selectRowKeys.indexOf(item.id)>-1?true:false} onChange={this.onChange.bind(this,item)}>
</CheckboxItem>}
</div>
<div className='boder-content' onClick={this.clickFile.bind(this,item)}>
<div className='left-content'>
{this.getFileType(item.type,item)}
</div>
<div className='content'>
<div className='filename'>{item.fileName}</div>
<div className='note-content'><div className='left'>{item.createtime}</div><div>{item.creator}</div></div>
</div>
{!multi&&<div className='right-content' onClick={this.operation.bind(this,item)}><Icon type="check-circle-o" size='xs'/></div>}
</div>
</div>
);
return itemContent;
}
onRefresh() {
this.setState({refreshing:true,isLoading:false});
if(this.props.onRefresh){
this.props.onRefresh();
}
}
render() {
let {height,refreshing} = this.state;
let {data} = this.props;
height = height-90;
return (
<ListView
ref={el => this.lv = el}
pageSize={10}
initialListSize={10}
dataSource={this.state.dataSource}
renderRow={(rowData, sectionID, rowID, highlightRow)=>this.createRow(rowData, sectionID, rowID, highlightRow)}
style={{height:'calc(100% - 80px)',overflow:'auto'}}
pullToRefresh={
<PullToRefresh
distanceToRefresh={25}
refreshing={refreshing}
onRefresh={this.onRefresh.bind(this)}/>
}/>
);
}
}
YYLibraryList.contextTypes={
router:PropTypes.object.isRequired,
location:PropTypes.object.isRequired
}
module.exports = YYLibraryList;