diff --git a/bigbluebutton-html5/imports/ui/components/chat/time-window-list/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/time-window-list/component.jsx index 88971b84fc126b2a390becf721a4ebc9a55710d3..2e2e54d0006e217595db8e142134c21aa452361b 100644 --- a/bigbluebutton-html5/imports/ui/components/chat/time-window-list/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/chat/time-window-list/component.jsx @@ -80,7 +80,11 @@ class TimeWindowList extends PureComponent { } componentDidMount() { - // TODO: re-implement scroll to position using virtualized list + const { scrollPosition: scrollProps } = this.props; + + this.setState({ + scrollPosition: scrollProps, + }); } componentDidUpdate(prevProps) { @@ -99,6 +103,7 @@ class TimeWindowList extends PureComponent { syncing, syncedPercent, lastTimeWindowValuesBuild, + scrollPosition: scrollProps, } = this.props; const { @@ -108,6 +113,12 @@ class TimeWindowList extends PureComponent { syncedPercent: prevSyncedPercent } = prevProps; + if (prevChatId !== chatId) { + this.setState({ + scrollPosition: scrollProps, + }); + } + const prevTimeWindowsLength = prevTimeWindowsValues.length; const timeWindowsValuesLength = timeWindowsValues.length; const prevLastTimeWindow = prevTimeWindowsValues[prevTimeWindowsLength - 1]; @@ -257,6 +268,7 @@ class TimeWindowList extends PureComponent { const { intl, count, + timeWindowsValues, } = this.props; const { userScrolledBack } = this.state; @@ -269,9 +281,15 @@ class TimeWindowList extends PureComponent { size="sm" key="unread-messages" label={intl.formatMessage(intlMessages.moreMessages)} - onClick={()=> this.setState({ - userScrolledBack: false, - })} + onClick={()=> { + const lastItemIndex = timeWindowsValues.length - 1; + this.handleScrollUpdate(lastItemIndex); + + this.setState({ + scrollPosition: lastItemIndex, + userScrolledBack: false, + }); + }} /> ); } @@ -285,10 +303,12 @@ class TimeWindowList extends PureComponent { } = this.props; const { scrollArea, - userScrolledBack, + scrollPosition, } = this.state; ChatLogger.debug('TimeWindowList::render', {...this.props}, {...this.state}, new Date()); + const shouldAutoScroll = !!(scrollPosition && timeWindowsValues.length >= scrollPosition); + return ( [<div onMouseDown={()=> { @@ -328,7 +348,7 @@ class TimeWindowList extends PureComponent { } } }} - isScrolling={true} + isScrolling rowHeight={this.cache.rowHeight} className={styles.messageList} rowRenderer={this.rowRender} @@ -337,10 +357,11 @@ class TimeWindowList extends PureComponent { width={width} overscanRowCount={0} deferredMeasurementCache={this.cache} - scrollToIndex={ - !userScrolledBack ? timeWindowsValues.length - 1 : undefined - } - onScroll={({ clientHeight, scrollHeight, scrollTop })=> { + scrollToIndex={shouldAutoScroll ? scrollPosition : undefined} + onRowsRendered={({ stopIndex }) => { + this.handleScrollUpdate(stopIndex); + }} + onScroll={({ clientHeight, scrollHeight, scrollTop }) => { const scrollSize = scrollTop + clientHeight; if (scrollSize >= scrollHeight) { this.setState({