Fixes columns scrolling to top when opening media modal

Fixes #700
This commit is contained in:
Thibaut Girka 2018-09-03 13:32:35 +02:00 committed by ThibG
parent 2b82829a53
commit e915bc3e9e
17 changed files with 31 additions and 61 deletions

View file

@ -149,6 +149,10 @@ export default class ScrollableList extends PureComponent {
this.props.onLoadMore();
}
defaultShouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen);
}
render () {
const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage, onLoadMore } = this.props;
const { fullscreen } = this.state;
@ -190,7 +194,7 @@ export default class ScrollableList extends PureComponent {
if (trackScroll) {
return (
<ScrollContainer scrollKey={scrollKey} shouldUpdateScroll={shouldUpdateScroll}>
<ScrollContainer scrollKey={scrollKey} shouldUpdateScroll={shouldUpdateScroll || this.defaultShouldUpdateScroll}>
{scrollableArea}
</ScrollContainer>
);

View file

@ -60,10 +60,6 @@ export default class AccountTimeline extends ImmutablePureComponent {
this.props.dispatch(expandAccountTimeline(this.props.params.accountId, { maxId, withReplies: this.props.withReplies }));
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen)
}
render () {
const { statusIds, featuredStatusIds, isLoading, hasMore } = this.props;
@ -87,7 +83,6 @@ export default class AccountTimeline extends ImmutablePureComponent {
isLoading={isLoading}
hasMore={hasMore}
onLoadMore={this.handleLoadMore}
shouldUpdateScroll={this.shouldUpdateScroll}
/>
</Column>
);

View file

@ -66,10 +66,6 @@ export default class Bookmarks extends ImmutablePureComponent {
this.props.dispatch(expandBookmarkedStatuses());
}, 300, { leading: true })
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen)
}
render () {
const { intl, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props;
const pinned = !!columnId;
@ -91,7 +87,6 @@ export default class Bookmarks extends ImmutablePureComponent {
trackScroll={!pinned}
statusIds={statusIds}
scrollKey={`bookmarked_statuses-${columnId}`}
shouldUpdateScroll={this.shouldUpdateScroll}
hasMore={hasMore}
isLoading={isLoading}
onLoadMore={this.handleLoadMore}

View file

@ -71,10 +71,6 @@ export default class CommunityTimeline extends React.PureComponent {
this.props.dispatch(expandCommunityTimeline({ maxId }));
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen)
}
render () {
const { intl, hasUnread, columnId, multiColumn } = this.props;
const pinned = !!columnId;
@ -97,7 +93,6 @@ export default class CommunityTimeline extends React.PureComponent {
<StatusListContainer
trackScroll={!pinned}
scrollKey={`community_timeline-${columnId}`}
shouldUpdateScroll={this.shouldUpdateScroll}
timelineId='community'
onLoadMore={this.handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}

View file

@ -71,10 +71,6 @@ export default class DirectTimeline extends React.PureComponent {
this.props.dispatch(expandDirectTimeline({ maxId }));
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen)
}
render () {
const { intl, hasUnread, columnId, multiColumn } = this.props;
const pinned = !!columnId;
@ -97,7 +93,6 @@ export default class DirectTimeline extends React.PureComponent {
<StatusListContainer
trackScroll={!pinned}
scrollKey={`direct_timeline-${columnId}`}
shouldUpdateScroll={this.shouldUpdateScroll}
timelineId='direct'
onLoadMore={this.handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}

View file

@ -40,10 +40,6 @@ export default class Blocks extends ImmutablePureComponent {
this.props.dispatch(expandDomainBlocks());
}, 300, { leading: true });
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen)
}
render () {
const { intl, domains } = this.props;
@ -58,7 +54,7 @@ export default class Blocks extends ImmutablePureComponent {
return (
<Column icon='minus-circle' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollableList scrollKey='domain_blocks' onLoadMore={this.handleLoadMore} shouldUpdateScroll={this.shouldUpdateScroll}>
<ScrollableList scrollKey='domain_blocks' onLoadMore={this.handleLoadMore}>
{domains.map(domain =>
<DomainContainer key={domain} domain={domain} />
)}

View file

@ -66,10 +66,6 @@ export default class Favourites extends ImmutablePureComponent {
this.props.dispatch(expandFavouritedStatuses());
}, 300, { leading: true })
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen)
}
render () {
const { intl, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props;
const pinned = !!columnId;
@ -91,7 +87,6 @@ export default class Favourites extends ImmutablePureComponent {
trackScroll={!pinned}
statusIds={statusIds}
scrollKey={`favourited_statuses-${columnId}`}
shouldUpdateScroll={this.shouldUpdateScroll}
hasMore={hasMore}
isLoading={isLoading}
onLoadMore={this.handleLoadMore}

View file

@ -33,6 +33,10 @@ export default class Favourites extends ImmutablePureComponent {
}
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen);
}
render () {
const { accountIds } = this.props;
@ -48,7 +52,7 @@ export default class Favourites extends ImmutablePureComponent {
<Column>
<ColumnBackButton />
<ScrollContainer scrollKey='favourites'>
<ScrollContainer scrollKey='favourites' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable'>
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
</div>

View file

@ -42,6 +42,10 @@ export default class FollowRequests extends ImmutablePureComponent {
}
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen);
}
render () {
const { intl, accountIds } = this.props;
@ -57,7 +61,7 @@ export default class FollowRequests extends ImmutablePureComponent {
<Column name='follow-requests' icon='users' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollContainer scrollKey='follow_requests'>
<ScrollContainer scrollKey='follow_requests' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable' onScroll={this.handleScroll}>
{accountIds.map(id =>
<AccountAuthorizeContainer key={id} id={id} />

View file

@ -56,6 +56,10 @@ export default class Followers extends ImmutablePureComponent {
this.props.dispatch(expandFollowers(this.props.params.accountId));
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen);
}
render () {
const { accountIds, hasMore } = this.props;
@ -77,7 +81,7 @@ export default class Followers extends ImmutablePureComponent {
<Column>
<ColumnBackButton />
<ScrollContainer scrollKey='followers'>
<ScrollContainer scrollKey='followers' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable' onScroll={this.handleScroll}>
<div className='followers'>
<HeaderContainer accountId={this.props.params.accountId} hideTabs />

View file

@ -82,10 +82,6 @@ export default class HashtagTimeline extends React.PureComponent {
this.props.dispatch(expandHashtagTimeline(this.props.params.id, { maxId }));
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen)
}
render () {
const { hasUnread, columnId, multiColumn } = this.props;
const { id } = this.props.params;
@ -110,7 +106,6 @@ export default class HashtagTimeline extends React.PureComponent {
scrollKey={`hashtag_timeline-${columnId}`}
timelineId={`hashtag:${id}`}
onLoadMore={this.handleLoadMore}
shouldUpdateScroll={this.shouldUpdateScroll}
emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
/>
</Column>

View file

@ -42,6 +42,10 @@ export default class Mutes extends ImmutablePureComponent {
}
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen);
}
render () {
const { intl, accountIds } = this.props;
@ -56,7 +60,7 @@ export default class Mutes extends ImmutablePureComponent {
return (
<Column name='mutes' icon='volume-off' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollContainer scrollKey='mutes'>
<ScrollContainer scrollKey='mutes' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable mutes' onScroll={this.handleScroll}>
{accountIds.map(id =>
<AccountContainer key={id} id={id} />

View file

@ -41,10 +41,6 @@ export default class PinnedStatuses extends ImmutablePureComponent {
this.column = c;
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen)
}
render () {
const { intl, statusIds, hasMore } = this.props;
@ -54,7 +50,6 @@ export default class PinnedStatuses extends ImmutablePureComponent {
<StatusList
statusIds={statusIds}
scrollKey='pinned_statuses'
shouldUpdateScroll={this.shouldUpdateScroll}
hasMore={hasMore}
/>
</Column>

View file

@ -71,10 +71,6 @@ export default class PublicTimeline extends React.PureComponent {
this.props.dispatch(expandPublicTimeline({ maxId }));
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen)
}
render () {
const { intl, columnId, hasUnread, multiColumn } = this.props;
const pinned = !!columnId;
@ -99,7 +95,6 @@ export default class PublicTimeline extends React.PureComponent {
onLoadMore={this.handleLoadMore}
trackScroll={!pinned}
scrollKey={`public_timeline-${columnId}`}
shouldUpdateScroll={this.shouldUpdateScroll}
emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other instances to fill it up' />}
/>
</Column>

View file

@ -33,6 +33,10 @@ export default class Reblogs extends ImmutablePureComponent {
}
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen);
}
render () {
const { accountIds } = this.props;
@ -48,7 +52,7 @@ export default class Reblogs extends ImmutablePureComponent {
<Column>
<ColumnBackButton />
<ScrollContainer scrollKey='reblogs'>
<ScrollContainer scrollKey='reblogs' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable reblogs'>
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
</div>

View file

@ -47,10 +47,6 @@ export default class CommunityTimeline extends React.PureComponent {
this.props.dispatch(expandCommunityTimeline({ maxId }));
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen)
}
render () {
const { intl } = this.props;
@ -66,7 +62,6 @@ export default class CommunityTimeline extends React.PureComponent {
timelineId='community'
onLoadMore={this.handleLoadMore}
scrollKey='standalone_public_timeline'
shouldUpdateScroll={this.shouldUpdateScroll}
trackScroll={false}
/>
</Column>

View file

@ -41,10 +41,6 @@ export default class HashtagTimeline extends React.PureComponent {
this.props.dispatch(expandHashtagTimeline(this.props.hashtag, { maxId }));
}
shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state && location.state.mastodonModalOpen)
}
render () {
const { hashtag } = this.props;
@ -59,7 +55,6 @@ export default class HashtagTimeline extends React.PureComponent {
<StatusListContainer
trackScroll={false}
scrollKey='standalone_hashtag_timeline'
shouldUpdateScroll={this.shouldUpdateScroll}
timelineId={`hashtag:${hashtag}`}
onLoadMore={this.handleLoadMore}
/>