90cc44b340
* chore: make the room list panel a flexbox * feat(new room list): add `RoomListCell` component * feat(new room list): add virtualized `RoomList` component * feat(new room list): add `RoomListView` component * feat(new room list): use `RoomListView` in `RoomListPanel` * test(new room list): add test for room cell * test(new room list): update room list panel tests * test(new room list): add test to virtualized room list * test(e2e): add room list tests * test(e2e): update room panel tests
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
/*
|
|
* Copyright 2025 New Vector Ltd.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
* Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import React, { useCallback, type JSX } from "react";
|
|
import { AutoSizer, List, type ListRowProps } from "react-virtualized";
|
|
|
|
import { type RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
|
|
import { _t } from "../../../../languageHandler";
|
|
import { RoomListCell } from "./RoomListCell";
|
|
|
|
interface RoomListProps {
|
|
/**
|
|
* The view model state for the room list.
|
|
*/
|
|
vm: RoomListViewState;
|
|
}
|
|
|
|
/**
|
|
* A virtualized list of rooms.
|
|
*/
|
|
export function RoomList({ vm: { rooms, openRoom } }: RoomListProps): JSX.Element {
|
|
const roomRendererMemoized = useCallback(
|
|
({ key, index, style }: ListRowProps) => (
|
|
<RoomListCell room={rooms[index]} key={key} style={style} onClick={() => openRoom(rooms[index].roomId)} />
|
|
),
|
|
[rooms, openRoom],
|
|
);
|
|
|
|
// The first div is needed to make the virtualized list take all the remaining space and scroll correctly
|
|
return (
|
|
<div className="mx_RoomList" data-testid="room-list">
|
|
<AutoSizer>
|
|
{({ height, width }) => (
|
|
<List
|
|
aria-label={_t("room_list|list_title")}
|
|
className="mx_RoomList_List"
|
|
rowRenderer={roomRendererMemoized}
|
|
rowCount={rooms.length}
|
|
rowHeight={48}
|
|
height={height}
|
|
width={width}
|
|
/>
|
|
)}
|
|
</AutoSizer>
|
|
</div>
|
|
);
|
|
}
|