Extract ListView controller from ConversationList

This commit is contained in:
Alvaro 2022-11-14 11:48:51 -07:00 committed by GitHub
parent 1b901522c2
commit 6b42a69947
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 91 additions and 31 deletions

View file

@ -2,9 +2,8 @@
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactNode } from 'react';
import React, { useRef, useEffect, useCallback } from 'react';
import React, { useCallback } from 'react';
import type { ListRowRenderer } from 'react-virtualized';
import { List } from 'react-virtualized';
import classNames from 'classnames';
import { get, pick } from 'lodash';
@ -33,6 +32,7 @@ import { SearchResultsLoadingFakeHeader as SearchResultsLoadingFakeHeaderCompone
import { SearchResultsLoadingFakeRow as SearchResultsLoadingFakeRowComponent } from './conversationList/SearchResultsLoadingFakeRow';
import { UsernameSearchResultListItem } from './conversationList/UsernameSearchResultListItem';
import { GroupListItem } from './conversationList/GroupListItem';
import { ListView } from './ListView';
export enum RowType {
ArchiveButton = 'ArchiveButton',
@ -203,17 +203,8 @@ export const ConversationList: React.FC<PropsType> = ({
showConversation,
theme,
}) => {
const listRef = useRef<null | List>(null);
useEffect(() => {
const list = listRef.current;
if (shouldRecomputeRowHeights && list) {
list.recomputeRowHeights();
}
});
const calculateRowHeight = useCallback(
({ index }: { index: number }): number => {
(index: number): number => {
const row = getRow(index);
if (!row) {
assertDev(false, `Expected a row at index ${index}`);
@ -472,25 +463,20 @@ export const ConversationList: React.FC<PropsType> = ({
const widthBreakpoint = getConversationListWidthBreakpoint(width);
return (
<List
<ListView
className={classNames(
'module-conversation-list',
`module-conversation-list--scroll-behavior-${scrollBehavior}`,
`module-conversation-list--width-${widthBreakpoint}`
)}
width={width}
height={height}
ref={listRef}
rowCount={rowCount}
rowHeight={calculateRowHeight}
calculateRowHeight={calculateRowHeight}
rowRenderer={renderRow}
scrollToIndex={scrollToRowIndex}
style={{
// See `<Timeline>` for an explanation of this `any` cast.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
overflowY: scrollable ? ('overlay' as any) : 'hidden',
}}
tabIndex={-1}
width={width}
shouldRecomputeRowHeights={shouldRecomputeRowHeights}
scrollable={scrollable}
scrollBehavior={scrollBehavior}
/>
);
};