mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-20 10:58:33 +00:00
optimization code
This commit is contained in:
@@ -248,12 +248,16 @@ class DirColumnNav extends React.Component {
|
||||
}));
|
||||
}
|
||||
|
||||
handleScroll = (e) => {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
render() {
|
||||
let flex = this.props.navRate ? '0 0 ' + this.props.navRate * 100 + '%' : '0 0 25%';
|
||||
const select = this.props.inResizing ? 'none' : '';
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="dir-content-nav" role="navigation" style={{flex: (flex), userSelect: select}}>
|
||||
<div className="dir-content-nav" role="navigation" style={{flex: (flex), userSelect: select}} onScroll={this.handleScroll}>
|
||||
{this.props.isTreeDataLoading ?
|
||||
(<Loading/>) :
|
||||
(<TreeView
|
||||
|
@@ -67,8 +67,6 @@ const propTypes = {
|
||||
onItemsCopy: PropTypes.func.isRequired,
|
||||
onItemsDelete: PropTypes.func.isRequired,
|
||||
onFileTagChanged: PropTypes.func,
|
||||
onPageScroll: PropTypes.func.isRequired,
|
||||
itemShownLimit: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
class DirColumnView extends React.Component {
|
||||
@@ -226,8 +224,6 @@ class DirColumnView extends React.Component {
|
||||
onItemsCopy={this.props.onItemsCopy}
|
||||
onItemsDelete={this.props.onItemsDelete}
|
||||
onFileTagChanged={this.props.onFileTagChanged}
|
||||
itemShownLimit={this.props.itemShownLimit}
|
||||
onPageScroll={this.props.onPageScroll}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
@@ -30,8 +30,6 @@ const propTypes = {
|
||||
showDirentDetail: PropTypes.func.isRequired,
|
||||
onAddFolder: PropTypes.func.isRequired,
|
||||
onFileTagChanged: PropTypes.func,
|
||||
onPageScroll: PropTypes.func.isRequired,
|
||||
itemShownLimit: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
class DirGridView extends React.Component {
|
||||
@@ -80,8 +78,6 @@ class DirGridView extends React.Component {
|
||||
isDirentDetailShow={this.props.isDirentDetailShow}
|
||||
onItemRename={this.props.onItemRename}
|
||||
onAddFolder={this.props.onAddFolder}
|
||||
itemShownLimit={this.props.itemShownLimit}
|
||||
onPageScroll={this.props.onPageScroll}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
|
@@ -38,8 +38,6 @@ const propTypes = {
|
||||
onItemsCopy: PropTypes.func.isRequired,
|
||||
onItemsDelete: PropTypes.func.isRequired,
|
||||
onFileTagChanged: PropTypes.func,
|
||||
onPageScroll: PropTypes.func.isRequired,
|
||||
itemShownLimit: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
class DirListView extends React.Component {
|
||||
@@ -99,8 +97,6 @@ class DirListView extends React.Component {
|
||||
onAddFile={this.props.onAddFile}
|
||||
onAddFolder={this.props.onAddFolder}
|
||||
onFileTagChanged={this.props.onFileTagChanged}
|
||||
itemShownLimit={this.props.itemShownLimit}
|
||||
onPageScroll={this.props.onPageScroll}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
|
@@ -40,8 +40,6 @@ const propTypes = {
|
||||
isDirentDetailShow: PropTypes.bool.isRequired,
|
||||
onGridItemClick: PropTypes.func,
|
||||
onAddFolder: PropTypes.func.isRequired,
|
||||
onPageScroll: PropTypes.func.isRequired,
|
||||
itemShownLimit: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
class DirentGridView extends React.Component{
|
||||
@@ -63,25 +61,10 @@ class DirentGridView extends React.Component{
|
||||
isMutipleOperation: false,
|
||||
isGridItemFreezed: false,
|
||||
activeDirent: null,
|
||||
itemIdex: 100,
|
||||
}
|
||||
this.isRepoOwner = props.currentRepoInfo.owner_email === username;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('scroll', this.gridViewScroll, true);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (this.props.itemShownLimit) {
|
||||
this.setState({itemIdex: 100});
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('scroll', this.gridViewScroll, true);
|
||||
}
|
||||
|
||||
onCreateFileToggle = () => {
|
||||
this.setState({
|
||||
isCreateFileDialogShow: !this.state.isCreateFileDialogShow,
|
||||
@@ -92,17 +75,6 @@ class DirentGridView extends React.Component{
|
||||
this.setState({activeDirent: dirent});
|
||||
this.props.onGridItemClick(dirent);
|
||||
}
|
||||
|
||||
gridViewScroll = (e) => {
|
||||
let target = e.target;
|
||||
let itemIdex = this.state.itemIdex;
|
||||
|
||||
if (target.scrollTop + document.documentElement.clientHeight - target.offsetTop >= target.scrollHeight) {
|
||||
itemIdex += 100
|
||||
this.setState({itemIdex: itemIdex})
|
||||
}
|
||||
this.props.onPageScroll();
|
||||
}
|
||||
|
||||
onMoveToggle = () => {
|
||||
this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
|
||||
@@ -505,19 +477,15 @@ class DirentGridView extends React.Component{
|
||||
let dirent = this.state.activeDirent ? this.state.activeDirent : '';
|
||||
let direntPath = Utils.joinPath(path, dirent.name);
|
||||
|
||||
let direntItemsList = direntList.filter((item, index) => {
|
||||
return index < this.state.itemIdex;
|
||||
})
|
||||
|
||||
if (this.props.isDirentListLoading) {
|
||||
return (<Loading />);
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<ul className="grid-view" onClick={this.gridContainerClick} onContextMenu={this.onGridContainerContextMenu} onMouseDown={this.onGridContainerMouseDown} onScroll={this.gridViewScroll}>
|
||||
<ul className="grid-view" onClick={this.gridContainerClick} onContextMenu={this.onGridContainerContextMenu} onMouseDown={this.onGridContainerMouseDown}>
|
||||
{
|
||||
direntItemsList.map((dirent, index) => {
|
||||
direntList.map((dirent, index) => {
|
||||
return (
|
||||
<DirentGridItem
|
||||
key={index}
|
||||
|
@@ -45,8 +45,6 @@ const propTypes = {
|
||||
onItemsCopy: PropTypes.func.isRequired,
|
||||
onItemsDelete: PropTypes.func.isRequired,
|
||||
onFileTagChanged: PropTypes.func,
|
||||
onPageScroll: PropTypes.func.isRequired,
|
||||
itemShownLimit: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
class DirentListView extends React.Component {
|
||||
@@ -67,7 +65,6 @@ class DirentListView extends React.Component {
|
||||
progress: 0,
|
||||
isMutipleOperation: true,
|
||||
activeDirent: null,
|
||||
itemIdex: 100,
|
||||
};
|
||||
|
||||
this.isRepoOwner = props.currentRepoInfo.owner_email === username;
|
||||
@@ -81,20 +78,6 @@ class DirentListView extends React.Component {
|
||||
this.zipToken = null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('scroll', this.listViewScroll, true);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (this.props.itemShownLimit) {
|
||||
this.setState({itemIdex: 100})
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('scroll', this.listViewScroll, true);
|
||||
}
|
||||
|
||||
freezeItem = () => {
|
||||
this.setState({isItemFreezed: true});
|
||||
}
|
||||
@@ -147,17 +130,6 @@ class DirentListView extends React.Component {
|
||||
this.props.sortItems(sortBy, sortOrder);
|
||||
}
|
||||
|
||||
listViewScroll = (e) => {
|
||||
let target = e.target;
|
||||
let itemIdex = this.state.itemIdex;
|
||||
|
||||
if (target.scrollTop + document.documentElement.clientHeight - target.offsetTop >= target.scrollHeight) {
|
||||
itemIdex += 100
|
||||
this.setState({itemIdex: itemIdex})
|
||||
}
|
||||
this.props.onPageScroll();
|
||||
}
|
||||
|
||||
// for image popup
|
||||
prepareImageItem = (item) => {
|
||||
const useThumbnail = !this.repoEncrypted;
|
||||
@@ -551,11 +523,6 @@ class DirentListView extends React.Component {
|
||||
|
||||
render() {
|
||||
const { direntList, sortBy, sortOrder } = this.props;
|
||||
|
||||
let direntItemsList = direntList.filter((item, index) => {
|
||||
return index < this.state.itemIdex;
|
||||
})
|
||||
|
||||
if (this.props.isDirentListLoading) {
|
||||
return (<Loading />);
|
||||
}
|
||||
@@ -566,7 +533,7 @@ class DirentListView extends React.Component {
|
||||
const sortIcon = sortOrder == 'asc' ? <span className="fas fa-caret-up"></span> : <span className="fas fa-caret-down"></span>;
|
||||
|
||||
return (
|
||||
<div className="table-container" onMouseDown={this.onContainerMouseDown} onContextMenu={this.onContainerContextMenu} onClick={this.onContainerClick} onScroll={this.listViewScroll}>
|
||||
<div className="table-container" onMouseDown={this.onContainerMouseDown} onContextMenu={this.onContainerContextMenu} onClick={this.onContainerClick}>
|
||||
<table>
|
||||
<thead onMouseDown={this.onThreadMouseDown} onContextMenu={this.onThreadContextMenu}>
|
||||
<tr>
|
||||
@@ -583,7 +550,7 @@ class DirentListView extends React.Component {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{direntItemsList.map((dirent, index) => {
|
||||
{direntList.map((dirent, index) => {
|
||||
return (
|
||||
<DirentListItem
|
||||
ref={this.setDirentItemRef(index)}
|
||||
|
Reference in New Issue
Block a user