optimization code

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

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

frontend/src/components/dir-view-mode/dir-column-view.js

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

frontend/src/components/dir-view-mode/dir-grid-view.js

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

frontend/src/components/dir-view-mode/dir-list-view.js

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

frontend/src/components/dirent-grid-view/dirent-grid-view.js

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

frontend/src/components/dirent-list-view/dirent-list-view.js

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

frontend/src/pages/lib-content-view/lib-content-container.js

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