fix message scrolling on initial load

This commit is contained in:
or-else
2021-08-23 17:16:59 -07:00
parent 667d0e6d99
commit efc0dfddc0
+7 -7
View File
@@ -125,7 +125,7 @@ class MessagesView extends React.Component {
// or vertical shrinking. // or vertical shrinking.
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (this.messagesScroller) { if (this.messagesScroller) {
if (prevState.topic != this.state.topic || prevState.latestMsgSeq != this.state.latestMsgSeq) { if (prevState.topic != this.state.topic || prevState.messageCount != this.state.messageCount) {
// New message // New message
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition; this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition;
} else if (prevProps.viewportHeight > this.props.viewportHeight) { } else if (prevProps.viewportHeight > this.props.viewportHeight) {
@@ -209,7 +209,7 @@ class MessagesView extends React.Component {
if (!nextProps.topic) { if (!nextProps.topic) {
// Default state: no topic. // Default state: no topic.
nextState = { nextState = {
latestMsgSeq: -1, messageCount: 0,
latestClearId: -1, latestClearId: -1,
onlineSubs: [], onlineSubs: [],
topic: null, topic: null,
@@ -278,14 +278,14 @@ class MessagesView extends React.Component {
}); });
} }
Object.assign(nextState, { Object.assign(nextState, {
latestMsgSeq: topic.maxMsgSeq(), messageCount: topic.messageCount(),
latestClearId: topic.maxClearId(), latestClearId: topic.maxClearId(),
channel: topic.isChannelType() channel: topic.isChannelType()
}); });
} else { } else {
// Invalid topic. // Invalid topic.
Object.assign(nextState, { Object.assign(nextState, {
latestMsgSeq: -1, messageCount: 0,
latestClearId: -1, latestClearId: -1,
onlineSubs: [], onlineSubs: [],
title: '', title: '',
@@ -505,10 +505,10 @@ class MessagesView extends React.Component {
} }
clearTimeout(this.keyPressTimer) clearTimeout(this.keyPressTimer)
this.setState({latestMsgSeq: topic.maxMsgSeq(), typingIndicator: false}); this.setState({messageCount: topic.messageCount(), typingIndicator: false});
// If the message is added to the end of the message list, // Scroll to the bottom if the message is added to the end of the message list.
// scroll to the bottom. // TODO: This should be replaced by showing a "scroll to bottom" button.
if (topic.isNewMessage(msg.seq)) { if (topic.isNewMessage(msg.seq)) {
this.setState({scrollPosition: 0}); this.setState({scrollPosition: 0});
} }