Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

Commit

Permalink
* Revert to old logic for scroll correction
Browse files Browse the repository at this point in the history 
* Add missing string to en.json
* Add logic for scroll corrections when height of textbox changes
  • Loading branch information
@sudheerDev
sudheerDev committed May 7, 2019
1 parent 5852bd0 commit ecda0db
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 19 deletions.
82 changes: 64 additions & 18 deletions components/post_view/post_list_normal/post_list_normal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,10 @@ export default class PostList extends React.PureComponent {

this.scrollStopAction = new DelayedAction(this.handleScrollStop);

this.previousScrollTop = Number.MAX_SAFE_INTEGER;
this.previousScrollHeight = 0;
this.previousClientHeight = 0;
this.atBottom = false;
this.extraPagesLoaded = 0;
this.loadingPosts = false;

Expand Down Expand Up @@ -113,19 +117,47 @@ export default class PostList extends React.PureComponent {
window.removeEventListener('resize', this.handleWindowResize);
}

getSnapshotBeforeUpdate() {
UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
// Focusing on a new post so load posts around it
if (nextProps.focusedPostId && this.props.focusedPostId !== nextProps.focusedPostId) {
this.hasScrolledToFocusedPost = false;
this.hasScrolledToNewMessageSeparator = false;
this.setState({atEnd: false, isDoingInitialLoad: !nextProps.posts});
this.loadPosts(nextProps.channel.id, nextProps.focusedPostId);
return;
}

const channel = this.props.channel || {};
const nextChannel = nextProps.channel || {};

if (nextProps.focusedPostId == null) {
// Channel changed so load posts for new channel
if (channel.id !== nextChannel.id) {
this.hasScrolled = false;
this.hasScrolledToFocusedPost = false;
this.hasScrolledToNewMessageSeparator = false;
this.atBottom = false;

this.extraPagesLoaded = 0;

this.setState({atEnd: false, lastViewed: nextProps.lastViewedAt, isDoingInitialLoad: !nextProps.posts, unViewedCount: 0});

if (nextChannel.id) {
this.loadPosts(nextChannel.id);
}
}
}
}

UNSAFE_componentWillUpdate() { // eslint-disable-line camelcase
if (this.refs.postlist) {
return {
previousScrollTop: this.refs.postlist.scrollTop,
previousScrollHeight: this.refs.postlist.scrollHeight,
previousClientHeight: this.refs.postlist.clientHeight,
wasAtBottom: this.checkBottom(),
};
}
return null;
this.previousScrollTop = this.refs.postlist.scrollTop;
this.previousScrollHeight = this.refs.postlist.scrollHeight;
this.previousClientHeight = this.refs.postlist.clientHeight;
}
}

