Replace onScrollToBottom with onLoadMore (#6615)

onScrollToBottom was a function to run instead of onScrollToTop and
onScroll when scrolling to the bottom. The behavior to prevent
onScrollToTop was inconvenient because the viewport can be at the bottom
and at the top at the same time if the viewport is larger than the
container.

onScrollToBottom was also called when the button to load more is clicked
on contray to the name suggests, which led notifications and
status_list_container components to mark the scrolled location is not at
the top mistakenly.

onLoadMore is a replacement for onScrollToBottom. It will be called
independently from onScrollToTop and onScroll.
This commit is contained in:
Akihiko Odaki 2018-03-06 03:31:40 +09:00 committed by Eugen Rochko
parent a38dbd9c8a
commit b0664a5e6c
6 changed files with 16 additions and 18 deletions

View File

@ -17,7 +17,7 @@ export default class ScrollableList extends PureComponent {
static propTypes = {
scrollKey: PropTypes.string.isRequired,
onScrollToBottom: PropTypes.func,
onLoadMore: PropTypes.func.isRequired,
onScrollToTop: PropTypes.func,
onScroll: PropTypes.func,
trackScroll: PropTypes.bool,
@ -45,9 +45,11 @@ export default class ScrollableList extends PureComponent {
const offset = scrollHeight - scrollTop - clientHeight;
this._oldScrollPosition = scrollHeight - scrollTop;
if (400 > offset && this.props.onScrollToBottom && !this.props.isLoading) {
this.props.onScrollToBottom();
} else if (scrollTop < 100 && this.props.onScrollToTop) {
if (400 > offset && this.props.onLoadMore && !this.props.isLoading) {
this.props.onLoadMore();
}
if (scrollTop < 100 && this.props.onScrollToTop) {
this.props.onScrollToTop();
} else if (this.props.onScroll) {
this.props.onScroll();
@ -138,7 +140,7 @@ export default class ScrollableList extends PureComponent {
handleLoadMore = (e) => {
e.preventDefault();
this.props.onScrollToBottom();
this.props.onLoadMore();
}
_recentlyMoved () {

View File

@ -12,7 +12,7 @@ export default class StatusList extends ImmutablePureComponent {
scrollKey: PropTypes.string.isRequired,
statusIds: ImmutablePropTypes.list.isRequired,
featuredStatusIds: ImmutablePropTypes.list,
onScrollToBottom: PropTypes.func,
onLoadMore: PropTypes.func,
onScrollToTop: PropTypes.func,
onScroll: PropTypes.func,
trackScroll: PropTypes.bool,

View File

@ -52,7 +52,7 @@ export default class AccountTimeline extends ImmutablePureComponent {
}
}
handleScrollToBottom = () => {
handleLoadMore = () => {
if (!this.props.isLoading && this.props.hasMore) {
this.props.dispatch(expandAccountTimeline(this.props.params.accountId, this.props.withReplies));
}
@ -80,7 +80,7 @@ export default class AccountTimeline extends ImmutablePureComponent {
featuredStatusIds={featuredStatusIds}
isLoading={isLoading}
hasMore={hasMore}
onScrollToBottom={this.handleScrollToBottom}
onLoadMore={this.handleLoadMore}
/>
</Column>
);

View File

@ -62,7 +62,7 @@ export default class Favourites extends ImmutablePureComponent {
this.column = c;
}
handleScrollToBottom = debounce(() => {
handleLoadMore = debounce(() => {
this.props.dispatch(expandFavouritedStatuses());
}, 300, { leading: true })
@ -89,7 +89,7 @@ export default class Favourites extends ImmutablePureComponent {
scrollKey={`favourited_statuses-${columnId}`}
hasMore={hasMore}
isLoading={isLoading}
onScrollToBottom={this.handleScrollToBottom}
onLoadMore={this.handleLoadMore}
/>
</Column>
);

View File

@ -51,14 +51,13 @@ export default class Notifications extends React.PureComponent {
};
componentWillUnmount () {
this.handleScrollToBottom.cancel();
this.handleLoadMore.cancel();
this.handleScrollToTop.cancel();
this.handleScroll.cancel();
this.props.dispatch(scrollTopNotifications(false));
}
handleScrollToBottom = debounce(() => {
this.props.dispatch(scrollTopNotifications(false));
handleLoadMore = debounce(() => {
this.props.dispatch(expandNotifications());
}, 300, { leading: true });
@ -143,7 +142,7 @@ export default class Notifications extends React.PureComponent {
isLoading={isLoading}
hasMore={hasMore}
emptyMessage={emptyMessage}
onScrollToBottom={this.handleScrollToBottom}
onLoadMore={this.handleLoadMore}
onScrollToTop={this.handleScrollToTop}
onScroll={this.handleScroll}
shouldUpdateScroll={shouldUpdateScroll}

View File

@ -56,10 +56,7 @@ const makeMapStateToProps = () => {
const mapDispatchToProps = (dispatch, { timelineId, loadMore }) => ({
onScrollToBottom: debounce(() => {
dispatch(scrollTopTimeline(timelineId, false));
loadMore();
}, 300, { leading: true }),
onLoadMore: debounce(loadMore, 300, { leading: true }),
onScrollToTop: debounce(() => {
dispatch(scrollTopTimeline(timelineId, true));