): JSX.Element => {
- const {
- id,
- i18n,
- haveOldest,
- items,
- renderItem,
- renderHeroRow,
- renderLastSeenIndicator,
- renderTypingBubble,
- unblurAvatar,
- updateSharedGroups,
- } = this.props;
- const { lastMeasuredWarningHeight, widthBreakpoint } = this.state;
-
- const commonProps = {
- 'data-row': rowIndex,
- style: {
- ...style,
- width: `${this.mostRecentWidth}px`,
- },
- role: 'row',
- };
-
- let rowContents: ReactChild;
- switch (rowIndex) {
- case getHeroRow(this.props):
- rowContents = (
-
- {Timeline.getWarning(this.props, this.state) ? (
-
- ) : null}
- {renderHeroRow(
- id,
- this.resizeHeroRow,
- unblurAvatar,
- updateSharedGroups
- )}
-
{renderLastSeenIndicator(id)}
;
- break;
- case getTypingBubbleRow(this.props):
- rowContents = (
-
- {renderTypingBubble(id)}
-
- );
- break;
- default:
- {
- const itemIndex = fromRowToItemIndex(rowIndex, this.props);
- if (typeof itemIndex !== 'number') {
- throw new Error(
- `Attempted to render item with undefined index - row ${rowIndex}`
- );
- }
- const previousMessageId: undefined | string = items[itemIndex - 1];
- const messageId = items[itemIndex];
- const nextMessageId: undefined | string = items[itemIndex + 1];
-
- const actionProps = getActions(this.props);
-
- rowContents = (
-
- window.showDebugLog()}
- >
- {renderItem({
- actionProps,
- containerElementRef: this.containerRef,
- containerWidthBreakpoint: widthBreakpoint,
- conversationId: id,
- isOldestTimelineItem: haveOldest && itemIndex === 0,
- messageId,
- nextMessageId,
- onHeightChange: this.resizeMessage,
- previousMessageId,
- })}
-
-
- );
- }
- break;
- }
-
- return (
-
- {rowContents}
-
- );
- };
-
- private getRowHeightFromCache = ({
- index,
- }: Readonly<{ index: number }>): number =>
- this.cellSizeCache.getHeight(index);
+ private scrollToItemIndex(itemIndex: number): void {
+ this.messagesRef.current
+ ?.querySelector(`[data-item-index="${itemIndex}"]`)
+ ?.scrollIntoViewIfNeeded();
+ }
private scrollToBottom = (setFocus?: boolean): void => {
const { selectMessage, id, items } = this.props;
@@ -878,15 +307,12 @@ export class Timeline extends React.PureComponent {
const lastIndex = items.length - 1;
const lastMessageId = items[lastIndex];
selectMessage(lastMessageId, id);
+ } else {
+ const containerEl = this.containerRef.current;
+ if (containerEl) {
+ scrollToBottom(containerEl);
+ }
}
-
- const oneTimeScrollRow =
- items && items.length > 0 ? items.length - 1 : undefined;
-
- this.setState({
- propScrollToIndex: undefined,
- oneTimeScrollRow,
- });
};
private onClickScrollDownButton = (): void => {
@@ -903,243 +329,308 @@ export class Timeline extends React.PureComponent {
oldestUnreadIndex,
selectMessage,
} = this.props;
+ const { newestFullyVisibleMessageId } = this.state;
+
if (!items || items.length < 1) {
return;
}
- const lastId = items[items.length - 1];
- const lastSeenIndicatorRow = getLastSeenIndicatorRow(this.props);
-
- const { visibleRows } = this.state;
- if (!visibleRows) {
- if (haveNewest) {
- this.scrollToBottom(setFocus);
- } else if (!isLoadingMessages) {
- loadNewestMessages(lastId, setFocus);
- }
-
+ if (isLoadingMessages) {
+ this.scrollToBottom(setFocus);
return;
}
- const { newestFullyVisible } = visibleRows;
-
if (
- newestFullyVisible &&
- isNumber(lastSeenIndicatorRow) &&
- newestFullyVisible.row < lastSeenIndicatorRow
+ newestFullyVisibleMessageId &&
+ isNumber(oldestUnreadIndex) &&
+ items.findIndex(item => item === newestFullyVisibleMessageId) <
+ oldestUnreadIndex
) {
- if (setFocus && isNumber(oldestUnreadIndex)) {
+ if (setFocus) {
const messageId = items[oldestUnreadIndex];
selectMessage(messageId, id);
+ } else {
+ this.scrollToItemIndex(oldestUnreadIndex);
}
- this.setState({
- oneTimeScrollRow: lastSeenIndicatorRow,
- });
} else if (haveNewest) {
this.scrollToBottom(setFocus);
- } else if (!isLoadingMessages) {
- loadNewestMessages(lastId, setFocus);
+ } else {
+ const lastId = last(items);
+ if (lastId) {
+ loadNewestMessages(lastId, setFocus);
+ }
}
};
+ private isAtBottom(): boolean {
+ const containerEl = this.containerRef.current;
+ return Boolean(
+ containerEl && getScrollBottom(containerEl) <= AT_BOTTOM_THRESHOLD
+ );
+ }
+
+ /**
+ * Re-initialize our `IntersectionObserver`. This replaces the old observer because (1)
+ * we don't want stale references to old props (2) we care about the order of the
+ * `IntersectionObserverEntry`s.
+ *
+ * This isn't the only way to solve this problem. For example, we could have a single
+ * observer for the lifetime of the component and update it intelligently. This approach
+ * seems to work, though!
+ */
+ private updateIntersectionObserver(): void {
+ const containerEl = this.containerRef.current;
+ const messagesEl = this.messagesRef.current;
+ if (!containerEl || !messagesEl) {
+ return;
+ }
+
+ const {
+ haveNewest,
+ haveOldest,
+ isLoadingMessages,
+ items,
+ loadNewerMessages,
+ loadOlderMessages,
+ } = this.props;
+
+ this.intersectionObserver?.disconnect();
+
+ // Keys are message IDs. Values are intersection ratios.
+ const visibleMessages = new Map();
+
+ const intersectionObserverCallback: IntersectionObserverCallback =
+ entries => {
+ entries.forEach(entry => {
+ const { intersectionRatio, target } = entry;
+ const {
+ dataset: { messageId },
+ } = target as HTMLElement;
+ if (!messageId) {
+ return;
+ }
+ visibleMessages.set(messageId, intersectionRatio);
+ });
+
+ let oldestPartiallyVisibleMessageId: undefined | string;
+ let newestFullyVisibleMessageId: undefined | string;
+
+ for (const [messageId, intersectionRatio] of visibleMessages) {
+ if (intersectionRatio > 0 && !oldestPartiallyVisibleMessageId) {
+ oldestPartiallyVisibleMessageId = messageId;
+ }
+ if (intersectionRatio >= 1) {
+ newestFullyVisibleMessageId = messageId;
+ }
+ }
+
+ this.setState({
+ oldestPartiallyVisibleMessageId,
+ newestFullyVisibleMessageId,
+ });
+
+ if (newestFullyVisibleMessageId) {
+ this.markNewestFullyVisibleMessageRead();
+
+ if (
+ !isLoadingMessages &&
+ !haveNewest &&
+ newestFullyVisibleMessageId === last(items)
+ ) {
+ loadNewerMessages(newestFullyVisibleMessageId);
+ }
+ }
+
+ if (
+ !isLoadingMessages &&
+ !haveOldest &&
+ oldestPartiallyVisibleMessageId &&
+ oldestPartiallyVisibleMessageId === items[0]
+ ) {
+ loadOlderMessages(oldestPartiallyVisibleMessageId);
+ }
+ };
+
+ this.intersectionObserver = new IntersectionObserver(
+ intersectionObserverCallback,
+ {
+ root: containerEl,
+ threshold: [0, 1],
+ }
+ );
+
+ for (const child of messagesEl.children) {
+ if ((child as HTMLElement).dataset.messageId) {
+ this.intersectionObserver.observe(child);
+ }
+ }
+ }
+
+ private markNewestFullyVisibleMessageRead = throttle(
+ (): void => {
+ const { markMessageRead } = this.props;
+ const { newestFullyVisibleMessageId } = this.state;
+ if (newestFullyVisibleMessageId) {
+ markMessageRead(newestFullyVisibleMessageId);
+ }
+ },
+ 500,
+ { leading: false }
+ );
+
public override componentDidMount(): void {
- this.updateWithVisibleRows();
- window.registerForActive(this.updateWithVisibleRows);
+ const containerEl = this.containerRef.current;
+ const messagesEl = this.messagesRef.current;
+ strictAssert(
+ containerEl && messagesEl,
+ ' mounted without some refs'
+ );
+
+ // This observer is necessary to keep the scroll position locked to the bottom when
+ // messages change height without "telling" the timeline about it. This can happen
+ // if messages animate their height, if reactions are changed, etc.
+ //
+ // We do this synchronously (i.e., without react-measure) to avoid jitter.
+ this.messagesResizeObserver = new ResizeObserver(() => {
+ const { haveNewest } = this.props;
+ if (haveNewest && this.isAtBottom()) {
+ scrollToBottom(containerEl);
+ }
+ });
+ this.messagesResizeObserver.observe(messagesEl);
+
+ this.updateIntersectionObserver();
+
+ window.registerForActive(this.markNewestFullyVisibleMessageRead);
this.delayedPeekTimeout = setTimeout(() => {
const { id, peekGroupCallForTheFirstTime } = this.props;
peekGroupCallForTheFirstTime(id);
}, 500);
+
+ this.nowThatUpdatesEveryMinuteInterval = setInterval(() => {
+ this.setState({ nowThatUpdatesEveryMinute: Date.now() });
+ }, MINUTE);
}
public override componentWillUnmount(): void {
- const { delayedPeekTimeout } = this;
+ const {
+ delayedPeekTimeout,
+ nowThatUpdatesEveryMinuteInterval: nowThatUpdatesEveryMinuteTimeout,
+ } = this;
- window.unregisterForActive(this.updateWithVisibleRows);
+ window.unregisterForActive(this.markNewestFullyVisibleMessageRead);
+
+ this.messagesResizeObserver?.disconnect();
+ this.intersectionObserver?.disconnect();
clearTimeoutIfNecessary(delayedPeekTimeout);
+ clearTimeoutIfNecessary(nowThatUpdatesEveryMinuteTimeout);
+ }
+
+ public override getSnapshotBeforeUpdate(
+ prevProps: Readonly
+ ): SnapshotType {
+ const containerEl = this.containerRef.current;
+ if (!containerEl) {
+ return null;
+ }
+
+ const {
+ isLoadingMessages: wasLoadingMessages,
+ items: oldItems,
+ scrollToIndexCounter: oldScrollToIndexCounter,
+ typingContactId: oldTypingContactId,
+ } = prevProps;
+ const {
+ isIncomingMessageRequest,
+ isLoadingMessages,
+ items: newItems,
+ scrollToIndex,
+ scrollToIndexCounter: newScrollToIndexCounter,
+ typingContactId,
+ } = this.props;
+
+ const isDoingInitialLoad = isLoadingMessages && newItems.length === 0;
+ const wasDoingInitialLoad = wasLoadingMessages && oldItems.length === 0;
+ const justFinishedInitialLoad = wasDoingInitialLoad && !isDoingInitialLoad;
+
+ if (isDoingInitialLoad) {
+ return null;
+ }
+
+ if (
+ isNumber(scrollToIndex) &&
+ (oldScrollToIndexCounter !== newScrollToIndexCounter ||
+ justFinishedInitialLoad)
+ ) {
+ return { scrollToIndex };
+ }
+
+ if (justFinishedInitialLoad) {
+ return isIncomingMessageRequest ? { scrollTop: 0 } : { scrollBottom: 0 };
+ }
+
+ if (
+ Boolean(typingContactId) !== Boolean(oldTypingContactId) &&
+ this.isAtBottom()
+ ) {
+ return { scrollBottom: 0 };
+ }
+
+ // This method assumes that item operations happen one at a time. For example, items
+ // are not added and removed in the same render pass.
+ if (oldItems.length === newItems.length) {
+ return null;
+ }
+
+ let scrollAnchor: 'top' | 'bottom';
+ if (this.isAtBottom()) {
+ const justLoadedAPage = wasLoadingMessages && !isLoadingMessages;
+ scrollAnchor = justLoadedAPage ? 'top' : 'bottom';
+ } else {
+ scrollAnchor = last(oldItems) !== last(newItems) ? 'top' : 'bottom';
+ }
+
+ return scrollAnchor === 'top'
+ ? { scrollTop: containerEl.scrollTop }
+ : { scrollBottom: getScrollBottom(containerEl) };
}
public override componentDidUpdate(
prevProps: Readonly,
- prevState: Readonly
+ _prevState: Readonly,
+ snapshot: Readonly
): void {
- const {
- clearChangedMessages,
- haveOldest,
- id,
- isIncomingMessageRequest,
- items,
- messageHeightChangeIndex,
- messageHeightChangeBaton,
- oldestUnreadIndex,
- resetCounter,
- scrollToIndex,
- typingContactId,
- } = this.props;
+ const { items: oldItems } = prevProps;
+ const { discardMessages, id, items: newItems } = this.props;
- // We recompute the hero row's height if:
- //
- // 1. We just started showing it (the user has scrolled up to see the hero row)
- // 2. Warnings were shown (they add padding to the hero for the floating warning)
- const hadOldest = prevProps.haveOldest;
- const hadWarning = Boolean(Timeline.getWarning(prevProps, prevState));
- const haveWarning = Boolean(Timeline.getWarning(this.props, this.state));
- const shouldRecomputeRowHeights =
- (!hadOldest && haveOldest) || hadWarning !== haveWarning;
- if (shouldRecomputeRowHeights) {
- this.resizeHeroRow();
- }
-
- // There are a number of situations which can necessitate that we forget about row
- // heights previously calculated. We reset the minimum number of rows to minimize
- // unexpected changes to the scroll position. Those changes happen because
- // react-virtualized doesn't know what to expect (variable row heights) when it
- // renders, so it does have a fixed row it's attempting to scroll to, and you ask it
- // to render a given point it space, it will do pretty random things.
-
- if (
- !prevProps.items ||
- prevProps.items.length === 0 ||
- resetCounter !== prevProps.resetCounter
- ) {
- if (prevProps.items && prevProps.items.length > 0) {
- this.resize();
- }
-
- // We want to come in at the top of the conversation if it's a message request
- const oneTimeScrollRow = isIncomingMessageRequest
- ? undefined
- : getLastSeenIndicatorRow(this.props);
- const atBottom = !isIncomingMessageRequest;
-
- // TODO: DESKTOP-688
- // eslint-disable-next-line react/no-did-update-set-state
- this.setState({
- oneTimeScrollRow,
- atBottom,
- propScrollToIndex: scrollToIndex,
- prevPropScrollToIndex: scrollToIndex,
- });
-
- return;
- }
-
- let resizeStartRow: number | undefined;
-
- if (isNumber(messageHeightChangeIndex)) {
- resizeStartRow = fromItemIndexToRow(messageHeightChangeIndex, this.props);
- clearChangedMessages(id, messageHeightChangeBaton);
- }
-
- if (
- items !== prevProps.items ||
- oldestUnreadIndex !== prevProps.oldestUnreadIndex ||
- Boolean(typingContactId) !== Boolean(prevProps.typingContactId)
- ) {
- const { atTop } = this.state;
-
- // This clause handles prepended messages when user scrolls up. New
- // messages are added to `items`, but we want to keep the scroll position
- // at the first previously visible message even though the row numbers
- // have now changed.
- if (atTop) {
- const oldFirstIndex = 0;
- const oldFirstId = prevProps.items[oldFirstIndex];
-
- const newFirstIndex = items.findIndex(item => item === oldFirstId);
- if (newFirstIndex < 0) {
- this.resize();
-
- return;
- }
-
- const newRow = fromItemIndexToRow(newFirstIndex, this.props);
- if (newRow > 0) {
- // We're loading more new messages at the top; we want to stay at the top
- this.resize();
- // TODO: DESKTOP-688
- // eslint-disable-next-line react/no-did-update-set-state
- this.setState({ oneTimeScrollRow: newRow });
-
- return;
- }
- }
-
- // Compare current rows against previous rows to identify the number of
- // consecutive rows (from start of the list) the are the same in both
- // lists.
- const rowsIterator = getEphemeralRows(this.props);
- const prevRowsIterator = getEphemeralRows(prevProps);
-
- let firstChangedRow = 0;
- // eslint-disable-next-line no-constant-condition
- while (true) {
- const row = rowsIterator.next();
- if (row.done) {
- break;
- }
-
- const prevRow = prevRowsIterator.next();
- if (prevRow.done) {
- break;
- }
-
- if (prevRow.value !== row.value) {
- break;
- }
-
- firstChangedRow += 1;
- }
-
- // If either:
- //
- // - Row count has changed after props update
- // - There are some different rows (and the loop above was interrupted)
- //
- // Recompute heights of all rows starting from the first changed row or
- // the last row in the previous row list.
- if (!rowsIterator.next().done || !prevRowsIterator.next().done) {
- resizeStartRow = Math.min(
- resizeStartRow ?? firstChangedRow,
- firstChangedRow
- );
+ const containerEl = this.containerRef.current;
+ if (containerEl && snapshot) {
+ if ('scrollToIndex' in snapshot) {
+ this.scrollToItemIndex(snapshot.scrollToIndex);
+ } else if ('scrollTop' in snapshot) {
+ containerEl.scrollTop = snapshot.scrollTop;
+ } else {
+ setScrollBottom(containerEl, snapshot.scrollBottom);
}
}
- if (this.resizeFlag) {
- this.resize();
+ if (oldItems.length !== newItems.length) {
+ this.updateIntersectionObserver();
- return;
+ // This condition is somewhat arbitrary.
+ const shouldDiscardOlderMessages: boolean =
+ this.isAtBottom() && newItems.length >= this.maxVisibleRows * 1.5;
+ if (shouldDiscardOlderMessages) {
+ discardMessages({
+ conversationId: id,
+ numberToKeepAtBottom: this.maxVisibleRows,
+ });
+ }
}
-
- if (resizeStartRow !== undefined) {
- this.resize(resizeStartRow);
- }
-
- this.updateWithVisibleRows();
}
- private getScrollTarget = (): number | undefined => {
- const { oneTimeScrollRow, atBottom, propScrollToIndex } = this.state;
-
- const rowCount = getRowCount(this.props);
- const targetMessageRow = isNumber(propScrollToIndex)
- ? fromItemIndexToRow(propScrollToIndex, this.props)
- : undefined;
- const scrollToBottom = atBottom ? rowCount - 1 : undefined;
-
- if (isNumber(targetMessageRow)) {
- return targetMessageRow;
- }
-
- if (isNumber(oneTimeScrollRow)) {
- return oneTimeScrollRow;
- }
-
- return scrollToBottom;
- };
-
private handleBlur = (event: React.FocusEvent): void => {
const { clearSelectedMessage } = this.props;
@@ -1221,20 +712,17 @@ export class Timeline extends React.PureComponent {
}
if (commandOrCtrl && event.key === 'ArrowUp') {
- this.setState({ oneTimeScrollRow: 0 });
-
- const firstMessageId = items[0];
- selectMessage(firstMessageId, id);
-
- event.preventDefault();
- event.stopPropagation();
-
+ const firstMessageId = first(items);
+ if (firstMessageId) {
+ selectMessage(firstMessageId, id);
+ event.preventDefault();
+ event.stopPropagation();
+ }
return;
}
if (commandOrCtrl && event.key === 'ArrowDown') {
this.scrollDown(true);
-
event.preventDefault();
event.stopPropagation();
}
@@ -1249,49 +737,87 @@ export class Timeline extends React.PureComponent {
contactSpoofingReview,
getPreferredBadge,
getTimestampForMessage,
+ haveNewest,
haveOldest,
i18n,
id,
invitedContactsForNewlyCreatedGroup,
+ isConversationSelected,
isGroupV1AndDisabled,
isLoadingMessages,
items,
+ oldestUnreadIndex,
onBlock,
onBlockAndReportSpam,
onDelete,
onUnblock,
- showContactModal,
removeMember,
+ renderHeroRow,
+ renderItem,
+ renderLastSeenIndicator,
+ renderTypingBubble,
reviewGroupMemberNameCollision,
reviewMessageRequestNameCollision,
+ showContactModal,
theme,
+ typingContactId,
+ unblurAvatar,
+ unreadCount,
+ updateSharedGroups,
} = this.props;
const {
- shouldShowScrollDownButton,
- areUnreadBelowCurrentPosition,
hasRecentlyScrolled,
lastMeasuredWarningHeight,
- visibleRows,
+ newestFullyVisibleMessageId,
+ nowThatUpdatesEveryMinute,
+ oldestPartiallyVisibleMessageId,
widthBreakpoint,
} = this.state;
- const rowCount = getRowCount(this.props);
- const scrollToIndex = this.getScrollTarget();
-
- if (!items || rowCount === 0) {
+ // As a performance optimization, we don't need to render anything if this
+ // conversation isn't the active one.
+ if (!isConversationSelected) {
return null;
}
+ const areThereAnyMessages = items.length > 0;
+ const areAnyMessagesUnread = Boolean(unreadCount);
+ const areAnyMessagesBelowCurrentPosition =
+ !haveNewest ||
+ Boolean(
+ newestFullyVisibleMessageId &&
+ newestFullyVisibleMessageId !== last(items)
+ );
+ const areSomeMessagesBelowCurrentPosition =
+ !haveNewest ||
+ (newestFullyVisibleMessageId &&
+ !items
+ .slice(-SCROLL_DOWN_BUTTON_THRESHOLD)
+ .includes(newestFullyVisibleMessageId));
+
+ const areUnreadBelowCurrentPosition = Boolean(
+ areThereAnyMessages &&
+ areAnyMessagesUnread &&
+ areAnyMessagesBelowCurrentPosition
+ );
+ const shouldShowScrollDownButton = Boolean(
+ areThereAnyMessages &&
+ (areUnreadBelowCurrentPosition || areSomeMessagesBelowCurrentPosition)
+ );
+
+ const actionProps = getActions(this.props);
+
let floatingHeader: ReactNode;
- const oldestPartiallyVisibleMessageId =
- visibleRows?.oldestPartiallyVisibleMessageId;
// It's possible that a message was removed from `items` but we still have its ID in
// state. `getTimestampForMessage` might return undefined in that case.
const oldestPartiallyVisibleMessageTimestamp =
oldestPartiallyVisibleMessageId
? getTimestampForMessage(oldestPartiallyVisibleMessageId)
: undefined;
- if (oldestPartiallyVisibleMessageTimestamp) {
+ if (
+ oldestPartiallyVisibleMessageId &&
+ oldestPartiallyVisibleMessageTimestamp
+ ) {
floatingHeader = (
{
);
}
- const autoSizer = (
-
- {({ height, width }) => {
- if (this.mostRecentWidth && this.mostRecentWidth !== width) {
- this.resizeFlag = true;
+ const messageNodes: Array = [];
+ for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) {
+ const previousMessageId: undefined | string = items[itemIndex - 1];
+ const nextMessageId: undefined | string = items[itemIndex + 1];
+ const messageId = items[itemIndex];
- setTimeout(this.resize, 0);
- } else if (
- this.mostRecentHeight &&
- this.mostRecentHeight !== height
- ) {
- setTimeout(this.onHeightOnlyChange, 0);
- }
+ if (!messageId) {
+ assert(
+ false,
+ ' iterated through items and got an empty message ID'
+ );
+ continue;
+ }
- this.mostRecentWidth = width;
- this.mostRecentHeight = height;
+ if (oldestUnreadIndex === itemIndex) {
+ messageNodes.push(
+ {renderLastSeenIndicator(id)}
+ );
+ }
- return (
-
- );
- }}
-
- );
+ messageNodes.push(
+
+
+ {renderItem({
+ actionProps,
+ containerElementRef: this.containerRef,
+ containerWidthBreakpoint: widthBreakpoint,
+ conversationId: id,
+ isOldestTimelineItem: haveOldest && itemIndex === 0,
+ messageId,
+ nextMessageId,
+ now: nowThatUpdatesEveryMinute,
+ previousMessageId,
+ })}
+
+
+ );
+ }
const warning = Timeline.getWarning(this.props, this.state);
let timelineWarning: ReactNode;
@@ -1502,9 +1018,20 @@ export class Timeline extends React.PureComponent {
{
+ const { isNearBottom } = this.props;
+
+ strictAssert(bounds, 'We should be measuring the bounds');
+
this.setState({
- widthBreakpoint: getWidthBreakpoint(bounds?.width || 0),
+ widthBreakpoint: getWidthBreakpoint(bounds.width),
});
+
+ this.maxVisibleRows = Math.ceil(bounds.height / MIN_ROW_HEIGHT);
+
+ const containerEl = this.containerRef.current;
+ if (containerEl && isNearBottom) {
+ scrollToBottom(containerEl);
+ }
}}
>
{({ measureRef }) => (
@@ -1518,13 +1045,35 @@ export class Timeline extends React.PureComponent {
tabIndex={-1}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
- ref={this.containerRefMerger(measureRef)}
+ ref={measureRef}
>
{timelineWarning}
{floatingHeader}
- {autoSizer}
+
+
+ {haveOldest && (
+ <>
+ {Timeline.getWarning(this.props, this.state) && (
+
+ )}
+ {renderHeroRow(id, unblurAvatar, updateSharedGroups)}
+
+ )}
+
+ {messageNodes}
+
+ {typingContactId && renderTypingBubble(id)}
+
+