Fixed: restoring scroll position when going back to index page

This commit is contained in:
ta264 2020-08-26 22:38:48 +01:00 committed by Qstick
parent e681469857
commit 1bc52d0138
9 changed files with 54 additions and 9 deletions

View File

@ -408,7 +408,10 @@ class ArtistDetails extends Component {
name={icons.ARROW_UP}
size={30}
title={'Go to artist listing'}
to={'/'}
to={{
pathname: '/',
state: { restoreScrollPosition: true }
}}
/>
<IconButton

View File

@ -112,7 +112,8 @@ class ArtistIndexBanners extends Component {
items,
sortKey,
bannerOptions,
jumpToCharacter
jumpToCharacter,
scrollTop
} = this.props;
const {
@ -149,6 +150,10 @@ class ArtistIndexBanners extends Component {
});
}
}
if (this._grid && scrollTop !== 0) {
this._grid.scrollToPosition({ scrollTop });
}
}
//
@ -307,6 +312,7 @@ ArtistIndexBanners.propTypes = {
sortKey: PropTypes.string,
bannerOptions: PropTypes.object.isRequired,
jumpToCharacter: PropTypes.string,
scrollTop: PropTypes.number.isRequired,
scroller: PropTypes.instanceOf(Element).isRequired,
showRelativeDates: PropTypes.bool.isRequired,
shortDateFormat: PropTypes.string.isRequired,

View File

@ -71,7 +71,8 @@ class ArtistIndexOverviews extends Component {
items,
sortKey,
overviewOptions,
jumpToCharacter
jumpToCharacter,
scrollTop
} = this.props;
const {
@ -103,6 +104,10 @@ class ArtistIndexOverviews extends Component {
});
}
}
if (this._grid && scrollTop !== 0) {
this._grid.scrollToPosition({ scrollTop });
}
}
//

View File

@ -112,7 +112,8 @@ class ArtistIndexPosters extends Component {
items,
sortKey,
posterOptions,
jumpToCharacter
jumpToCharacter,
scrollTop
} = this.props;
const {
@ -149,6 +150,10 @@ class ArtistIndexPosters extends Component {
});
}
}
if (this._grid && scrollTop !== 0) {
this._grid.scrollToPosition({ scrollTop });
}
}
//
@ -310,6 +315,7 @@ ArtistIndexPosters.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,

View File

@ -83,7 +83,8 @@ class ArtistIndexTable extends Component {
showBanners,
isSmallScreen,
onSortPress,
scroller
scroller,
scrollTop
} = this.props;
return (
@ -91,6 +92,7 @@ class ArtistIndexTable extends Component {
className={styles.tableContainer}
items={items}
scrollIndex={this.state.scrollIndex}
scrollTop={scrollTop}
isSmallScreen={isSmallScreen}
scroller={scroller}
rowHeight={showBanners ? 70 : 38}
@ -120,6 +122,7 @@ ArtistIndexTable.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

View File

@ -38,7 +38,7 @@ class Link extends Component {
const linkProps = { target };
let el = component;
if (to) {
if (to && typeof to === 'string') {
if ((/\w+?:\/\//).test(to)) {
el = 'a';
linkProps.href = to;
@ -56,6 +56,18 @@ class Link extends Component {
linkProps.to = `${window.Lidarr.urlBase}/${to.replace(/^\//, '')}`;
linkProps.target = target;
}
} else if (to && typeof to === 'object') {
el = RouterLink;
linkProps.target = target;
if (to.pathname.startsWith(`${window.Lidarr.urlBase}/`)) {
linkProps.to = to;
} else {
const pathname = `${window.Lidarr.urlBase}/${to.pathname.replace(/^\//, '')}`;
linkProps.to = {
...to,
pathname
};
}
}
if (el === 'button' || el === 'input') {
@ -86,7 +98,7 @@ class Link extends Component {
Link.propTypes = {
className: PropTypes.string,
component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
to: PropTypes.string,
to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
target: PropTypes.string,
isDisabled: PropTypes.bool,
noRouter: PropTypes.bool,

View File

@ -53,7 +53,10 @@ class PageHeader extends Component {
<div className={styles.logoContainer}>
<Link
className={styles.logoLink}
to={`${window.Lidarr.urlBase}/`}
to={{
pathname: '/',
state: { restoreScrollPosition: true }
}}
>
<img
className={styles.logo}

View File

@ -47,6 +47,7 @@ class VirtualTable extends Component {
const {
items,
scrollIndex,
scrollTop,
onRecompute
} = this.props;
@ -68,6 +69,10 @@ class VirtualTable extends Component {
columnIndex: 0
});
}
if (this._grid && scrollTop !== undefined && scrollTop !== 0) {
this._grid.scrollToPosition({ scrollTop });
}
}
//
@ -95,6 +100,7 @@ class VirtualTable extends Component {
className,
items,
scroller,
scrollTop: ignored,
header,
headerHeight,
rowHeight,
@ -179,6 +185,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,

View File

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