From ca8d57c4dbfe839db28b583caa7d599c0cfc023a Mon Sep 17 00:00:00 2001 From: Joram Wilander Date: Fri, 23 Jun 2017 12:09:56 -0400 Subject: PLT-6890 Fix various scrolling issues (#6727) * Fix various scrolling issues * Move reaction scrolling to reaction list * Handle scrolling when RHS opens * Only run scroll update code when posts change --- webapp/components/post_view/post_image.jsx | 5 ++++ webapp/components/post_view/post_list.jsx | 33 ++++++++++++++-------- .../post_view/reaction_list/reaction_list.jsx | 8 ++++++ 3 files changed, 35 insertions(+), 11 deletions(-) (limited to 'webapp/components/post_view') diff --git a/webapp/components/post_view/post_image.jsx b/webapp/components/post_view/post_image.jsx index 5feb01db4..322742305 100644 --- a/webapp/components/post_view/post_image.jsx +++ b/webapp/components/post_view/post_image.jsx @@ -4,6 +4,8 @@ import React from 'react'; import PropTypes from 'prop-types'; +import {postListScrollChange} from 'actions/global_actions.jsx'; + export default class PostImageEmbed extends React.PureComponent { static propTypes = { @@ -66,6 +68,9 @@ export default class PostImageEmbed extends React.PureComponent { loaded: true, errored: false }); + + postListScrollChange(); + if (this.props.onLinkLoaded) { this.props.onLinkLoaded(); } diff --git a/webapp/components/post_view/post_list.jsx b/webapp/components/post_view/post_list.jsx index bf0ee079d..3ae768b5c 100644 --- a/webapp/components/post_view/post_list.jsx +++ b/webapp/components/post_view/post_list.jsx @@ -12,6 +12,8 @@ import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; import {createChannelIntroMessage} from 'utils/channel_intro_messages.jsx'; import DelayedAction from 'utils/delayed_action.jsx'; +import EventTypes from 'utils/event_types.jsx'; +import GlobalEventEmitter from 'utils/global_event_emitter.jsx'; import {FormattedDate, FormattedMessage} from 'react-intl'; @@ -113,11 +115,13 @@ export default class PostList extends React.PureComponent { componentDidMount() { this.loadPosts(this.props.channel.id, this.props.focusedPostId); + GlobalEventEmitter.addListener(EventTypes.POST_LIST_SCROLL_CHANGE, this.handleResize); window.addEventListener('resize', this.handleResize); } componentWillUnmount() { + GlobalEventEmitter.removeListener(EventTypes.POST_LIST_SCROLL_CHANGE, this.handleResize); window.removeEventListener('resize', this.handleResize); } @@ -171,14 +175,25 @@ export default class PostList extends React.PureComponent { } componentDidUpdate(prevProps) { + // Do not update scrolling unless posts change + if (this.props.posts === prevProps.posts) { + return; + } + + const prevPosts = prevProps.posts; + const posts = this.props.posts; + const postList = this.refs.postlist; + // Scroll to focused post on first load const focusedPost = this.refs[this.props.focusedPostId]; - if (focusedPost) { - if (!this.hasScrolledToFocusedPost && this.props.posts) { + if (focusedPost && this.props.posts) { + if (!this.hasScrolledToFocusedPost) { const element = ReactDOM.findDOMNode(focusedPost); const rect = element.getBoundingClientRect(); - const listHeight = this.refs.postlist.clientHeight / 2; - this.refs.postlist.scrollTop = this.refs.postlist.scrollTop + (rect.top - listHeight); + const listHeight = postList.clientHeight / 2; + postList.scrollTop += postList.scrollTop + (rect.top - listHeight); + } else if (this.previousScrollHeight !== postList.scrollHeight && posts[0].id === prevPosts[0].id) { + postList.scrollTop = this.previousScrollTop + (postList.scrollHeight - this.previousScrollHeight); } return; } @@ -190,14 +205,10 @@ export default class PostList extends React.PureComponent { element.scrollIntoView(); return; } else if (this.refs.postlist && !this.hasScrolledToNewMessageSeparator) { - this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight; + postList.scrollTop = postList.scrollHeight; return; } - const prevPosts = prevProps.posts; - const posts = this.props.posts; - const postList = this.refs.postlist; - if (postList && prevPosts && posts && posts[0] && prevPosts[0]) { // A new message was posted, so scroll to bottom if it was from current user // or if user was already scrolled close to bottom @@ -225,8 +236,8 @@ export default class PostList extends React.PureComponent { } // New posts added at the top, maintain scroll position - if (this.previousScrollHeight !== this.refs.postlist.scrollHeight && posts[0].id === prevPosts[0].id) { - this.refs.postlist.scrollTop = this.previousScrollTop + (this.refs.postlist.scrollHeight - this.previousScrollHeight); + if (this.previousScrollHeight !== postList.scrollHeight && posts[0].id === prevPosts[0].id) { + postList.scrollTop = this.previousScrollTop + (postList.scrollHeight - this.previousScrollHeight); } } } diff --git a/webapp/components/post_view/reaction_list/reaction_list.jsx b/webapp/components/post_view/reaction_list/reaction_list.jsx index 516f5332f..4d2f3a5fc 100644 --- a/webapp/components/post_view/reaction_list/reaction_list.jsx +++ b/webapp/components/post_view/reaction_list/reaction_list.jsx @@ -4,6 +4,8 @@ import React from 'react'; import PropTypes from 'prop-types'; +import {postListScrollChange} from 'actions/global_actions.jsx'; + import Reaction from 'components/post_view/reaction'; export default class ReactionListView extends React.PureComponent { @@ -38,6 +40,12 @@ export default class ReactionListView extends React.PureComponent { } } + componentDidUpdate(prevProps) { + if (this.props.reactions !== prevProps.reactions) { + postListScrollChange(); + } + } + render() { if (!this.props.post.has_reactions || (this.props.reactions && this.props.reactions.length === 0)) { return null; -- cgit v1.2.3-1-g7c22