Large catalog optimization

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/components/dirent-grid-view/dirent-grid-view.js

@@ -61,10 +61,27 @@ class DirentGridView extends React.Component{
       isMutipleOperation: false,
       isGridItemFreezed: false,
       activeDirent: null,
+      direntItemsList: [],
+      itemIdex: 100,
     }
     this.isRepoOwner = props.currentRepoInfo.owner_email === username;
   }
 
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll, true);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    let direntItemsList = nextProps.direntList.filter((item, index) => {
+      return index < 100
+    })
+    this.setState({direntItemsList: direntItemsList, itemIdex: 100,})
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll, true);
+  }
+
   onCreateFileToggle = () => {
     this.setState({
       isCreateFileDialogShow: !this.state.isCreateFileDialogShow,
@@ -76,6 +93,22 @@ class DirentGridView extends React.Component{
     this.props.onGridItemClick(dirent);
   }
  
+  handleScroll = (e) => {
+    let target = e.target;
+    let itemIdex = this.state.itemIdex;
+
+    const { direntList } = this.props;
+
+   
+    if (target.scrollTop + document.documentElement.clientHeight - target.offsetTop >= target.scrollHeight) {
+      itemIdex += 100;
+      let direntItemsList = direntList.filter((item, index) => {
+        return index < itemIdex
+      })
+      this.setState({direntItemsList: direntItemsList, itemIdex: itemIdex})
+    }
+  }
+
   onMoveToggle = () => {
     this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
   }
@@ -477,15 +510,21 @@ 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 < 100
+    })
+
+    direntItemsList = this.state.direntItemsList.length === 0 ? direntItemsList : this.state.direntItemsList;
+
     if (this.props.isDirentListLoading) {
       return (<Loading />);
     }
   
     return (
       <Fragment>
-        <ul className="grid-view" onClick={this.gridContainerClick} onContextMenu={this.onGridContainerContextMenu} onMouseDown={this.onGridContainerMouseDown}>
+        <ul className="grid-view" onClick={this.gridContainerClick} onContextMenu={this.onGridContainerContextMenu} onMouseDown={this.onGridContainerMouseDown}  onScroll={this.handleScroll}>
           {
-            direntList.length !== 0 && direntList.map((dirent, index) => {
+            direntList.length !== 0 && direntItemsList.map((dirent, index) => {
               return (
                 <DirentGridItem
                   key={index}

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

@@ -65,6 +65,8 @@ class DirentListView extends React.Component {
       progress: 0,
       isMutipleOperation: true,
       activeDirent: null,
+      direntItemsList: [],
+      itemIdex: 100,
     };
 
     this.isRepoOwner = props.currentRepoInfo.owner_email === username;
@@ -82,6 +84,22 @@ class DirentListView extends React.Component {
     this.setState({isItemFreezed: true});
   }
 
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll, true);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    let direntItemsList = nextProps.direntList.filter((item, index) => {
+      return index < 100
+    })
+    this.setState({direntItemsList: direntItemsList, itemIdex: 100,})
+    
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll, true);
+  }
+
   unfreezeItem = () => {
     this.setState({isItemFreezed: false});
   }
@@ -521,9 +539,31 @@ class DirentListView extends React.Component {
     return [];
   }
 
+  handleScroll = (e) => {
+    let target = e.target;
+    let itemIdex = this.state.itemIdex;
+
+    const { direntList } = this.props;
+
+   
+    if (target.scrollTop + document.documentElement.clientHeight - target.offsetTop >= target.scrollHeight) {
+      itemIdex += 100;
+      let direntItemsList = direntList.filter((item, index) => {
+        return index < itemIdex
+      })
+      this.setState({direntItemsList: direntItemsList, itemIdex: itemIdex})
+    }
+  }
+
   render() {
     const { direntList, sortBy, sortOrder } = this.props;
 
+    let direntItemsList = direntList.filter((item, index) => {
+      return index < 100
+    })
+
+    direntItemsList = this.state.direntItemsList.length === 0 ? direntItemsList : this.state.direntItemsList
+
     if (this.props.isDirentListLoading) {
       return (<Loading />);
     }
@@ -534,7 +574,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}>
+      <div className="table-container" ref="table_container" onMouseDown={this.onContainerMouseDown} onContextMenu={this.onContainerContextMenu} onClick={this.onContainerClick} onScroll={this.handleScroll}>
         <table>
           <thead onMouseDown={this.onThreadMouseDown} onContextMenu={this.onThreadContextMenu}>
             <tr>
@@ -551,7 +591,7 @@ class DirentListView extends React.Component {
             </tr>
           </thead>
           <tbody>
-            {direntList.map((dirent, index) => {
+            {direntItemsList.map((dirent, index) => {
               return (
                 <DirentListItem
                   ref={this.setDirentItemRef(index)}

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

@@ -234,6 +234,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' && (