toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

MM-17562 scroll to new message line indicator on componentDidUpdate (#3074)

Browse source 
* MM-17562 scroll to new message line indicator on componentDidUpdate

* feedback review

* Cancel animation frame requests
This commit is contained in:
Elias Nahum 2019-08-08 15:50:37 -04:00 committed by GitHub
parent e87858d7af
commit fddb0cf2fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
app/components/post_list/post_list.js
View file

@ -100,6 +100,7 @@ export default class PostList extends PureComponent {
if (this.props.channelId !== nextProps.channelId) {
this.contentOffsetY = 0;
this.hasDoneInitialScroll = false;
this.setState({contentHeight: 0});
}
}
@ -115,10 +116,22 @@ export default class PostList extends PureComponent {
this.scrollToBottom();
this.shouldScrollToBottom = false;
}
if (!this.hasDoneInitialScroll && this.props.initialIndex > 0 && this.state.contentHeight) {
this.scrollToInitialIndexIfNeeded(this.props.initialIndex);
}
}
componentWillUnmount() {
EventEmitter.off('scroll-to-bottom', this.handleSetScrollToBottom);
if (this.animationFrameIndexFailed) {
cancelAnimationFrame(this.animationFrameIndexFailed);
}
if (this.animationFrameInitialIndex) {
cancelAnimationFrame(this.animationFrameInitialIndex);
}
}
handleClosePermalink = () => {
@ -128,12 +141,12 @@ export default class PostList extends PureComponent {
};
handleContentSizeChange = (contentWidth, contentHeight) => {
this.scrollToInitialIndexIfNeeded(contentWidth, contentHeight);
if (this.state.postListHeight && contentHeight < this.state.postListHeight && this.props.extraData) {
// We still have less than 1 screen of posts loaded with more to get, so load more
this.props.onLoadMoreUp();
}
this.setState({contentHeight}, () => {
if (this.state.postListHeight && contentHeight < this.state.postListHeight && this.props.extraData) {
// We still have less than 1 screen of posts loaded with more to get, so load more
this.props.onLoadMoreUp();
}
});
};
handleDeepLink = (url) => {
@ -201,8 +214,12 @@ export default class PostList extends PureComponent {
};
handleScrollToIndexFailed = () => {
this.hasDoneInitialScroll = false;
this.scrollToInitialIndexIfNeeded(1, 1);
this.animationFrameIndexFailed = requestAnimationFrame(() => {
if (this.props.initialIndex > 0 && this.state.contentHeight > 0) {
this.hasDoneInitialScroll = false;
this.scrollToInitialIndexIfNeeded(this.props.initialIndex);
}
});
};
handleSetScrollToBottom = () => {
@ -284,23 +301,17 @@ export default class PostList extends PureComponent {
}, 250);
};
scrollToInitialIndexIfNeeded = (width, height) => {
if (
width > 0 &&
height > 0 &&
!this.hasDoneInitialScroll
) {
requestAnimationFrame(() => {
if (this.props.initialIndex > 0 && this.flatListRef?.current) {
this.flatListRef.current.scrollToIndex({
animated: false,
index: this.props.initialIndex,
viewOffset: 0,
viewPosition: 1, // 0 is at bottom
});
}
});
scrollToInitialIndexIfNeeded = (index) => {
if (!this.hasDoneInitialScroll && this.flatListRef?.current) {
this.hasDoneInitialScroll = true;
this.animationFrameInitialIndex = requestAnimationFrame(() => {
this.flatListRef.current.scrollToIndex({
animated: false,
index,
viewOffset: 0,
viewPosition: 1, // 0 is at bottom
});
});
}
};