diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/post_view/post_image.jsx | 5 | ||||
-rw-r--r-- | webapp/components/post_view/post_list.jsx | 33 | ||||
-rw-r--r-- | webapp/components/post_view/reaction_list/reaction_list.jsx | 8 | ||||
-rw-r--r-- | webapp/components/rhs_thread/rhs_thread.jsx | 4 | ||||
-rw-r--r-- | webapp/components/sidebar_right/sidebar_right.jsx | 9 |
5 files changed, 45 insertions, 14 deletions
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; diff --git a/webapp/components/rhs_thread/rhs_thread.jsx b/webapp/components/rhs_thread/rhs_thread.jsx index f4e7b33fa..50f5f0aa3 100644 --- a/webapp/components/rhs_thread/rhs_thread.jsx +++ b/webapp/components/rhs_thread/rhs_thread.jsx @@ -124,8 +124,8 @@ export default class RhsThread extends React.Component { this.mounted = false; } - componentDidUpdate(prevProps, prevState) { - const prevPostsArray = prevState.postsArray || []; + componentDidUpdate(prevProps) { + const prevPostsArray = prevProps.posts || []; const curPostsArray = this.props.posts || []; if (prevPostsArray.length >= curPostsArray.length) { diff --git a/webapp/components/sidebar_right/sidebar_right.jsx b/webapp/components/sidebar_right/sidebar_right.jsx index 00a7d2d25..f48bcaa56 100644 --- a/webapp/components/sidebar_right/sidebar_right.jsx +++ b/webapp/components/sidebar_right/sidebar_right.jsx @@ -15,6 +15,7 @@ import WebrtcStore from 'stores/webrtc_store.jsx'; import {getFlaggedPosts, getPinnedPosts} from 'actions/post_actions.jsx'; import {trackEvent} from 'actions/diagnostics_actions.jsx'; +import {postListScrollChange} from 'actions/global_actions.jsx'; import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; @@ -120,10 +121,16 @@ export default class SidebarRight extends React.Component { return null; } - componentDidUpdate() { + componentDidUpdate(prevProps, prevState) { const isOpen = this.state.searchVisible || this.props.postRightVisible; WebrtcStore.emitRhsChanged(isOpen); this.doStrangeThings(); + + const wasOpen = prevState.searchVisible || prevProps.postRightVisible; + + if (isOpen && !wasOpen) { + postListScrollChange(); + } } onPreferenceChange() { |