mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-17 06:51:45 +03:00
a8e2c1bc2a
This commit moves the dial pad from a context menu to sit right by the explore button, in line with the designs in the linked issue. The dial pad button is only shown when PSTN support is detected.
591 lines
24 KiB
TypeScript
591 lines
24 KiB
TypeScript
/*
|
||
Copyright 2015-2018, 2020, 2021 The Matrix.org Foundation C.I.C.
|
||
|
||
Licensed under the Apache License, Version 2.0 (the "License");
|
||
you may not use this file except in compliance with the License.
|
||
You may obtain a copy of the License at
|
||
|
||
http://www.apache.org/licenses/LICENSE-2.0
|
||
|
||
Unless required by applicable law or agreed to in writing, software
|
||
distributed under the License is distributed on an "AS IS" BASIS,
|
||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
See the License for the specific language governing permissions and
|
||
limitations under the License.
|
||
*/
|
||
|
||
import React, { ReactComponentElement } from "react";
|
||
import { Dispatcher } from "flux";
|
||
import { Room } from "matrix-js-sdk/src/models/room";
|
||
import * as fbEmitter from "fbemitter";
|
||
import { EventType } from "matrix-js-sdk/src/@types/event";
|
||
|
||
import { _t, _td } from "../../../languageHandler";
|
||
import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
|
||
import ResizeNotifier from "../../../utils/ResizeNotifier";
|
||
import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
|
||
import RoomViewStore from "../../../stores/RoomViewStore";
|
||
import { ITagMap } from "../../../stores/room-list/algorithms/models";
|
||
import { DefaultTagID, isCustomTag, TagID } from "../../../stores/room-list/models";
|
||
import dis from "../../../dispatcher/dispatcher";
|
||
import defaultDispatcher from "../../../dispatcher/dispatcher";
|
||
import RoomSublist from "./RoomSublist";
|
||
import { ActionPayload } from "../../../dispatcher/payloads";
|
||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||
import GroupAvatar from "../avatars/GroupAvatar";
|
||
import ExtraTile from "./ExtraTile";
|
||
import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
|
||
import { Action } from "../../../dispatcher/actions";
|
||
import { ViewRoomDeltaPayload } from "../../../dispatcher/payloads/ViewRoomDeltaPayload";
|
||
import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
|
||
import SettingsStore from "../../../settings/SettingsStore";
|
||
import CustomRoomTagStore from "../../../stores/CustomRoomTagStore";
|
||
import { arrayFastClone, arrayHasDiff } from "../../../utils/arrays";
|
||
import { objectShallowClone, objectWithOnly } from "../../../utils/objects";
|
||
import { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../context_menus/IconizedContextMenu";
|
||
import AccessibleButton from "../elements/AccessibleButton";
|
||
import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
|
||
import SpaceStore, {ISuggestedRoom, SUGGESTED_ROOMS} from "../../../stores/SpaceStore";
|
||
import {showAddExistingRooms, showCreateNewRoom, showSpaceInvite} from "../../../utils/space";
|
||
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
||
import RoomAvatar from "../avatars/RoomAvatar";
|
||
|
||
interface IProps {
|
||
onKeyDown: (ev: React.KeyboardEvent) => void;
|
||
onFocus: (ev: React.FocusEvent) => void;
|
||
onBlur: (ev: React.FocusEvent) => void;
|
||
onResize: () => void;
|
||
onListCollapse?: (isExpanded: boolean) => void;
|
||
resizeNotifier: ResizeNotifier;
|
||
isMinimized: boolean;
|
||
activeSpace: Room;
|
||
}
|
||
|
||
interface IState {
|
||
sublists: ITagMap;
|
||
isNameFiltering: boolean;
|
||
currentRoomId?: string;
|
||
suggestedRooms: ISuggestedRoom[];
|
||
}
|
||
|
||
const TAG_ORDER: TagID[] = [
|
||
DefaultTagID.Invite,
|
||
DefaultTagID.Favourite,
|
||
DefaultTagID.DM,
|
||
DefaultTagID.Untagged,
|
||
|
||
// -- Custom Tags Placeholder --
|
||
|
||
DefaultTagID.LowPriority,
|
||
DefaultTagID.ServerNotice,
|
||
DefaultTagID.Suggested,
|
||
DefaultTagID.Archived,
|
||
];
|
||
const CUSTOM_TAGS_BEFORE_TAG = DefaultTagID.LowPriority;
|
||
const ALWAYS_VISIBLE_TAGS: TagID[] = [
|
||
DefaultTagID.DM,
|
||
DefaultTagID.Untagged,
|
||
];
|
||
|
||
interface ITagAesthetics {
|
||
sectionLabel: string;
|
||
sectionLabelRaw?: string;
|
||
addRoomLabel?: string;
|
||
onAddRoom?: (dispatcher?: Dispatcher<ActionPayload>) => void;
|
||
addRoomContextMenu?: (onFinished: () => void) => React.ReactNode;
|
||
isInvite: boolean;
|
||
defaultHidden: boolean;
|
||
}
|
||
|
||
interface ITagAestheticsMap {
|
||
// @ts-ignore - TS wants this to be a string but we know better
|
||
[tagId: TagID]: ITagAesthetics;
|
||
}
|
||
|
||
const TAG_AESTHETICS: ITagAestheticsMap = {
|
||
[DefaultTagID.Invite]: {
|
||
sectionLabel: _td("Invites"),
|
||
isInvite: true,
|
||
defaultHidden: false,
|
||
},
|
||
[DefaultTagID.Favourite]: {
|
||
sectionLabel: _td("Favourites"),
|
||
isInvite: false,
|
||
defaultHidden: false,
|
||
},
|
||
[DefaultTagID.DM]: {
|
||
sectionLabel: _td("People"),
|
||
isInvite: false,
|
||
defaultHidden: false,
|
||
addRoomLabel: _td("Start chat"),
|
||
onAddRoom: (dispatcher?: Dispatcher<ActionPayload>) => {
|
||
(dispatcher || defaultDispatcher).dispatch({action: 'view_create_chat'});
|
||
},
|
||
},
|
||
[DefaultTagID.Untagged]: {
|
||
sectionLabel: _td("Rooms"),
|
||
isInvite: false,
|
||
defaultHidden: false,
|
||
addRoomLabel: _td("Add room"),
|
||
addRoomContextMenu: (onFinished: () => void) => {
|
||
if (SpaceStore.instance.activeSpace) {
|
||
const canAddRooms = SpaceStore.instance.activeSpace.currentState.maySendStateEvent(EventType.SpaceChild,
|
||
MatrixClientPeg.get().getUserId());
|
||
|
||
return <IconizedContextMenuOptionList first>
|
||
<IconizedContextMenuOption
|
||
label={_t("Create new room")}
|
||
iconClassName="mx_RoomList_iconPlus"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onFinished();
|
||
showCreateNewRoom(MatrixClientPeg.get(), SpaceStore.instance.activeSpace);
|
||
}}
|
||
disabled={!canAddRooms}
|
||
tooltip={canAddRooms ? undefined
|
||
: _t("You do not have permissions to create new rooms in this space")}
|
||
/>
|
||
<IconizedContextMenuOption
|
||
label={_t("Add existing room")}
|
||
iconClassName="mx_RoomList_iconHash"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onFinished();
|
||
showAddExistingRooms(MatrixClientPeg.get(), SpaceStore.instance.activeSpace);
|
||
}}
|
||
disabled={!canAddRooms}
|
||
tooltip={canAddRooms ? undefined
|
||
: _t("You do not have permissions to add rooms to this space")}
|
||
/>
|
||
<IconizedContextMenuOption
|
||
label={_t("Explore rooms")}
|
||
iconClassName="mx_RoomList_iconBrowse"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onFinished();
|
||
defaultDispatcher.fire(Action.ViewRoomDirectory);
|
||
}}
|
||
/>
|
||
</IconizedContextMenuOptionList>;
|
||
}
|
||
|
||
return <IconizedContextMenuOptionList first>
|
||
<IconizedContextMenuOption
|
||
label={_t("Create new room")}
|
||
iconClassName="mx_RoomList_iconPlus"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onFinished();
|
||
defaultDispatcher.dispatch({action: "view_create_room"});
|
||
}}
|
||
/>
|
||
<IconizedContextMenuOption
|
||
label={CommunityPrototypeStore.instance.getSelectedCommunityId()
|
||
? _t("Explore community rooms")
|
||
: _t("Explore public rooms")}
|
||
iconClassName="mx_RoomList_iconExplore"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
onFinished();
|
||
defaultDispatcher.fire(Action.ViewRoomDirectory);
|
||
}}
|
||
/>
|
||
</IconizedContextMenuOptionList>;
|
||
},
|
||
},
|
||
[DefaultTagID.LowPriority]: {
|
||
sectionLabel: _td("Low priority"),
|
||
isInvite: false,
|
||
defaultHidden: false,
|
||
},
|
||
[DefaultTagID.ServerNotice]: {
|
||
sectionLabel: _td("System Alerts"),
|
||
isInvite: false,
|
||
defaultHidden: false,
|
||
},
|
||
|
||
// TODO: Replace with archived view: https://github.com/vector-im/element-web/issues/14038
|
||
[DefaultTagID.Archived]: {
|
||
sectionLabel: _td("Historical"),
|
||
isInvite: false,
|
||
defaultHidden: true,
|
||
},
|
||
|
||
[DefaultTagID.Suggested]: {
|
||
sectionLabel: _td("Suggested Rooms"),
|
||
isInvite: false,
|
||
defaultHidden: false,
|
||
},
|
||
};
|
||
|
||
function customTagAesthetics(tagId: TagID): ITagAesthetics {
|
||
if (tagId.startsWith("u.")) {
|
||
tagId = tagId.substring(2);
|
||
}
|
||
return {
|
||
sectionLabel: _td("Custom Tag"),
|
||
sectionLabelRaw: tagId,
|
||
isInvite: false,
|
||
defaultHidden: false,
|
||
};
|
||
}
|
||
|
||
@replaceableComponent("views.rooms.RoomList")
|
||
export default class RoomList extends React.PureComponent<IProps, IState> {
|
||
private dispatcherRef;
|
||
private customTagStoreRef;
|
||
private roomStoreToken: fbEmitter.EventSubscription;
|
||
|
||
constructor(props: IProps) {
|
||
super(props);
|
||
|
||
this.state = {
|
||
sublists: {},
|
||
isNameFiltering: !!RoomListStore.instance.getFirstNameFilterCondition(),
|
||
suggestedRooms: SpaceStore.instance.suggestedRooms,
|
||
};
|
||
}
|
||
|
||
public componentDidMount(): void {
|
||
this.dispatcherRef = defaultDispatcher.register(this.onAction);
|
||
this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
|
||
SpaceStore.instance.on(SUGGESTED_ROOMS, this.updateSuggestedRooms);
|
||
RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists);
|
||
this.customTagStoreRef = CustomRoomTagStore.addListener(this.updateLists);
|
||
this.updateLists(); // trigger the first update
|
||
}
|
||
|
||
public componentWillUnmount() {
|
||
SpaceStore.instance.off(SUGGESTED_ROOMS, this.updateSuggestedRooms);
|
||
RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.updateLists);
|
||
defaultDispatcher.unregister(this.dispatcherRef);
|
||
if (this.customTagStoreRef) this.customTagStoreRef.remove();
|
||
if (this.roomStoreToken) this.roomStoreToken.remove();
|
||
}
|
||
|
||
private onRoomViewStoreUpdate = () => {
|
||
this.setState({
|
||
currentRoomId: RoomViewStore.getRoomId(),
|
||
});
|
||
};
|
||
|
||
private onAction = (payload: ActionPayload) => {
|
||
if (payload.action === Action.ViewRoomDelta) {
|
||
const viewRoomDeltaPayload = payload as ViewRoomDeltaPayload;
|
||
const currentRoomId = RoomViewStore.getRoomId();
|
||
const room = this.getRoomDelta(currentRoomId, viewRoomDeltaPayload.delta, viewRoomDeltaPayload.unread);
|
||
if (room) {
|
||
dis.dispatch({
|
||
action: 'view_room',
|
||
room_id: room.roomId,
|
||
show_room_tile: true, // to make sure the room gets scrolled into view
|
||
});
|
||
}
|
||
} else if (payload.action === Action.PstnSupportUpdated) {
|
||
this.updateLists();
|
||
}
|
||
};
|
||
|
||
private getRoomDelta = (roomId: string, delta: number, unread = false) => {
|
||
const lists = RoomListStore.instance.orderedLists;
|
||
const rooms: Room[] = [];
|
||
TAG_ORDER.forEach(t => {
|
||
let listRooms = lists[t];
|
||
|
||
if (unread) {
|
||
// filter to only notification rooms (and our current active room so we can index properly)
|
||
listRooms = listRooms.filter(r => {
|
||
const state = RoomNotificationStateStore.instance.getRoomState(r);
|
||
return state.room.roomId === roomId || state.isUnread;
|
||
});
|
||
}
|
||
|
||
rooms.push(...listRooms);
|
||
});
|
||
|
||
const currentIndex = rooms.findIndex(r => r.roomId === roomId);
|
||
// use slice to account for looping around the start
|
||
const [room] = rooms.slice((currentIndex + delta) % rooms.length);
|
||
return room;
|
||
};
|
||
|
||
private updateSuggestedRooms = (suggestedRooms: ISuggestedRoom[]) => {
|
||
this.setState({ suggestedRooms });
|
||
};
|
||
|
||
private updateLists = () => {
|
||
const newLists = RoomListStore.instance.orderedLists;
|
||
if (SettingsStore.getValue("advancedRoomListLogging")) {
|
||
// TODO: Remove debug: https://github.com/vector-im/element-web/issues/14602
|
||
console.log("new lists", newLists);
|
||
}
|
||
|
||
const previousListIds = Object.keys(this.state.sublists);
|
||
const newListIds = Object.keys(newLists).filter(t => {
|
||
if (!isCustomTag(t)) return true; // always include non-custom tags
|
||
|
||
// if the tag is custom though, only include it if it is enabled
|
||
return CustomRoomTagStore.getTags()[t];
|
||
});
|
||
|
||
const isNameFiltering = !!RoomListStore.instance.getFirstNameFilterCondition();
|
||
let doUpdate = this.state.isNameFiltering !== isNameFiltering || arrayHasDiff(previousListIds, newListIds);
|
||
if (!doUpdate) {
|
||
// so we didn't have the visible sublists change, but did the contents of those
|
||
// sublists change significantly enough to break the sticky headers? Probably, so
|
||
// let's check the length of each.
|
||
for (const tagId of newListIds) {
|
||
const oldRooms = this.state.sublists[tagId];
|
||
const newRooms = newLists[tagId];
|
||
if (oldRooms.length !== newRooms.length) {
|
||
doUpdate = true;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (doUpdate) {
|
||
// We have to break our reference to the room list store if we want to be able to
|
||
// diff the object for changes, so do that.
|
||
// @ts-ignore - ITagMap is ts-ignored so this will have to be too
|
||
const newSublists = objectWithOnly(newLists, newListIds);
|
||
const sublists = objectShallowClone(newSublists, (k, v) => arrayFastClone(v));
|
||
|
||
this.setState({sublists, isNameFiltering}, () => {
|
||
this.props.onResize();
|
||
});
|
||
}
|
||
};
|
||
|
||
private onStartChat = () => {
|
||
const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search;
|
||
dis.dispatch({ action: "view_create_chat", initialText });
|
||
};
|
||
|
||
private onExplore = () => {
|
||
const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search;
|
||
dis.dispatch({ action: Action.ViewRoomDirectory, initialText });
|
||
};
|
||
|
||
private onSpaceInviteClick = () => {
|
||
const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search;
|
||
showSpaceInvite(this.props.activeSpace, initialText);
|
||
};
|
||
|
||
private renderSuggestedRooms(): ReactComponentElement<typeof ExtraTile>[] {
|
||
return this.state.suggestedRooms.map(room => {
|
||
const name = room.name || room.canonical_alias || room.aliases?.[0] || _t("Empty room");
|
||
const avatar = (
|
||
<RoomAvatar
|
||
oobData={{
|
||
name,
|
||
avatarUrl: room.avatar_url,
|
||
}}
|
||
width={32}
|
||
height={32}
|
||
resizeMethod="crop"
|
||
/>
|
||
);
|
||
const viewRoom = () => {
|
||
defaultDispatcher.dispatch({
|
||
action: "view_room",
|
||
room_alias: room.canonical_alias || room.aliases?.[0],
|
||
room_id: room.room_id,
|
||
via_servers: room.viaServers,
|
||
oobData: {
|
||
avatarUrl: room.avatar_url,
|
||
name,
|
||
},
|
||
});
|
||
};
|
||
return (
|
||
<ExtraTile
|
||
isMinimized={this.props.isMinimized}
|
||
isSelected={this.state.currentRoomId === room.room_id}
|
||
displayName={name}
|
||
avatar={avatar}
|
||
onClick={viewRoom}
|
||
key={`suggestedRoomTile_${room.room_id}`}
|
||
/>
|
||
);
|
||
});
|
||
}
|
||
|
||
private renderCommunityInvites(): ReactComponentElement<typeof ExtraTile>[] {
|
||
if (SettingsStore.getValue("feature_spaces")) return [];
|
||
// TODO: Put community invites in a more sensible place (not in the room list)
|
||
// See https://github.com/vector-im/element-web/issues/14456
|
||
return MatrixClientPeg.get().getGroups().filter(g => {
|
||
return g.myMembership === 'invite';
|
||
}).map(g => {
|
||
const avatar = (
|
||
<GroupAvatar
|
||
groupId={g.groupId}
|
||
groupName={g.name}
|
||
groupAvatarUrl={g.avatarUrl}
|
||
width={32} height={32} resizeMethod='crop'
|
||
/>
|
||
);
|
||
const openGroup = () => {
|
||
defaultDispatcher.dispatch({
|
||
action: 'view_group',
|
||
group_id: g.groupId,
|
||
});
|
||
};
|
||
return (
|
||
<ExtraTile
|
||
isMinimized={this.props.isMinimized}
|
||
isSelected={false}
|
||
displayName={g.name}
|
||
avatar={avatar}
|
||
notificationState={StaticNotificationState.RED_EXCLAMATION}
|
||
onClick={openGroup}
|
||
key={`temporaryGroupTile_${g.groupId}`}
|
||
/>
|
||
);
|
||
});
|
||
}
|
||
|
||
private renderSublists(): React.ReactElement[] {
|
||
// show a skeleton UI if the user is in no rooms and they are not filtering
|
||
const showSkeleton = !this.state.isNameFiltering &&
|
||
Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length);
|
||
|
||
return TAG_ORDER.reduce((tags, tagId) => {
|
||
if (tagId === CUSTOM_TAGS_BEFORE_TAG) {
|
||
const customTags = Object.keys(this.state.sublists)
|
||
.filter(tagId => isCustomTag(tagId));
|
||
tags.push(...customTags);
|
||
}
|
||
tags.push(tagId);
|
||
return tags;
|
||
}, [] as TagID[])
|
||
.map(orderedTagId => {
|
||
let extraTiles = null;
|
||
if (orderedTagId === DefaultTagID.Invite) {
|
||
extraTiles = this.renderCommunityInvites();
|
||
} else if (orderedTagId === DefaultTagID.Suggested) {
|
||
extraTiles = this.renderSuggestedRooms();
|
||
}
|
||
|
||
const aesthetics: ITagAesthetics = isCustomTag(orderedTagId)
|
||
? customTagAesthetics(orderedTagId)
|
||
: TAG_AESTHETICS[orderedTagId];
|
||
if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
|
||
|
||
// The cost of mounting/unmounting this component offsets the cost
|
||
// of keeping it in the DOM and hiding it when it is not required
|
||
return <RoomSublist
|
||
key={`sublist-${orderedTagId}`}
|
||
tagId={orderedTagId}
|
||
forRooms={true}
|
||
startAsHidden={aesthetics.defaultHidden}
|
||
label={aesthetics.sectionLabelRaw ? aesthetics.sectionLabelRaw : _t(aesthetics.sectionLabel)}
|
||
onAddRoom={aesthetics.onAddRoom}
|
||
addRoomLabel={aesthetics.addRoomLabel ? _t(aesthetics.addRoomLabel) : aesthetics.addRoomLabel}
|
||
addRoomContextMenu={aesthetics.addRoomContextMenu}
|
||
isMinimized={this.props.isMinimized}
|
||
showSkeleton={showSkeleton}
|
||
extraTiles={extraTiles}
|
||
resizeNotifier={this.props.resizeNotifier}
|
||
alwaysVisible={ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
|
||
onListCollapse={this.props.onListCollapse}
|
||
/>
|
||
});
|
||
}
|
||
|
||
public render() {
|
||
const cli = MatrixClientPeg.get();
|
||
const userId = cli.getUserId();
|
||
|
||
let explorePrompt: JSX.Element;
|
||
if (!this.props.isMinimized) {
|
||
if (this.state.isNameFiltering) {
|
||
explorePrompt = <div className="mx_RoomList_explorePrompt">
|
||
<div>{_t("Can't see what you’re looking for?")}</div>
|
||
<AccessibleButton
|
||
className="mx_RoomList_explorePrompt_startChat"
|
||
kind="link"
|
||
onClick={this.onStartChat}
|
||
>
|
||
{_t("Start a new chat")}
|
||
</AccessibleButton>
|
||
<AccessibleButton
|
||
className="mx_RoomList_explorePrompt_explore"
|
||
kind="link"
|
||
onClick={this.onExplore}
|
||
>
|
||
{ this.props.activeSpace ? _t("Explore rooms") : _t("Explore all public rooms") }
|
||
</AccessibleButton>
|
||
</div>;
|
||
} else if (
|
||
this.props.activeSpace?.canInvite(userId) || this.props.activeSpace?.getMyMembership() === "join"
|
||
) {
|
||
explorePrompt = <div className="mx_RoomList_explorePrompt">
|
||
<div>{ _t("Quick actions") }</div>
|
||
{ this.props.activeSpace.canInvite(userId) && <AccessibleButton
|
||
className="mx_RoomList_explorePrompt_spaceInvite"
|
||
onClick={this.onSpaceInviteClick}
|
||
>
|
||
{_t("Invite people")}
|
||
</AccessibleButton> }
|
||
{ this.props.activeSpace.getMyMembership() === "join" && <AccessibleButton
|
||
className="mx_RoomList_explorePrompt_spaceExplore"
|
||
onClick={this.onExplore}
|
||
>
|
||
{_t("Explore rooms")}
|
||
</AccessibleButton> }
|
||
</div>;
|
||
} else if (Object.values(this.state.sublists).some(list => list.length > 0)) {
|
||
const unfilteredLists = RoomListStore.instance.unfilteredLists
|
||
const unfilteredRooms = unfilteredLists[DefaultTagID.Untagged] || [];
|
||
const unfilteredHistorical = unfilteredLists[DefaultTagID.Archived] || [];
|
||
const unfilteredFavourite = unfilteredLists[DefaultTagID.Favourite] || [];
|
||
// show a prompt to join/create rooms if the user is in 0 rooms and no historical
|
||
if (unfilteredRooms.length < 1 && unfilteredHistorical < 1 && unfilteredFavourite < 1) {
|
||
explorePrompt = <div className="mx_RoomList_explorePrompt">
|
||
<div>{_t("Use the + to make a new room or explore existing ones below")}</div>
|
||
<AccessibleButton
|
||
className="mx_RoomList_explorePrompt_startChat"
|
||
kind="link"
|
||
onClick={this.onStartChat}
|
||
>
|
||
{_t("Start a new chat")}
|
||
</AccessibleButton>
|
||
<AccessibleButton
|
||
className="mx_RoomList_explorePrompt_explore"
|
||
kind="link"
|
||
onClick={this.onExplore}
|
||
>
|
||
{_t("Explore all public rooms")}
|
||
</AccessibleButton>
|
||
</div>;
|
||
}
|
||
}
|
||
}
|
||
|
||
const sublists = this.renderSublists();
|
||
return (
|
||
<RovingTabIndexProvider handleHomeEnd={true} onKeyDown={this.props.onKeyDown}>
|
||
{({onKeyDownHandler}) => (
|
||
<div
|
||
onFocus={this.props.onFocus}
|
||
onBlur={this.props.onBlur}
|
||
onKeyDown={onKeyDownHandler}
|
||
className="mx_RoomList"
|
||
role="tree"
|
||
aria-label={_t("Rooms")}
|
||
>
|
||
{sublists}
|
||
{explorePrompt}
|
||
</div>
|
||
)}
|
||
</RovingTabIndexProvider>
|
||
);
|
||
}
|
||
}
|