1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-07-19 17:39:39 +00:00
seahub/frontend/src/components/tree-dir-view/tree-dir-view.js

140 lines
4.1 KiB
JavaScript
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
import { gettext, repoID } from '../../utils/constants';
2018-09-29 07:47:53 +00:00
import editorUtilities from '../../utils/editor-utilties';
import URLDecorator from '../../utils/url-decorator';
import ZipDownloadDialog from '../dialog/zip-download-dialog';
import TreeDirList from './tree-dir-list';
const propTypes = {
needOperationGroup: PropTypes.bool.isRequired,
node: PropTypes.object.isRequired,
onMainNodeClick: PropTypes.func.isRequired,
onDeleteItem: PropTypes.func.isRequired,
}
2018-09-04 09:16:50 +00:00
class TreeDirView extends React.Component {
2018-09-29 07:47:53 +00:00
constructor(props) {
super(props);
this.state = {
isProgressDialogShow: false,
progress: '0%',
isItemFreezed: false
};
this.zip_token = null;
this.interval = null;
}
onDownload = (item) => {
if (item.isDir()) {
this.setState({isProgressDialogShow: true, progress: '0%'});
editorUtilities.zipDownload(item.parent_path, item.name).then(res => {
this.zip_token = res.data['zip_token'];
this.addDownloadAnimation();
this.interval = setInterval(this.addDownloadAnimation, 1000);
});
} else {
let url = URLDecorator.getUrl({type:'download_file_url', repoID: repoID, filePath: item.path});
location.href = url;
}
}
addDownloadAnimation = () => {
let _this = this;
let token = this.zip_token;
editorUtilities.queryZipProgress(token).then(res => {
let data = res.data;
let progress = data.total === 0 ? '100%' : (data.zipped / data.total * 100).toFixed(0) + '%';
this.setState({progress: progress});
if (data['total'] === data['zipped']) {
this.setState({
progress: '100%'
});
clearInterval(this.interval);
location.href = URLDecorator.getUrl({type: 'download_dir_zip_url', token: token});
setTimeout(function() {
_this.setState({isProgressDialogShow: false});
}, 500);
}
});
}
onCancelDownload = () => {
let zip_token = this.zip_token;
editorUtilities.cancelZipTask(zip_token).then(res => {
this.setState({
isProgressDialogShow: false,
});
});
2018-09-29 07:47:53 +00:00
}
onItemMenuShow = () => {
this.setState({
isItemFreezed: true,
});
2018-09-29 07:47:53 +00:00
}
onItemMenuHide = () => {
this.setState({
isItemFreezed: false,
});
}
2018-09-04 09:16:50 +00:00
render() {
let node = this.props.node;
let children = node.hasChildren() ? node.children : null;
return (
2018-09-21 06:16:15 +00:00
<div className="table-container">
<table>
<thead>
{this.props.needOperationGroup ?
2018-09-29 07:47:53 +00:00
<tr>
<th style={{width: '4%'}}></th>
<th style={{width: '46%'}}>{gettext('Name')}</th>
<th style={{width: '20%'}}></th>
<th style={{width: '15%'}}>{gettext('Size')}</th>
<th style={{width: '15%'}}>{gettext('Last Update')}</th>
2018-09-29 07:47:53 +00:00
</tr>
:
<tr>
<th style={{width: '4%'}}></th>
<th style={{width: '66%'}}>{gettext('Name')}</th>
<th style={{width: '15%'}}>{gettext('Size')}</th>
<th style={{width: '15%'}}>{gettext('Last Update')}</th>
2018-09-29 07:47:53 +00:00
</tr>
}
2018-09-21 06:16:15 +00:00
</thead>
<tbody>
{children && children.map((node, index) => {
return (
2018-09-29 07:47:53 +00:00
<TreeDirList
key={index}
node={node}
isItemFreezed={this.state.isItemFreezed}
onMainNodeClick={this.props.onMainNodeClick}
onItemMenuShow={this.onItemMenuShow}
onItemMenuHide={this.onItemMenuHide}
onDownload={this.onDownload}
onDelete={this.props.onDeleteItem}
needOperationGroup={this.props.needOperationGroup}
/>
);
2018-09-21 06:16:15 +00:00
})}
</tbody>
</table>
2018-09-29 07:47:53 +00:00
{
this.state.isProgressDialogShow &&
<ZipDownloadDialog progress={this.state.progress} onCancleDownload={this.onCancelDownload}/>
}
2018-09-21 06:16:15 +00:00
</div>
);
2018-09-04 09:16:50 +00:00
}
}
TreeDirView.propTypes = propTypes;
2018-09-04 09:16:50 +00:00
export default TreeDirView;