haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-04 16:31:13 +00:00
Code Issues Releases Wiki Activity

optimization code

Browse Source
This commit is contained in:
zxj96
2019-04-24 10:10:28 +08:00
parent 978288eb39
commit 301effa623
7 changed files with 35 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/dir-view-mode/dir-column-nav.js
View File

@@ -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

4
frontend/src/components/dir-view-mode/dir-column-view.js
View File

@@ -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>

4
frontend/src/components/dir-view-mode/dir-grid-view.js
View File

@@ -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>
);

4
frontend/src/components/dir-view-mode/dir-list-view.js
View File

@@ -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>
);

36
frontend/src/components/dirent-grid-view/dirent-grid-view.js
View File

@@ -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,
@@ -93,17 +76,6 @@ class DirentGridView extends React.Component{
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}

37
frontend/src/components/dirent-list-view/dirent-list-view.js
View File

@@ -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)}

31
frontend/src/pages/lib-content-view/lib-content-container.js
View File

@@ -95,6 +95,7 @@ class LibContentContainer extends React.Component {
super(props);
this.state = {
currentDirent: null,
itemShowLength: 100,
};
this.errMessage = (<div className="message err-tip">{gettext('Folder does not exist.')}</div>);
@@ -104,6 +105,11 @@ class LibContentContainer extends React.Component {
if (nextProps.path !== this.props.path || nextProps.updateDetail !== this.props.updateDetail) {
this.setState({currentDirent: null});
}
if (this.props.itemShownLimit) {
this.setState({itemShowLength: 100})
}
}
onPathClick = (path) => {
@@ -140,8 +146,19 @@ class LibContentContainer extends React.Component {
this.props.onItemDelete(dirent);
}
onFileScroll = (e) => {
let target = e.target;
let itemShowLength = this.state.itemShowLength;
if (target.scrollTop + document.documentElement.clientHeight - target.offsetTop >= target.scrollHeight) {
itemShowLength += 100;
this.setState({itemShowLength: itemShowLength});
}
this.props.onPageScroll();
}
render() {
let { path, repoID, usedRepoTags, readmeMarkdown, draftCounts } = this.props;
let { path, repoID, usedRepoTags, readmeMarkdown, draftCounts, direntList } = this.props;
let isRepoInfoBarShow = false;
if (path === '/') {
if (usedRepoTags.length !== 0 || readmeMarkdown !== null || draftCounts !== 0) {
@@ -149,6 +166,10 @@ class LibContentContainer extends React.Component {
}
}
let direntItemsList = direntList.filter((item, index) => {
return index < this.state.itemShowLength;
})
return (
<Fragment>
<div className="cur-view-container">
@@ -167,7 +188,7 @@ class LibContentContainer extends React.Component {
onDeleteRepoTag={this.props.onDeleteRepoTag}
/>
</div>
<div className={`cur-view-content lib-content-container ${this.props.currentMode === 'column' ? 'view-mode-container' : ''}`}>
<div className={`cur-view-content lib-content-container ${this.props.currentMode === 'column' ? 'view-mode-container' : ''}`} onScroll={this.onFileScroll}>
{!this.props.pathExist && this.errMessage}
{this.props.pathExist && (
<Fragment>
@@ -184,7 +205,7 @@ class LibContentContainer extends React.Component {
draftCounts={this.props.draftCounts}
updateUsedRepoTags={this.props.updateUsedRepoTags}
isDirentListLoading={this.props.isDirentListLoading}
direntList={this.props.direntList}
direntList={direntItemsList}
showShareBtn={this.props.showShareBtn}
sortBy={this.props.sortBy}
sortOrder={this.props.sortOrder}
@@ -225,7 +246,7 @@ class LibContentContainer extends React.Component {
draftCounts={this.props.draftCounts}
updateUsedRepoTags={this.props.updateUsedRepoTags}
isDirentListLoading={this.props.isDirentListLoading}
direntList={this.props.direntList}
direntList={direntItemsList}
onAddFile={this.props.onAddFile}
onItemClick={this.onItemClick}
onItemDelete={this.props.onItemDelete}
@@ -279,7 +300,7 @@ class LibContentContainer extends React.Component {
draftCounts={this.props.draftCounts}
updateUsedRepoTags={this.props.updateUsedRepoTags}
isDirentListLoading={this.props.isDirentListLoading}
direntList={this.props.direntList}
direntList={direntItemsList}
showShareBtn={this.props.showShareBtn}
sortBy={this.props.sortBy}
sortOrder={this.props.sortOrder}