From 99843d28768f96275a20d4afb1526e15ac0e24fa Mon Sep 17 00:00:00 2001 From: ta264 Date: Thu, 6 May 2021 21:49:33 +0100 Subject: [PATCH] Fixed: Restoring scroll position when going back to index page --- frontend/src/Components/Table/VirtualTable.js | 17 +++++++++++++---- frontend/src/Components/withScrollPosition.js | 2 +- .../Index/Overview/SeriesIndexOverviews.js | 13 +++++++++++-- .../Series/Index/Posters/SeriesIndexPosters.js | 13 +++++++++++-- .../src/Series/Index/Table/SeriesIndexTable.js | 5 ++++- 5 files changed, 40 insertions(+), 10 deletions(-) diff --git a/frontend/src/Components/Table/VirtualTable.js b/frontend/src/Components/Table/VirtualTable.js index b2d68a888..0019d73f3 100644 --- a/frontend/src/Components/Table/VirtualTable.js +++ b/frontend/src/Components/Table/VirtualTable.js @@ -39,7 +39,8 @@ class VirtualTable extends Component { super(props, context); this.state = { - width: 0 + width: 0, + scrollRestored: false }; this._grid = null; @@ -48,11 +49,13 @@ class VirtualTable extends Component { componentDidUpdate(prevProps, prevState) { const { items, - scrollIndex + scrollIndex, + scrollTop } = this.props; const { - width + width, + scrollRestored } = this.state; if (this._grid && (prevState.width !== width || hasDifferentItemsOrOrder(prevProps.items, items))) { @@ -60,6 +63,11 @@ class VirtualTable extends Component { this._grid.recomputeGridSize(); } + if (this._grid && scrollTop !== undefined && scrollTop !== 0 && !scrollRestored) { + this.setState({ scrollRestored: true }); + this._grid.scrollToPosition({ scrollTop }); + } + if (scrollIndex != null && scrollIndex !== prevProps.scrollIndex) { this._grid.scrollToCell({ rowIndex: scrollIndex, @@ -137,6 +145,7 @@ class VirtualTable extends Component { {header}
@@ -176,6 +184,7 @@ VirtualTable.propTypes = { className: PropTypes.string.isRequired, items: PropTypes.arrayOf(PropTypes.object).isRequired, scrollIndex: PropTypes.number, + scrollTop: PropTypes.number, scroller: PropTypes.instanceOf(Element).isRequired, header: PropTypes.node.isRequired, headerHeight: PropTypes.number.isRequired, diff --git a/frontend/src/Components/withScrollPosition.js b/frontend/src/Components/withScrollPosition.js index 110da9ab2..bb089b8b0 100644 --- a/frontend/src/Components/withScrollPosition.js +++ b/frontend/src/Components/withScrollPosition.js @@ -8,7 +8,7 @@ function withScrollPosition(WrappedComponent, scrollPositionKey) { history } = props; - const scrollTop = history.action === 'POP' ? + const scrollTop = history.action === 'POP' || (history.location.state && history.location.state.restoreScrollPosition) ? scrollPositions[scrollPositionKey] : 0; diff --git a/frontend/src/Series/Index/Overview/SeriesIndexOverviews.js b/frontend/src/Series/Index/Overview/SeriesIndexOverviews.js index eab7fc7fd..8ee00bd44 100644 --- a/frontend/src/Series/Index/Overview/SeriesIndexOverviews.js +++ b/frontend/src/Series/Index/Overview/SeriesIndexOverviews.js @@ -60,7 +60,8 @@ class SeriesIndexOverviews extends Component { columnCount: 1, posterWidth: 162, posterHeight: 238, - rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {}) + rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {}), + scrollRestored: false }; this._grid = null; @@ -72,12 +73,14 @@ class SeriesIndexOverviews extends Component { sortKey, overviewOptions, jumpToCharacter, + scrollTop, isSmallScreen } = this.props; const { width, - rowHeight + rowHeight, + scrollRestored } = this.state; if (prevProps.sortKey !== sortKey || @@ -97,6 +100,11 @@ class SeriesIndexOverviews extends Component { this._grid.recomputeGridSize(); } + if (this._grid && scrollTop !== 0 && !scrollRestored) { + this.setState({ scrollRestored: true }); + this._grid.scrollToPosition({ scrollTop }); + } + if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) { const index = getIndexOfFirstCharacter(items, jumpToCharacter); @@ -255,6 +263,7 @@ SeriesIndexOverviews.propTypes = { items: PropTypes.arrayOf(PropTypes.object).isRequired, sortKey: PropTypes.string, overviewOptions: PropTypes.object.isRequired, + scrollTop: PropTypes.number.isRequired, jumpToCharacter: PropTypes.string, scroller: PropTypes.instanceOf(Element).isRequired, showRelativeDates: PropTypes.bool.isRequired, diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosters.js b/frontend/src/Series/Index/Posters/SeriesIndexPosters.js index 44201f56c..6f67ee728 100644 --- a/frontend/src/Series/Index/Posters/SeriesIndexPosters.js +++ b/frontend/src/Series/Index/Posters/SeriesIndexPosters.js @@ -101,7 +101,8 @@ class SeriesIndexPosters extends Component { columnCount: 1, posterWidth: 162, posterHeight: 238, - rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {}) + rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {}), + scrollRestored: false }; this._isInitialized = false; @@ -115,6 +116,7 @@ class SeriesIndexPosters extends Component { sortKey, posterOptions, jumpToCharacter, + scrollTop, isSmallScreen } = this.props; @@ -122,7 +124,8 @@ class SeriesIndexPosters extends Component { width, columnWidth, columnCount, - rowHeight + rowHeight, + scrollRestored } = this.state; if (prevProps.sortKey !== sortKey || @@ -140,6 +143,11 @@ class SeriesIndexPosters extends Component { this._grid.recomputeGridSize(); } + if (this._grid && scrollTop !== 0 && !scrollRestored) { + this.setState({ scrollRestored: true }); + this._grid.scrollToPosition({ scrollTop }); + } + if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) { const index = getIndexOfFirstCharacter(items, jumpToCharacter); @@ -315,6 +323,7 @@ SeriesIndexPosters.propTypes = { sortKey: PropTypes.string, posterOptions: PropTypes.object.isRequired, jumpToCharacter: PropTypes.string, + scrollTop: PropTypes.number.isRequired, scroller: PropTypes.instanceOf(Element).isRequired, showRelativeDates: PropTypes.bool.isRequired, shortDateFormat: PropTypes.string.isRequired, diff --git a/frontend/src/Series/Index/Table/SeriesIndexTable.js b/frontend/src/Series/Index/Table/SeriesIndexTable.js index 99feca39a..6603285e3 100644 --- a/frontend/src/Series/Index/Table/SeriesIndexTable.js +++ b/frontend/src/Series/Index/Table/SeriesIndexTable.js @@ -82,7 +82,8 @@ class SeriesIndexTable extends Component { showBanners, isSmallScreen, onSortPress, - scroller + scroller, + scrollTop } = this.props; return ( @@ -90,6 +91,7 @@ class SeriesIndexTable extends Component { className={styles.tableContainer} items={items} scrollIndex={this.state.scrollIndex} + scrollTop={scrollTop} scroller={scroller} isSmallScreen={isSmallScreen} rowHeight={showBanners ? 70 : 38} @@ -117,6 +119,7 @@ SeriesIndexTable.propTypes = { sortDirection: PropTypes.oneOf(sortDirections.all), showBanners: PropTypes.bool.isRequired, jumpToCharacter: PropTypes.string, + scrollTop: PropTypes.number, scroller: PropTypes.instanceOf(Element).isRequired, isSmallScreen: PropTypes.bool.isRequired, onSortPress: PropTypes.func.isRequired