1b48269db5
* Add room list sorting * Prettier * Unit test * Playwright test * Lint * Use released compound * No tooltip wrapper needed
80 lines
2.6 KiB
TypeScript
80 lines
2.6 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 { IconButton, Menu, MenuTitle, CheckboxMenuItem, Tooltip, RadioMenuItem } from "@vector-im/compound-web";
|
|
import React, { type Ref, type JSX, useState, useCallback } from "react";
|
|
import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
|
|
|
|
import { _t } from "../../../../languageHandler";
|
|
import { type RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
|
|
import { SortOption } from "../../../viewmodels/roomlist/useSorter";
|
|
|
|
interface MenuTriggerProps extends React.ComponentProps<typeof IconButton> {
|
|
ref?: Ref<HTMLButtonElement>;
|
|
}
|
|
|
|
const MenuTrigger = ({ ref, ...props }: MenuTriggerProps): JSX.Element => (
|
|
<Tooltip label={_t("room_list|room_options")}>
|
|
<IconButton
|
|
className="mx_RoomListSecondaryFilters_roomOptionsButton"
|
|
aria-label={_t("room_list|room_options")}
|
|
{...props}
|
|
ref={ref}
|
|
>
|
|
<OverflowHorizontalIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
);
|
|
|
|
interface Props {
|
|
/**
|
|
* The view model for the room list view
|
|
*/
|
|
vm: RoomListViewState;
|
|
}
|
|
|
|
export function RoomListOptionsMenu({ vm }: Props): JSX.Element {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const onActivitySelected = useCallback(() => {
|
|
vm.sort(SortOption.Activity);
|
|
}, [vm]);
|
|
|
|
const onAtoZSelected = useCallback(() => {
|
|
vm.sort(SortOption.AToZ);
|
|
}, [vm]);
|
|
|
|
return (
|
|
<Menu
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
title={_t("room_list|room_options")}
|
|
showTitle={false}
|
|
align="start"
|
|
trigger={<MenuTrigger />}
|
|
>
|
|
<MenuTitle title={_t("room_list|sort")} />
|
|
<RadioMenuItem
|
|
label={_t("room_list|sort_type|activity")}
|
|
checked={vm.activeSortOption === SortOption.Activity}
|
|
onSelect={onActivitySelected}
|
|
/>
|
|
<RadioMenuItem
|
|
label={_t("room_list|sort_type|atoz")}
|
|
checked={vm.activeSortOption === SortOption.AToZ}
|
|
onSelect={onAtoZSelected}
|
|
/>
|
|
<MenuTitle title={_t("room_list|appearance")} />
|
|
<CheckboxMenuItem
|
|
label={_t("room_list|show_message_previews")}
|
|
onSelect={vm.toggleMessagePreview}
|
|
checked={vm.shouldShowMessagePreview}
|
|
/>
|
|
</Menu>
|
|
);
|
|
}
|