Merge pull request #3349 from haiwen/list-optimization

List optimization

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

@@ -248,12 +248,16 @@ class DirColumnNav extends React.Component {
     }));
   }
 
+  stopTreeScrollPropagation = (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.stopTreeScrollPropagation}>
           {this.props.isTreeDataLoading ? 
             (<Loading/>) :
             (<TreeView

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

@@ -29,6 +29,7 @@ const propTypes = {
   showShareBtn: PropTypes.bool.isRequired,
   showDirentDetail: PropTypes.func.isRequired,
   onAddFolder: PropTypes.func.isRequired,
+  onFileTagChanged: PropTypes.func,
 };
 
 class DirGridView extends React.Component {
@@ -53,6 +54,7 @@ class DirGridView extends React.Component {
             draftCounts={this.props.draftCounts}
             usedRepoTags={this.props.usedRepoTags}
             updateUsedRepoTags={this.props.updateUsedRepoTags}
+            onFileTagChanged={this.props.onFileTagChanged}
           />
         )}
         <DirentGridView

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

@@ -85,6 +85,7 @@ const propTypes = {
   showDirentDetail: PropTypes.func.isRequired,
   onDeleteRepoTag: PropTypes.func.isRequired,
   updateDetail: PropTypes.bool.isRequired,
+  onListContainerScroll: PropTypes.func.isRequired,
 };
 
 class LibContentContainer extends React.Component {
@@ -138,6 +139,13 @@ class LibContentContainer extends React.Component {
     this.props.onItemDelete(dirent);
   }
 
+  onItemsScroll = (e) => {
+    let target = e.target;
+    if (target.scrollTop + document.documentElement.clientHeight - target.offsetTop >= target.scrollHeight) {
+      this.props.onListContainerScroll();
+    }
+  }
+
   render() {
     let { path, repoID, usedRepoTags, readmeMarkdown, draftCounts } = this.props;
     let isRepoInfoBarShow = false;
@@ -165,7 +173,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.onItemsScroll}>
             {!this.props.pathExist && this.errMessage}
             {this.props.pathExist && (
               <Fragment>
@@ -234,6 +242,7 @@ class LibContentContainer extends React.Component {
                     onGridItemClick={this.onGridItemClick}
                     isDirentDetailShow={this.props.isDirentDetailShow}
                     onItemRename={this.props.onItemRename}
+                    onFileTagChanged={this.props.onFileTagChanged}
                   />
                 )}
                 {this.props.currentMode === 'column' && (

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

@@ -71,6 +71,7 @@ class LibContentView extends React.Component {
       errorMsg: '',
       isDirentDetailShow: false,
       updateDetail: false,
+      itemsShowLength: 100,
     };
 
     this.oldonpopstate = window.onpopstate;
@@ -404,6 +405,7 @@ class LibContentView extends React.Component {
       if (!this.state.repoEncrypted && direntList.length) {
         this.getThumbnails(repoID, path, this.state.direntList);
       }
+      this.resetShowLength();
     }).catch(() => {
       this.setState({
         isDirentListLoading: false,
@@ -412,6 +414,15 @@ class LibContentView extends React.Component {
     });
   }
 
+  onListContainerScroll = () => {
+    let itemsShowLength = this.state.itemsShowLength + 100;
+    this.setState({itemsShowLength: itemsShowLength});
+  }
+
+  resetShowLength = () => {
+    this.setState({itemsShowLength: 100});
+  }
+
   getThumbnails = (repoID, path, direntList) => {
     let items = direntList.filter((item) => {
       return Utils.imageCheck(item.name) && !item.encoded_thumbnail_src;
@@ -1336,6 +1347,10 @@ class LibContentView extends React.Component {
 
     }
 
+    let direntItemsList = this.state.direntList.filter((item, index) => {
+      return index < this.state.itemsShowLength;
+    })
+
     return (
       <div className="main-panel o-hidden">
         <div className="main-panel-north border-left-show">
@@ -1423,7 +1438,7 @@ class LibContentView extends React.Component {
             readmeMarkdown={this.state.readmeMarkdown}
             updateUsedRepoTags={this.updateUsedRepoTags}
             isDirentListLoading={this.state.isDirentListLoading}
-            direntList={this.state.direntList}
+            direntList={direntItemsList}
             showShareBtn={showShareBtn}
             sortBy={this.state.sortBy}
             sortOrder={this.state.sortOrder}
@@ -1453,6 +1468,7 @@ class LibContentView extends React.Component {
             onDeleteRepoTag={this.onDeleteRepoTag}
             onToolbarFileTagChanged={this.onToolbarFileTagChanged}
             updateDetail={this.state.updateDetail}
+            onListContainerScroll={this.onListContainerScroll}
           />
           {this.state.pathExist && !this.state.isViewFile && (
             <FileUploader