From 002c3a0dccd6caa3c8a1bc0936c6260176eeb320 Mon Sep 17 00:00:00 2001 From: zxj96 <519213124@qq.com> Date: Mon, 22 Apr 2019 18:34:36 +0800 Subject: [PATCH 01/16] Large catalog optimization --- .../components/dir-view-mode/dir-grid-view.js | 2 + .../dirent-grid-view/dirent-grid-view.js | 43 +++++++++++++++++- .../dirent-list-view/dirent-list-view.js | 44 ++++++++++++++++++- .../lib-content-view/lib-content-container.js | 1 + 4 files changed, 86 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/dir-view-mode/dir-grid-view.js b/frontend/src/components/dir-view-mode/dir-grid-view.js index d8e7a0fb2a..4b6834b234 100644 --- a/frontend/src/components/dir-view-mode/dir-grid-view.js +++ b/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} /> )} { + 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 (); } return ( -
    +
      { - direntList.length !== 0 && direntList.map((dirent, index) => { + direntList.length !== 0 && direntItemsList.map((dirent, index) => { return ( { + 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 (); } @@ -534,7 +574,7 @@ class DirentListView extends React.Component { const sortIcon = sortOrder == 'asc' ? : ; return ( -
      +
      @@ -551,7 +591,7 @@ class DirentListView extends React.Component { - {direntList.map((dirent, index) => { + {direntItemsList.map((dirent, index) => { return ( )} {this.props.currentMode === 'column' && ( From 624871fc9c9f9b990750d8f513604f2e9a0c3042 Mon Sep 17 00:00:00 2001 From: zxj96 <519213124@qq.com> Date: Tue, 23 Apr 2019 14:43:47 +0800 Subject: [PATCH 02/16] Use state change directory array --- .../dir-view-mode/dir-column-view.js | 4 +++ .../components/dir-view-mode/dir-grid-view.js | 4 +++ .../components/dir-view-mode/dir-list-view.js | 4 +++ .../dirent-grid-view/dirent-grid-view.js | 25 +++++++----------- .../dirent-list-view/dirent-list-view.js | 26 +++++++------------ .../lib-content-view/lib-content-container.js | 8 ++++++ .../lib-content-view/lib-content-view.js | 12 +++++++++ 7 files changed, 50 insertions(+), 33 deletions(-) diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js index 21210f2854..d5c56f82a1 100644 --- a/frontend/src/components/dir-view-mode/dir-column-view.js +++ b/frontend/src/components/dir-view-mode/dir-column-view.js @@ -67,6 +67,8 @@ const propTypes = { onItemsCopy: PropTypes.func.isRequired, onItemsDelete: PropTypes.func.isRequired, onFileTagChanged: PropTypes.func, + scrollPage: PropTypes.func.isRequired, + isCurrentPage: PropTypes.bool.isRequired, }; class DirColumnView extends React.Component { @@ -224,6 +226,8 @@ class DirColumnView extends React.Component { onItemsCopy={this.props.onItemsCopy} onItemsDelete={this.props.onItemsDelete} onFileTagChanged={this.props.onFileTagChanged} + isCurrentPage={this.props.isCurrentPage} + scrollPage={this.props.scrollPage} /> )} diff --git a/frontend/src/components/dir-view-mode/dir-grid-view.js b/frontend/src/components/dir-view-mode/dir-grid-view.js index 4b6834b234..ce99ed572d 100644 --- a/frontend/src/components/dir-view-mode/dir-grid-view.js +++ b/frontend/src/components/dir-view-mode/dir-grid-view.js @@ -30,6 +30,8 @@ const propTypes = { showDirentDetail: PropTypes.func.isRequired, onAddFolder: PropTypes.func.isRequired, onFileTagChanged: PropTypes.func, + scrollPage: PropTypes.func.isRequired, + isCurrentPage: PropTypes.bool.isRequired }; class DirGridView extends React.Component { @@ -78,6 +80,8 @@ class DirGridView extends React.Component { isDirentDetailShow={this.props.isDirentDetailShow} onItemRename={this.props.onItemRename} onAddFolder={this.props.onAddFolder} + isCurrentPage={this.props.isCurrentPage} + scrollPage={this.props.scrollPage} /> ); diff --git a/frontend/src/components/dir-view-mode/dir-list-view.js b/frontend/src/components/dir-view-mode/dir-list-view.js index 174223fabf..8f50022eb6 100644 --- a/frontend/src/components/dir-view-mode/dir-list-view.js +++ b/frontend/src/components/dir-view-mode/dir-list-view.js @@ -38,6 +38,8 @@ const propTypes = { onItemsCopy: PropTypes.func.isRequired, onItemsDelete: PropTypes.func.isRequired, onFileTagChanged: PropTypes.func, + scrollPage: PropTypes.func.isRequired, + isCurrentPage: PropTypes.bool.isRequired }; class DirListView extends React.Component { @@ -97,6 +99,8 @@ class DirListView extends React.Component { onAddFile={this.props.onAddFile} onAddFolder={this.props.onAddFolder} onFileTagChanged={this.props.onFileTagChanged} + isCurrentPage={this.props.isCurrentPage} + scrollPage={this.props.scrollPage} /> ); diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js index 0c4c866a9f..8f210a3f84 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js +++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js @@ -40,6 +40,8 @@ const propTypes = { isDirentDetailShow: PropTypes.bool.isRequired, onGridItemClick: PropTypes.func, onAddFolder: PropTypes.func.isRequired, + scrollPage: PropTypes.func.isRequired, + isCurrentPage: PropTypes.bool.isRequired }; class DirentGridView extends React.Component{ @@ -61,7 +63,6 @@ class DirentGridView extends React.Component{ isMutipleOperation: false, isGridItemFreezed: false, activeDirent: null, - direntItemsList: [], itemIdex: 100, } this.isRepoOwner = props.currentRepoInfo.owner_email === username; @@ -72,10 +73,9 @@ class DirentGridView extends React.Component{ } componentWillReceiveProps(nextProps) { - let direntItemsList = nextProps.direntList.filter((item, index) => { - return index < 100 - }) - this.setState({direntItemsList: direntItemsList, itemIdex: 100,}) + if (this.props.isCurrentPage) { + this.setState({itemIdex: 100}) + } } componentWillUnmount() { @@ -97,16 +97,11 @@ class DirentGridView extends React.Component{ 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}) + itemIdex += 100 + this.setState({itemIdex: itemIdex}) } + this.props.scrollPage(); } onMoveToggle = () => { @@ -511,11 +506,9 @@ class DirentGridView extends React.Component{ let direntPath = Utils.joinPath(path, dirent.name); let direntItemsList = direntList.filter((item, index) => { - return index < 100 + return index < this.state.itemIdex; }) - direntItemsList = this.state.direntItemsList.length === 0 ? direntItemsList : this.state.direntItemsList; - if (this.props.isDirentListLoading) { return (); } diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js index 39985e3185..fc3e736de4 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-view.js +++ b/frontend/src/components/dirent-list-view/dirent-list-view.js @@ -45,6 +45,8 @@ const propTypes = { onItemsCopy: PropTypes.func.isRequired, onItemsDelete: PropTypes.func.isRequired, onFileTagChanged: PropTypes.func, + scrollPage: PropTypes.func.isRequired, + isCurrentPage: PropTypes.bool.isRequired, }; class DirentListView extends React.Component { @@ -65,7 +67,6 @@ class DirentListView extends React.Component { progress: 0, isMutipleOperation: true, activeDirent: null, - direntItemsList: [], itemIdex: 100, }; @@ -89,11 +90,9 @@ class DirentListView extends React.Component { } componentWillReceiveProps(nextProps) { - let direntItemsList = nextProps.direntList.filter((item, index) => { - return index < 100 - }) - this.setState({direntItemsList: direntItemsList, itemIdex: 100,}) - + if (this.props.isCurrentPage) { + this.setState({itemIdex: 100}) + } } componentWillUnmount() { @@ -543,27 +542,20 @@ class DirentListView extends React.Component { 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}) + itemIdex += 100 + this.setState({itemIdex: itemIdex}) } + this.props.scrollPage(); } render() { const { direntList, sortBy, sortOrder } = this.props; let direntItemsList = direntList.filter((item, index) => { - return index < 100 + return index < this.state.itemIdex; }) - direntItemsList = this.state.direntItemsList.length === 0 ? direntItemsList : this.state.direntItemsList - if (this.props.isDirentListLoading) { return (); } diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js index 88246606ff..700e8d200b 100644 --- a/frontend/src/pages/lib-content-view/lib-content-container.js +++ b/frontend/src/pages/lib-content-view/lib-content-container.js @@ -85,6 +85,8 @@ const propTypes = { showDirentDetail: PropTypes.func.isRequired, onDeleteRepoTag: PropTypes.func.isRequired, updateDetail: PropTypes.bool.isRequired, + scrollPage: PropTypes.func.isRequired, + isCurrentPage: PropTypes.bool.isRequired }; class LibContentContainer extends React.Component { @@ -204,6 +206,8 @@ class LibContentContainer extends React.Component { onItemsCopy={this.props.onItemsCopy} onItemsDelete={this.props.onItemsDelete} onFileTagChanged={this.props.onFileTagChanged} + isCurrentPage={this.props.isCurrentPage} + scrollPage={this.props.scrollPage} /> )} {this.props.currentMode === 'grid' && ( @@ -235,6 +239,8 @@ class LibContentContainer extends React.Component { isDirentDetailShow={this.props.isDirentDetailShow} onItemRename={this.props.onItemRename} onFileTagChanged={this.props.onFileTagChanged} + isCurrentPage={this.props.isCurrentPage} + scrollPage={this.props.scrollPage} /> )} {this.props.currentMode === 'column' && ( @@ -295,6 +301,8 @@ class LibContentContainer extends React.Component { onItemsCopy={this.props.onItemsCopy} onItemsDelete={this.props.onItemsDelete} onFileTagChanged={this.props.onFileTagChanged} + isCurrentPage={this.props.isCurrentPage} + scrollPage={this.props.scrollPage} /> )} diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js index 44b29754f0..81ba1d6807 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -71,6 +71,7 @@ class LibContentView extends React.Component { errorMsg: '', isDirentDetailShow: false, updateDetail: false, + isCurrentPage: false, }; window.onpopstate = this.onpopstate; @@ -402,6 +403,7 @@ class LibContentView extends React.Component { if (!this.state.repoEncrypted && direntList.length) { this.getThumbnails(repoID, path, this.state.direntList); } + this.switchPage(); }).catch(() => { this.setState({ isDirentListLoading: false, @@ -410,6 +412,14 @@ class LibContentView extends React.Component { }); } + scrollPage = () => { + this.setState({isCurrentPage: false}) + } + + switchPage = () => { + this.setState({isCurrentPage: true}) + } + getThumbnails = (repoID, path, direntList) => { let items = direntList.filter((item) => { return Utils.imageCheck(item.name) && !item.encoded_thumbnail_src; @@ -1451,6 +1461,8 @@ class LibContentView extends React.Component { onDeleteRepoTag={this.onDeleteRepoTag} onToolbarFileTagChanged={this.onToolbarFileTagChanged} updateDetail={this.state.updateDetail} + isCurrentPage={this.state.isCurrentPage} + scrollPage={this.scrollPage} /> {this.state.pathExist && !this.state.isViewFile && ( Date: Tue, 23 Apr 2019 15:32:11 +0800 Subject: [PATCH 03/16] Modify some naming --- .../src/components/dirent-grid-view/dirent-grid-view.js | 8 ++++---- .../src/components/dirent-list-view/dirent-list-view.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js index 8f210a3f84..ec8d921b54 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js +++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js @@ -69,7 +69,7 @@ class DirentGridView extends React.Component{ } componentDidMount() { - window.addEventListener('scroll', this.handleScroll, true); + window.addEventListener('scroll', this.gridViewScroll, true); } componentWillReceiveProps(nextProps) { @@ -79,7 +79,7 @@ class DirentGridView extends React.Component{ } componentWillUnmount() { - window.removeEventListener('scroll', this.handleScroll, true); + window.removeEventListener('scroll', this.gridViewScroll, true); } onCreateFileToggle = () => { @@ -93,7 +93,7 @@ class DirentGridView extends React.Component{ this.props.onGridItemClick(dirent); } - handleScroll = (e) => { + gridViewScroll = (e) => { let target = e.target; let itemIdex = this.state.itemIdex; @@ -515,7 +515,7 @@ class DirentGridView extends React.Component{ return ( -
        +
          { direntList.length !== 0 && direntItemsList.map((dirent, index) => { return ( diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js index fc3e736de4..4ba127f393 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-view.js +++ b/frontend/src/components/dirent-list-view/dirent-list-view.js @@ -86,7 +86,7 @@ class DirentListView extends React.Component { } componentDidMount() { - window.addEventListener('scroll', this.handleScroll, true); + window.addEventListener('scroll', this.listViewScroll, true); } componentWillReceiveProps(nextProps) { @@ -96,7 +96,7 @@ class DirentListView extends React.Component { } componentWillUnmount() { - window.removeEventListener('scroll', this.handleScroll, true); + window.removeEventListener('scroll', this.listViewScroll, true); } unfreezeItem = () => { @@ -538,7 +538,7 @@ class DirentListView extends React.Component { return []; } - handleScroll = (e) => { + listViewScroll = (e) => { let target = e.target; let itemIdex = this.state.itemIdex; @@ -566,7 +566,7 @@ class DirentListView extends React.Component { const sortIcon = sortOrder == 'asc' ? : ; return ( -
          +
      From 42362e9ece0a17916a582da941656d37892b6a21 Mon Sep 17 00:00:00 2001 From: zxj96 <519213124@qq.com> Date: Tue, 23 Apr 2019 15:51:47 +0800 Subject: [PATCH 04/16] delete ref --- frontend/src/components/dirent-list-view/dirent-list-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js index 4ba127f393..7ea9a58dcf 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-view.js +++ b/frontend/src/components/dirent-list-view/dirent-list-view.js @@ -566,7 +566,7 @@ class DirentListView extends React.Component { const sortIcon = sortOrder == 'asc' ? : ; return ( -
      +
      From 7245d9dcc59303b531897e83de8947acc58fa37a Mon Sep 17 00:00:00 2001 From: zxj96 <519213124@qq.com> Date: Tue, 23 Apr 2019 15:58:06 +0800 Subject: [PATCH 05/16] modify state --- .../dirent-grid-view/dirent-grid-view.js | 2 +- .../dirent-list-view/dirent-list-view.js | 32 +++++++++---------- .../lib-content-view/lib-content-view.js | 6 ++-- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js index ec8d921b54..7f3cae8621 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js +++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js @@ -73,7 +73,7 @@ class DirentGridView extends React.Component{ } componentWillReceiveProps(nextProps) { - if (this.props.isCurrentPage) { + if (!this.props.isCurrentPage) { this.setState({itemIdex: 100}) } } diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js index 7ea9a58dcf..fd44daa469 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-view.js +++ b/frontend/src/components/dirent-list-view/dirent-list-view.js @@ -81,16 +81,12 @@ class DirentListView extends React.Component { this.zipToken = null; } - freezeItem = () => { - this.setState({isItemFreezed: true}); - } - componentDidMount() { window.addEventListener('scroll', this.listViewScroll, true); } componentWillReceiveProps(nextProps) { - if (this.props.isCurrentPage) { + if (!this.props.isCurrentPage) { this.setState({itemIdex: 100}) } } @@ -99,6 +95,10 @@ class DirentListView extends React.Component { window.removeEventListener('scroll', this.listViewScroll, true); } + freezeItem = () => { + this.setState({isItemFreezed: true}); + } + unfreezeItem = () => { this.setState({isItemFreezed: false}); } @@ -147,6 +147,17 @@ 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.scrollPage(); + } + // for image popup prepareImageItem = (item) => { const useThumbnail = !this.repoEncrypted; @@ -538,17 +549,6 @@ class DirentListView extends React.Component { return []; } - 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.scrollPage(); - } - render() { const { direntList, sortBy, sortOrder } = this.props; diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js index 81ba1d6807..ba99eb17d8 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -71,7 +71,7 @@ class LibContentView extends React.Component { errorMsg: '', isDirentDetailShow: false, updateDetail: false, - isCurrentPage: false, + isCurrentPage: true, }; window.onpopstate = this.onpopstate; @@ -413,11 +413,11 @@ class LibContentView extends React.Component { } scrollPage = () => { - this.setState({isCurrentPage: false}) + this.setState({isCurrentPage: true}) } switchPage = () => { - this.setState({isCurrentPage: true}) + this.setState({isCurrentPage: false}) } getThumbnails = (repoID, path, direntList) => { From 791713a74626abcc1efd6092bd5ee4bc4e141a2c Mon Sep 17 00:00:00 2001 From: zxj96 <519213124@qq.com> Date: Tue, 23 Apr 2019 16:04:28 +0800 Subject: [PATCH 06/16] delete direntList.lenght to dirent-grid-view.js --- frontend/src/components/dirent-grid-view/dirent-grid-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js index 7f3cae8621..f786e49544 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js +++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js @@ -517,7 +517,7 @@ class DirentGridView extends React.Component{
        { - direntList.length !== 0 && direntItemsList.map((dirent, index) => { + direntItemsList.map((dirent, index) => { return ( Date: Tue, 23 Apr 2019 16:50:17 +0800 Subject: [PATCH 07/16] Modify some naming conventions --- .../components/dir-view-mode/dir-column-view.js | 8 ++++---- .../components/dir-view-mode/dir-grid-view.js | 8 ++++---- .../components/dir-view-mode/dir-list-view.js | 8 ++++---- .../dirent-grid-view/dirent-grid-view.js | 10 +++++----- .../dirent-list-view/dirent-list-view.js | 8 ++++---- .../lib-content-view/lib-content-container.js | 16 ++++++++-------- .../pages/lib-content-view/lib-content-view.js | 16 ++++++++-------- 7 files changed, 37 insertions(+), 37 deletions(-) diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js index d5c56f82a1..eb19c35d3e 100644 --- a/frontend/src/components/dir-view-mode/dir-column-view.js +++ b/frontend/src/components/dir-view-mode/dir-column-view.js @@ -67,8 +67,8 @@ const propTypes = { onItemsCopy: PropTypes.func.isRequired, onItemsDelete: PropTypes.func.isRequired, onFileTagChanged: PropTypes.func, - scrollPage: PropTypes.func.isRequired, - isCurrentPage: PropTypes.bool.isRequired, + onPageScroll: PropTypes.func.isRequired, + itemShownLimit: PropTypes.bool.isRequired, }; class DirColumnView extends React.Component { @@ -226,8 +226,8 @@ class DirColumnView extends React.Component { onItemsCopy={this.props.onItemsCopy} onItemsDelete={this.props.onItemsDelete} onFileTagChanged={this.props.onFileTagChanged} - isCurrentPage={this.props.isCurrentPage} - scrollPage={this.props.scrollPage} + itemShownLimit={this.props.itemShownLimit} + onPageScroll={this.props.onPageScroll} /> )} diff --git a/frontend/src/components/dir-view-mode/dir-grid-view.js b/frontend/src/components/dir-view-mode/dir-grid-view.js index ce99ed572d..eb0b58536e 100644 --- a/frontend/src/components/dir-view-mode/dir-grid-view.js +++ b/frontend/src/components/dir-view-mode/dir-grid-view.js @@ -30,8 +30,8 @@ const propTypes = { showDirentDetail: PropTypes.func.isRequired, onAddFolder: PropTypes.func.isRequired, onFileTagChanged: PropTypes.func, - scrollPage: PropTypes.func.isRequired, - isCurrentPage: PropTypes.bool.isRequired + onPageScroll: PropTypes.func.isRequired, + itemShownLimit: PropTypes.bool.isRequired }; class DirGridView extends React.Component { @@ -80,8 +80,8 @@ class DirGridView extends React.Component { isDirentDetailShow={this.props.isDirentDetailShow} onItemRename={this.props.onItemRename} onAddFolder={this.props.onAddFolder} - isCurrentPage={this.props.isCurrentPage} - scrollPage={this.props.scrollPage} + itemShownLimit={this.props.itemShownLimit} + onPageScroll={this.props.onPageScroll} /> ); diff --git a/frontend/src/components/dir-view-mode/dir-list-view.js b/frontend/src/components/dir-view-mode/dir-list-view.js index 8f50022eb6..de3be8fd90 100644 --- a/frontend/src/components/dir-view-mode/dir-list-view.js +++ b/frontend/src/components/dir-view-mode/dir-list-view.js @@ -38,8 +38,8 @@ const propTypes = { onItemsCopy: PropTypes.func.isRequired, onItemsDelete: PropTypes.func.isRequired, onFileTagChanged: PropTypes.func, - scrollPage: PropTypes.func.isRequired, - isCurrentPage: PropTypes.bool.isRequired + onPageScroll: PropTypes.func.isRequired, + itemShownLimit: PropTypes.bool.isRequired }; class DirListView extends React.Component { @@ -99,8 +99,8 @@ class DirListView extends React.Component { onAddFile={this.props.onAddFile} onAddFolder={this.props.onAddFolder} onFileTagChanged={this.props.onFileTagChanged} - isCurrentPage={this.props.isCurrentPage} - scrollPage={this.props.scrollPage} + itemShownLimit={this.props.itemShownLimit} + onPageScroll={this.props.onPageScroll} /> ); diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js index f786e49544..78bb01c342 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js +++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js @@ -40,8 +40,8 @@ const propTypes = { isDirentDetailShow: PropTypes.bool.isRequired, onGridItemClick: PropTypes.func, onAddFolder: PropTypes.func.isRequired, - scrollPage: PropTypes.func.isRequired, - isCurrentPage: PropTypes.bool.isRequired + onPageScroll: PropTypes.func.isRequired, + itemShownLimit: PropTypes.bool.isRequired }; class DirentGridView extends React.Component{ @@ -73,8 +73,8 @@ class DirentGridView extends React.Component{ } componentWillReceiveProps(nextProps) { - if (!this.props.isCurrentPage) { - this.setState({itemIdex: 100}) + if (this.props.itemShownLimit) { + this.setState({itemIdex: 100}); } } @@ -101,7 +101,7 @@ class DirentGridView extends React.Component{ itemIdex += 100 this.setState({itemIdex: itemIdex}) } - this.props.scrollPage(); + this.props.onPageScroll(); } onMoveToggle = () => { diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js index fd44daa469..34ad56c105 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-view.js +++ b/frontend/src/components/dirent-list-view/dirent-list-view.js @@ -45,8 +45,8 @@ const propTypes = { onItemsCopy: PropTypes.func.isRequired, onItemsDelete: PropTypes.func.isRequired, onFileTagChanged: PropTypes.func, - scrollPage: PropTypes.func.isRequired, - isCurrentPage: PropTypes.bool.isRequired, + onPageScroll: PropTypes.func.isRequired, + itemShownLimit: PropTypes.bool.isRequired, }; class DirentListView extends React.Component { @@ -86,7 +86,7 @@ class DirentListView extends React.Component { } componentWillReceiveProps(nextProps) { - if (!this.props.isCurrentPage) { + if (this.props.itemShownLimit) { this.setState({itemIdex: 100}) } } @@ -155,7 +155,7 @@ class DirentListView extends React.Component { itemIdex += 100 this.setState({itemIdex: itemIdex}) } - this.props.scrollPage(); + this.props.onPageScroll(); } // for image popup diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js index 700e8d200b..9d2b66ba1e 100644 --- a/frontend/src/pages/lib-content-view/lib-content-container.js +++ b/frontend/src/pages/lib-content-view/lib-content-container.js @@ -85,8 +85,8 @@ const propTypes = { showDirentDetail: PropTypes.func.isRequired, onDeleteRepoTag: PropTypes.func.isRequired, updateDetail: PropTypes.bool.isRequired, - scrollPage: PropTypes.func.isRequired, - isCurrentPage: PropTypes.bool.isRequired + onPageScroll: PropTypes.func.isRequired, + itemShownLimit: PropTypes.bool.isRequired }; class LibContentContainer extends React.Component { @@ -206,8 +206,8 @@ class LibContentContainer extends React.Component { onItemsCopy={this.props.onItemsCopy} onItemsDelete={this.props.onItemsDelete} onFileTagChanged={this.props.onFileTagChanged} - isCurrentPage={this.props.isCurrentPage} - scrollPage={this.props.scrollPage} + itemShownLimit={this.props.itemShownLimit} + onPageScroll={this.props.onPageScroll} /> )} {this.props.currentMode === 'grid' && ( @@ -239,8 +239,8 @@ class LibContentContainer extends React.Component { isDirentDetailShow={this.props.isDirentDetailShow} onItemRename={this.props.onItemRename} onFileTagChanged={this.props.onFileTagChanged} - isCurrentPage={this.props.isCurrentPage} - scrollPage={this.props.scrollPage} + itemShownLimit={this.props.itemShownLimit} + onPageScroll={this.props.onPageScroll} /> )} {this.props.currentMode === 'column' && ( @@ -301,8 +301,8 @@ class LibContentContainer extends React.Component { onItemsCopy={this.props.onItemsCopy} onItemsDelete={this.props.onItemsDelete} onFileTagChanged={this.props.onFileTagChanged} - isCurrentPage={this.props.isCurrentPage} - scrollPage={this.props.scrollPage} + itemShownLimit={this.props.itemShownLimit} + onPageScroll={this.props.onPageScroll} /> )} diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js index ba99eb17d8..23e2fd7976 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -71,7 +71,7 @@ class LibContentView extends React.Component { errorMsg: '', isDirentDetailShow: false, updateDetail: false, - isCurrentPage: true, + itemShownLimit: false, }; window.onpopstate = this.onpopstate; @@ -403,7 +403,7 @@ class LibContentView extends React.Component { if (!this.state.repoEncrypted && direntList.length) { this.getThumbnails(repoID, path, this.state.direntList); } - this.switchPage(); + this.onSwitchPage(); }).catch(() => { this.setState({ isDirentListLoading: false, @@ -412,12 +412,12 @@ class LibContentView extends React.Component { }); } - scrollPage = () => { - this.setState({isCurrentPage: true}) + onPageScroll = () => { + this.setState({itemShownLimit: false}) } - switchPage = () => { - this.setState({isCurrentPage: false}) + onSwitchPage = () => { + this.setState({itemShownLimit: true}) } getThumbnails = (repoID, path, direntList) => { @@ -1461,8 +1461,8 @@ class LibContentView extends React.Component { onDeleteRepoTag={this.onDeleteRepoTag} onToolbarFileTagChanged={this.onToolbarFileTagChanged} updateDetail={this.state.updateDetail} - isCurrentPage={this.state.isCurrentPage} - scrollPage={this.scrollPage} + itemShownLimit={this.state.itemShownLimit} + onPageScroll={this.onPageScroll} /> {this.state.pathExist && !this.state.isViewFile && ( Date: Wed, 24 Apr 2019 10:10:28 +0800 Subject: [PATCH 08/16] optimization code --- .../dir-view-mode/dir-column-nav.js | 6 ++- .../dir-view-mode/dir-column-view.js | 4 -- .../components/dir-view-mode/dir-grid-view.js | 4 -- .../components/dir-view-mode/dir-list-view.js | 4 -- .../dirent-grid-view/dirent-grid-view.js | 36 +----------------- .../dirent-list-view/dirent-list-view.js | 37 +------------------ .../lib-content-view/lib-content-container.js | 31 +++++++++++++--- 7 files changed, 35 insertions(+), 87 deletions(-) diff --git a/frontend/src/components/dir-view-mode/dir-column-nav.js b/frontend/src/components/dir-view-mode/dir-column-nav.js index a46b40766d..dba2c48b65 100644 --- a/frontend/src/components/dir-view-mode/dir-column-nav.js +++ b/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 ( -
        +
        {this.props.isTreeDataLoading ? () : ( )}
        diff --git a/frontend/src/components/dir-view-mode/dir-grid-view.js b/frontend/src/components/dir-view-mode/dir-grid-view.js index eb0b58536e..4b6834b234 100644 --- a/frontend/src/components/dir-view-mode/dir-grid-view.js +++ b/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} /> ); diff --git a/frontend/src/components/dir-view-mode/dir-list-view.js b/frontend/src/components/dir-view-mode/dir-list-view.js index de3be8fd90..174223fabf 100644 --- a/frontend/src/components/dir-view-mode/dir-list-view.js +++ b/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} /> ); diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js index 78bb01c342..00607e0464 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js +++ b/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 (); } return ( -
          +
            { - direntItemsList.map((dirent, index) => { + direntList.map((dirent, index) => { return ( { 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 (); } @@ -566,7 +533,7 @@ class DirentListView extends React.Component { const sortIcon = sortOrder == 'asc' ? : ; return ( -
            +
      @@ -583,7 +550,7 @@ class DirentListView extends React.Component { - {direntItemsList.map((dirent, index) => { + {direntList.map((dirent, index) => { return ( {gettext('Folder does not exist.')}); @@ -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 (
      @@ -167,7 +188,7 @@ class LibContentContainer extends React.Component { onDeleteRepoTag={this.props.onDeleteRepoTag} />
      -
      +
      {!this.props.pathExist && this.errMessage} {this.props.pathExist && ( @@ -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} From 9c3c63c74344a8f605842d6670b851c1f9f7e1d3 Mon Sep 17 00:00:00 2001 From: zxj96 <519213124@qq.com> Date: Wed, 24 Apr 2019 10:24:09 +0800 Subject: [PATCH 09/16] Modify some format --- frontend/src/components/dir-view-mode/dir-column-nav.js | 4 ++-- .../src/components/dirent-list-view/dirent-list-view.js | 1 + .../src/pages/lib-content-view/lib-content-container.js | 6 ------ 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/dir-view-mode/dir-column-nav.js b/frontend/src/components/dir-view-mode/dir-column-nav.js index dba2c48b65..eddad71662 100644 --- a/frontend/src/components/dir-view-mode/dir-column-nav.js +++ b/frontend/src/components/dir-view-mode/dir-column-nav.js @@ -248,7 +248,7 @@ class DirColumnNav extends React.Component { })); } - handleScroll = (e) => { + stopTreeScrollPropagation = (e) => { e.stopPropagation(); } @@ -257,7 +257,7 @@ class DirColumnNav extends React.Component { const select = this.props.inResizing ? 'none' : ''; return ( -
      +
      {this.props.isTreeDataLoading ? () : (); } diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js index 05ecfbc7fd..fb1300b8d4 100644 --- a/frontend/src/pages/lib-content-view/lib-content-container.js +++ b/frontend/src/pages/lib-content-view/lib-content-container.js @@ -227,8 +227,6 @@ class LibContentContainer extends React.Component { onItemsCopy={this.props.onItemsCopy} onItemsDelete={this.props.onItemsDelete} onFileTagChanged={this.props.onFileTagChanged} - itemShownLimit={this.props.itemShownLimit} - onPageScroll={this.props.onPageScroll} /> )} {this.props.currentMode === 'grid' && ( @@ -260,8 +258,6 @@ class LibContentContainer extends React.Component { isDirentDetailShow={this.props.isDirentDetailShow} onItemRename={this.props.onItemRename} onFileTagChanged={this.props.onFileTagChanged} - itemShownLimit={this.props.itemShownLimit} - onPageScroll={this.props.onPageScroll} /> )} {this.props.currentMode === 'column' && ( @@ -322,8 +318,6 @@ class LibContentContainer extends React.Component { onItemsCopy={this.props.onItemsCopy} onItemsDelete={this.props.onItemsDelete} onFileTagChanged={this.props.onFileTagChanged} - itemShownLimit={this.props.itemShownLimit} - onPageScroll={this.props.onPageScroll} /> )} From 2e9ff520242eacb3c57f5a24279482dac81d7388 Mon Sep 17 00:00:00 2001 From: zxj96 <519213124@qq.com> Date: Wed, 24 Apr 2019 10:33:33 +0800 Subject: [PATCH 10/16] style modify --- frontend/src/components/dirent-grid-view/dirent-grid-view.js | 2 +- frontend/src/components/dirent-list-view/dirent-list-view.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js index 00607e0464..643845c589 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js +++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js @@ -485,7 +485,7 @@ class DirentGridView extends React.Component{
        { - direntList.map((dirent, index) => { + direntList.length !== 0 && direntList.map((dirent, index) => { return ( ); } From 870c32113cf64467df5343a64a99bdbb7e3bf088 Mon Sep 17 00:00:00 2001 From: zxj96 <519213124@qq.com> Date: Wed, 24 Apr 2019 13:37:48 +0800 Subject: [PATCH 11/16] Use one variable instead of two --- .../lib-content-view/lib-content-container.js | 20 +++++-------------- .../lib-content-view/lib-content-view.js | 10 ++++++---- 2 files changed, 11 insertions(+), 19 deletions(-) diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js index fb1300b8d4..87ce25e440 100644 --- a/frontend/src/pages/lib-content-view/lib-content-container.js +++ b/frontend/src/pages/lib-content-view/lib-content-container.js @@ -86,7 +86,7 @@ const propTypes = { onDeleteRepoTag: PropTypes.func.isRequired, updateDetail: PropTypes.bool.isRequired, onPageScroll: PropTypes.func.isRequired, - itemShownLimit: PropTypes.bool.isRequired + itemShowLength: PropTypes.number.isRequired }; class LibContentContainer extends React.Component { @@ -95,7 +95,6 @@ class LibContentContainer extends React.Component { super(props); this.state = { currentDirent: null, - itemShowLength: 100, }; this.errMessage = (
        {gettext('Folder does not exist.')}
        ); @@ -105,11 +104,6 @@ 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) => { @@ -146,15 +140,11 @@ class LibContentContainer extends React.Component { this.props.onItemDelete(dirent); } - onFileScroll = (e) => { + onItemsScroll = (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(); } - this.props.onPageScroll(); - } render() { @@ -167,7 +157,7 @@ class LibContentContainer extends React.Component { } let direntItemsList = direntList.filter((item, index) => { - return index < this.state.itemShowLength; + return index < this.props.itemShowLength; }) return ( @@ -188,7 +178,7 @@ class LibContentContainer extends React.Component { onDeleteRepoTag={this.props.onDeleteRepoTag} />
      -
      +
      {!this.props.pathExist && this.errMessage} {this.props.pathExist && ( diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js index 23e2fd7976..f08a1cbac0 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -71,7 +71,7 @@ class LibContentView extends React.Component { errorMsg: '', isDirentDetailShow: false, updateDetail: false, - itemShownLimit: false, + itemsShowLength: 100, }; window.onpopstate = this.onpopstate; @@ -413,11 +413,13 @@ class LibContentView extends React.Component { } onPageScroll = () => { - this.setState({itemShownLimit: false}) + let itemsShowLength = this.state.itemsShowLength; + itemsShowLength += 100; + this.setState({itemsShowLength: itemsShowLength}); } onSwitchPage = () => { - this.setState({itemShownLimit: true}) + this.setState({itemsShowLength: 100}); } getThumbnails = (repoID, path, direntList) => { @@ -1461,8 +1463,8 @@ class LibContentView extends React.Component { onDeleteRepoTag={this.onDeleteRepoTag} onToolbarFileTagChanged={this.onToolbarFileTagChanged} updateDetail={this.state.updateDetail} - itemShownLimit={this.state.itemShownLimit} onPageScroll={this.onPageScroll} + itemsShowLength={this.state.itemsShowLength} /> {this.state.pathExist && !this.state.isViewFile && ( Date: Wed, 24 Apr 2019 13:52:09 +0800 Subject: [PATCH 12/16] Display quantity up --- .../pages/lib-content-view/lib-content-container.js | 11 +++-------- .../src/pages/lib-content-view/lib-content-view.js | 6 +++++- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js index 87ce25e440..904566b996 100644 --- a/frontend/src/pages/lib-content-view/lib-content-container.js +++ b/frontend/src/pages/lib-content-view/lib-content-container.js @@ -86,7 +86,6 @@ const propTypes = { onDeleteRepoTag: PropTypes.func.isRequired, updateDetail: PropTypes.bool.isRequired, onPageScroll: PropTypes.func.isRequired, - itemShowLength: PropTypes.number.isRequired }; class LibContentContainer extends React.Component { @@ -156,10 +155,6 @@ class LibContentContainer extends React.Component { } } - let direntItemsList = direntList.filter((item, index) => { - return index < this.props.itemShowLength; - }) - return (
      @@ -195,7 +190,7 @@ class LibContentContainer extends React.Component { draftCounts={this.props.draftCounts} updateUsedRepoTags={this.props.updateUsedRepoTags} isDirentListLoading={this.props.isDirentListLoading} - direntList={direntItemsList} + direntList={this.props.direntList} showShareBtn={this.props.showShareBtn} sortBy={this.props.sortBy} sortOrder={this.props.sortOrder} @@ -234,7 +229,7 @@ class LibContentContainer extends React.Component { draftCounts={this.props.draftCounts} updateUsedRepoTags={this.props.updateUsedRepoTags} isDirentListLoading={this.props.isDirentListLoading} - direntList={direntItemsList} + direntList={this.props.direntList} onAddFile={this.props.onAddFile} onItemClick={this.onItemClick} onItemDelete={this.props.onItemDelete} @@ -286,7 +281,7 @@ class LibContentContainer extends React.Component { draftCounts={this.props.draftCounts} updateUsedRepoTags={this.props.updateUsedRepoTags} isDirentListLoading={this.props.isDirentListLoading} - direntList={direntItemsList} + direntList={this.props.direntList} showShareBtn={this.props.showShareBtn} sortBy={this.props.sortBy} sortOrder={this.props.sortOrder} diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js index f08a1cbac0..922eee3fbc 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -1346,6 +1346,10 @@ class LibContentView extends React.Component { } + let direntItemsList = this.state.direntList.filter((item, index) => { + return index < this.state.itemsShowLength; + }) + return (
      @@ -1433,7 +1437,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} From 9cd68756ff1d60ec0ecab9c892bb06d54b0ffed5 Mon Sep 17 00:00:00 2001 From: zxj96 <519213124@qq.com> Date: Wed, 24 Apr 2019 14:39:46 +0800 Subject: [PATCH 13/16] Restore code --- frontend/src/components/dirent-grid-view/dirent-grid-view.js | 2 +- frontend/src/pages/lib-content-view/lib-content-container.js | 2 +- frontend/src/pages/lib-content-view/lib-content-view.js | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js index 643845c589..0b9e89abd2 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js +++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js @@ -75,7 +75,7 @@ class DirentGridView extends React.Component{ this.setState({activeDirent: dirent}); this.props.onGridItemClick(dirent); } - + onMoveToggle = () => { this.setState({isMoveDialogShow: !this.state.isMoveDialogShow}); } diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js index 904566b996..89e932ee56 100644 --- a/frontend/src/pages/lib-content-view/lib-content-container.js +++ b/frontend/src/pages/lib-content-view/lib-content-container.js @@ -147,7 +147,7 @@ class LibContentContainer extends React.Component { } render() { - let { path, repoID, usedRepoTags, readmeMarkdown, draftCounts, direntList } = this.props; + let { path, repoID, usedRepoTags, readmeMarkdown, draftCounts } = this.props; let isRepoInfoBarShow = false; if (path === '/') { if (usedRepoTags.length !== 0 || readmeMarkdown !== null || draftCounts !== 0) { diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js index 922eee3fbc..b4e3354de3 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -1468,7 +1468,6 @@ class LibContentView extends React.Component { onToolbarFileTagChanged={this.onToolbarFileTagChanged} updateDetail={this.state.updateDetail} onPageScroll={this.onPageScroll} - itemsShowLength={this.state.itemsShowLength} /> {this.state.pathExist && !this.state.isViewFile && ( Date: Wed, 24 Apr 2019 14:42:29 +0800 Subject: [PATCH 14/16] Remove spaces --- frontend/src/components/dirent-grid-view/dirent-grid-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js index 0b9e89abd2..643845c589 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js +++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js @@ -75,7 +75,7 @@ class DirentGridView extends React.Component{ this.setState({activeDirent: dirent}); this.props.onGridItemClick(dirent); } - + onMoveToggle = () => { this.setState({isMoveDialogShow: !this.state.isMoveDialogShow}); } From 813a702ab5ca9340a4f26634105308c06d2eaea8 Mon Sep 17 00:00:00 2001 From: zxj96 <519213124@qq.com> Date: Wed, 24 Apr 2019 15:16:26 +0800 Subject: [PATCH 15/16] modify function name --- .../src/pages/lib-content-view/lib-content-container.js | 4 ++-- frontend/src/pages/lib-content-view/lib-content-view.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js index 89e932ee56..2a0d1dca1a 100644 --- a/frontend/src/pages/lib-content-view/lib-content-container.js +++ b/frontend/src/pages/lib-content-view/lib-content-container.js @@ -85,7 +85,7 @@ const propTypes = { showDirentDetail: PropTypes.func.isRequired, onDeleteRepoTag: PropTypes.func.isRequired, updateDetail: PropTypes.bool.isRequired, - onPageScroll: PropTypes.func.isRequired, + onListContainerScroll: PropTypes.func.isRequired, }; class LibContentContainer extends React.Component { @@ -142,7 +142,7 @@ class LibContentContainer extends React.Component { onItemsScroll = (e) => { let target = e.target; if (target.scrollTop + document.documentElement.clientHeight - target.offsetTop >= target.scrollHeight) { - this.props.onPageScroll(); + this.props.onListContainerScroll(); } } diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js index b4e3354de3..8794c3d3a4 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -403,7 +403,7 @@ class LibContentView extends React.Component { if (!this.state.repoEncrypted && direntList.length) { this.getThumbnails(repoID, path, this.state.direntList); } - this.onSwitchPage(); + this.resetShowLength(); }).catch(() => { this.setState({ isDirentListLoading: false, @@ -412,13 +412,13 @@ class LibContentView extends React.Component { }); } - onPageScroll = () => { + onListContainerScroll = () => { let itemsShowLength = this.state.itemsShowLength; itemsShowLength += 100; this.setState({itemsShowLength: itemsShowLength}); } - onSwitchPage = () => { + resetShowLength = () => { this.setState({itemsShowLength: 100}); } @@ -1467,7 +1467,7 @@ class LibContentView extends React.Component { onDeleteRepoTag={this.onDeleteRepoTag} onToolbarFileTagChanged={this.onToolbarFileTagChanged} updateDetail={this.state.updateDetail} - onPageScroll={this.onPageScroll} + onListContainerScroll={this.onListContainerScroll} /> {this.state.pathExist && !this.state.isViewFile && ( Date: Wed, 24 Apr 2019 15:24:27 +0800 Subject: [PATCH 16/16] merge code --- frontend/src/pages/lib-content-view/lib-content-view.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js index 8794c3d3a4..444df4d59c 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -413,8 +413,7 @@ class LibContentView extends React.Component { } onListContainerScroll = () => { - let itemsShowLength = this.state.itemsShowLength; - itemsShowLength += 100; + let itemsShowLength = this.state.itemsShowLength + 100; this.setState({itemsShowLength: itemsShowLength}); }