componentDidUpdate(prevProps, prevState, snapshot) {
componentDidUpdate(prevProps, prevState) {
if (this.props.focusedPostId && this.props.focusedPostId !== prevProps.focusedPostId) {
this.hasScrolledToFocusedPost = false;
this.hasScrolledToNewMessageSeparator = false;
Expand Down Expand Up @@ -155,7 +187,7 @@ export default class PostList extends React.PureComponent {
if (this.props.focusedPostId == null) {
const hasNewPosts = (prevPosts.length === 0 && posts.length > 0) || (prevPosts.length > 0 && posts.length > 0 && prevPosts[0].id !== posts[0].id);

if (snapshot && !snapshot.wasAtBottom && hasNewPosts) {
if (!this.checkBottom() && hasNewPosts) {
this.setUnreadsBelow(posts, this.props.currentUserId);
}
}
Expand All @@ -173,8 +205,9 @@ export default class PostList extends React.PureComponent {
const rect = element.getBoundingClientRect();
const listHeight = postList.clientHeight / 2;
postList.scrollTop += rect.top - listHeight;
} else if (snapshot.previousScrollHeight !== postList.scrollHeight && posts[0].id === prevPosts[0].id) {
postList.scrollTop = snapshot.previousScrollTop + (postList.scrollHeight - snapshot.previousScrollHeight);
this.atBottom = this.checkBottom();
} else if (this.previousScrollHeight !== postList.scrollHeight && posts[0].id === prevPosts[0].id) {
postList.scrollTop = this.previousScrollTop + (postList.scrollHeight - this.previousScrollHeight);
}
return;
}
Expand All @@ -198,7 +231,7 @@ export default class PostList extends React.PureComponent {
const pendingPostId = posts[0].pending_post_id;
if (postId !== prevPostId && pendingPostId !== prevPostId) {
// If already scrolled to bottom
if (snapshot.wasAtBottom) {
if (this.atBottom) {
doScrollToBottom = true;
}

Expand All @@ -209,13 +242,14 @@ export default class PostList extends React.PureComponent {
}

if (doScrollToBottom) {
this.atBottom = true;
postList.scrollTop = postList.scrollHeight;
return;
}

// New posts added at the top, maintain scroll position
if (snapshot.previousScrollHeight !== postList.scrollHeight && posts[0].id === prevPosts[0].id) {
postList.scrollTop = snapshot.previousScrollTop + (postList.scrollHeight - snapshot.previousScrollHeight);
if (this.previousScrollHeight !== postList.scrollHeight && posts[0].id === prevPosts[0].id) {
postList.scrollTop = this.previousScrollTop + (postList.scrollHeight - this.previousScrollHeight);
}
}
}
Expand Down Expand Up @@ -280,6 +314,7 @@ export default class PostList extends React.PureComponent {

// Scroll to bottom since we don't have unread posts or we can show every new post in the screen
postList.scrollTop = postList.scrollHeight;
this.atBottom = true;
return true;
}

Expand Down Expand Up @@ -325,7 +360,7 @@ export default class PostList extends React.PureComponent {
handleResize = (forceScrollToBottom) => {
const postList = this.refs.postlist;
const messageSeparator = this.refs.newMessageSeparator;
const doScrollToBottom = this.checkBottom() || forceScrollToBottom;
const doScrollToBottom = this.atBottom || forceScrollToBottom;

if (postList) {
if (doScrollToBottom) {
Expand All @@ -334,6 +369,11 @@ export default class PostList extends React.PureComponent {
const element = ReactDOM.findDOMNode(messageSeparator);
element.scrollIntoView();
}
this.previousScrollHeight = postList.scrollHeight;
this.previousScrollTop = postList.scrollTop;
this.previousClientHeight = postList.clientHeight;

this.atBottom = this.checkBottom();
}

this.props.actions.checkAndSetMobileView();
Expand Down Expand Up @@ -392,6 +432,12 @@ export default class PostList extends React.PureComponent {

this.updateFloatingTimestamp();

this.previousScrollTop = this.refs.postlist.scrollTop;

if (this.refs.postlist.scrollHeight === this.previousScrollHeight) {
this.atBottom = this.checkBottom();
}

if (!this.state.isScrolling) {
this.setState({
isScrolling: true,
Expand Down Expand Up @@ -592,7 +638,7 @@ export default class PostList extends React.PureComponent {
createAt={topPostCreateAt}
/>
<ScrollToBottomArrows
isScrolling={this.state.isScrolling}
isScrolling={this.state.atBottom}
atBottom={this.checkBottom()}
onClick={this.scrollToBottom}
/>
Expand Down
3 changes: 2 additions & 1 deletion components/textbox/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {connect} from 'react-redux';

import {getCurrentUserId, makeGetProfilesInChannel, makeGetProfilesNotInChannel} from 'mattermost-redux/selectors/entities/users';

import {autocompleteUsersInChannel} from 'actions/views/channel';
import {autocompleteUsersInChannel, scrollPostList} from 'actions/views/channel';

import Textbox from './textbox.jsx';

Expand All @@ -24,6 +24,7 @@ const makeMapStateToProps = () => {
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators({
autocompleteUsersInChannel,
scrollPostList,
}, dispatch),
});

Expand Down
4 changes: 4 additions & 0 deletions components/textbox/textbox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export default class Textbox extends React.Component {
profilesNotInChannel: PropTypes.arrayOf(PropTypes.object).isRequired,
actions: PropTypes.shape({
autocompleteUsersInChannel: PropTypes.func.isRequired,
scrollPostList: PropTypes.func.isRequired,
}),
};

Expand Down Expand Up @@ -117,6 +118,9 @@ export default class Textbox extends React.Component {
if (this.props.onHeightChange) {
this.props.onHeightChange(height, maxHeight);
}
if (Utils.disableVirtList()) {
this.props.actions.scrollPostList();
}
}

focus = () => {
Expand Down
1 change: 1 addition & 0 deletions i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2547,6 +2547,7 @@
"posts_view.loadMore": "Load more messages",
"posts_view.newMsg": "New Messages",
"posts_view.newMsgBelow": "New {count, plural, one {message} other {messages}}",
"posts_view.maxLoaded": "Looking for a specific message? Try searching for it",
"quick_switch_modal.channels": "Channels",
"quick_switch_modal.channelsShortcut.mac": "- ⌘K",
"quick_switch_modal.channelsShortcut.windows": "- CTRL+K",
Expand Down

0 comments on commit ecda0db

Please sign in to comment.