2020-05-08 21:53:05 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
|
|
Copyright 2017 New Vector Ltd
|
|
|
|
Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
|
|
|
|
Copyright 2019, 2020 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, { createRef } from "react";
|
|
|
|
import { Room } from "matrix-js-sdk/src/models/room";
|
|
|
|
import classNames from "classnames";
|
|
|
|
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
|
2020-06-16 23:43:48 +03:00
|
|
|
import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton";
|
2020-05-14 22:45:17 +03:00
|
|
|
import dis from '../../../dispatcher/dispatcher';
|
2020-05-12 01:29:32 +03:00
|
|
|
import { Key } from "../../../Keyboard";
|
2020-06-05 23:08:20 +03:00
|
|
|
import ActiveRoomObserver from "../../../ActiveRoomObserver";
|
2020-06-22 23:52:17 +03:00
|
|
|
import NotificationBadge, {
|
|
|
|
INotificationState,
|
|
|
|
NotificationColor,
|
|
|
|
TagSpecificNotificationState
|
|
|
|
} from "./NotificationBadge";
|
2020-06-10 08:09:15 +03:00
|
|
|
import { _t } from "../../../languageHandler";
|
|
|
|
import { ContextMenu, ContextMenuButton } from "../../structures/ContextMenu";
|
|
|
|
import { DefaultTagID, TagID } from "../../../stores/room-list/models";
|
2020-06-24 21:23:09 +03:00
|
|
|
import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
|
2020-07-01 01:24:46 +03:00
|
|
|
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
|
2020-05-08 21:53:05 +03:00
|
|
|
|
2020-06-29 05:03:04 +03:00
|
|
|
// TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14231
|
|
|
|
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
|
|
|
|
|
2020-05-14 21:53:00 +03:00
|
|
|
/*******************************************************************
|
|
|
|
* CAUTION *
|
|
|
|
*******************************************************************
|
|
|
|
* This is a work in progress implementation and isn't complete or *
|
|
|
|
* even useful as a component. Please avoid using it until this *
|
|
|
|
* warning disappears. *
|
2020-05-21 20:53:16 +03:00
|
|
|
*******************************************************************/
|
2020-05-14 21:53:00 +03:00
|
|
|
|
2020-05-08 21:53:05 +03:00
|
|
|
interface IProps {
|
|
|
|
room: Room;
|
2020-06-05 06:21:04 +03:00
|
|
|
showMessagePreview: boolean;
|
2020-06-11 23:39:28 +03:00
|
|
|
isMinimized: boolean;
|
2020-06-16 21:13:12 +03:00
|
|
|
tag: TagID;
|
2020-05-08 21:53:05 +03:00
|
|
|
|
2020-06-29 05:03:04 +03:00
|
|
|
// TODO: Incoming call boxes: https://github.com/vector-im/riot-web/issues/14177
|
2020-05-08 21:53:05 +03:00
|
|
|
}
|
|
|
|
|
2020-05-23 03:05:09 +03:00
|
|
|
interface IState {
|
2020-05-12 01:20:26 +03:00
|
|
|
hover: boolean;
|
2020-05-23 03:05:09 +03:00
|
|
|
notificationState: INotificationState;
|
2020-06-05 23:08:20 +03:00
|
|
|
selected: boolean;
|
2020-06-10 08:09:15 +03:00
|
|
|
generalMenuDisplayed: boolean;
|
2020-05-08 21:53:05 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class RoomTile2 extends React.Component<IProps, IState> {
|
2020-06-10 08:09:15 +03:00
|
|
|
private roomTileRef: React.RefObject<HTMLDivElement> = createRef();
|
|
|
|
private generalMenuButtonRef: React.RefObject<HTMLButtonElement> = createRef();
|
2020-05-08 21:53:05 +03:00
|
|
|
|
2020-06-29 05:03:04 +03:00
|
|
|
// TODO: a11y: https://github.com/vector-im/riot-web/issues/14180
|
2020-05-08 21:53:05 +03:00
|
|
|
|
2020-05-12 01:20:26 +03:00
|
|
|
constructor(props: IProps) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
hover: false,
|
2020-06-22 23:52:17 +03:00
|
|
|
notificationState: new TagSpecificNotificationState(this.props.room, this.props.tag),
|
2020-06-05 23:08:20 +03:00
|
|
|
selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId,
|
2020-06-10 08:09:15 +03:00
|
|
|
generalMenuDisplayed: false,
|
2020-05-12 06:09:32 +03:00
|
|
|
};
|
2020-05-26 00:54:02 +03:00
|
|
|
|
2020-06-05 23:08:20 +03:00
|
|
|
ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate);
|
2020-05-12 06:09:32 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
public componentWillUnmount() {
|
2020-05-27 01:20:51 +03:00
|
|
|
if (this.props.room) {
|
2020-06-05 23:08:20 +03:00
|
|
|
ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate);
|
2020-05-26 00:54:02 +03:00
|
|
|
}
|
2020-05-12 01:20:26 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
private onTileMouseEnter = () => {
|
|
|
|
this.setState({hover: true});
|
|
|
|
};
|
|
|
|
|
|
|
|
private onTileMouseLeave = () => {
|
|
|
|
this.setState({hover: false});
|
|
|
|
};
|
|
|
|
|
2020-05-12 01:29:32 +03:00
|
|
|
private onTileClick = (ev: React.KeyboardEvent) => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_room',
|
2020-06-29 05:03:04 +03:00
|
|
|
// TODO: Support show_room_tile in new room list: https://github.com/vector-im/riot-web/issues/14233
|
2020-05-12 01:29:32 +03:00
|
|
|
show_room_tile: true, // make sure the room is visible in the list
|
|
|
|
room_id: this.props.room.roomId,
|
|
|
|
clear_search: (ev && (ev.key === Key.ENTER || ev.key === Key.SPACE)),
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-06-05 23:08:20 +03:00
|
|
|
private onActiveRoomUpdate = (isActive: boolean) => {
|
|
|
|
this.setState({selected: isActive});
|
|
|
|
};
|
|
|
|
|
2020-06-10 08:09:15 +03:00
|
|
|
private onGeneralMenuOpenClick = (ev: InputEvent) => {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
this.setState({generalMenuDisplayed: true});
|
|
|
|
};
|
|
|
|
|
|
|
|
private onCloseGeneralMenu = (ev: InputEvent) => {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
this.setState({generalMenuDisplayed: false});
|
|
|
|
};
|
|
|
|
|
2020-06-11 00:05:29 +03:00
|
|
|
private onTagRoom = (ev: ButtonEvent, tagId: TagID) => {
|
2020-06-10 08:09:15 +03:00
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
2020-06-28 07:48:54 +03:00
|
|
|
// TODO: Support tagging: https://github.com/vector-im/riot-web/issues/14211
|
|
|
|
// TODO: XOR favourites and low priority: https://github.com/vector-im/riot-web/issues/14210
|
2020-06-10 08:09:15 +03:00
|
|
|
};
|
|
|
|
|
2020-06-11 00:05:29 +03:00
|
|
|
private onLeaveRoomClick = (ev: ButtonEvent) => {
|
2020-06-10 08:09:15 +03:00
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'leave_room',
|
|
|
|
room_id: this.props.room.roomId,
|
|
|
|
});
|
|
|
|
this.setState({generalMenuDisplayed: false}); // hide the menu
|
|
|
|
};
|
|
|
|
|
2020-06-11 00:05:29 +03:00
|
|
|
private onOpenRoomSettings = (ev: ButtonEvent) => {
|
2020-06-10 08:09:15 +03:00
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'open_room_settings',
|
|
|
|
room_id: this.props.room.roomId,
|
|
|
|
});
|
|
|
|
this.setState({generalMenuDisplayed: false}); // hide the menu
|
|
|
|
};
|
|
|
|
|
|
|
|
private renderGeneralMenu(): React.ReactElement {
|
2020-06-11 23:39:28 +03:00
|
|
|
if (this.props.isMinimized) return null; // no menu when minimized
|
|
|
|
|
2020-06-10 08:09:15 +03:00
|
|
|
let contextMenu = null;
|
|
|
|
if (this.state.generalMenuDisplayed) {
|
|
|
|
// The context menu appears within the list, so use the room tile as a reference point
|
|
|
|
const elementRect = this.roomTileRef.current.getBoundingClientRect();
|
|
|
|
contextMenu = (
|
|
|
|
<ContextMenu
|
|
|
|
chevronFace="none"
|
|
|
|
left={elementRect.left}
|
|
|
|
top={elementRect.top + elementRect.height + 8}
|
|
|
|
onFinished={this.onCloseGeneralMenu}
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
className="mx_IconizedContextMenu mx_IconizedContextMenu_compact mx_RoomTile2_contextMenu"
|
|
|
|
style={{width: elementRect.width}}
|
|
|
|
>
|
|
|
|
<div className="mx_IconizedContextMenu_optionList">
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
|
|
<AccessibleButton onClick={(e) => this.onTagRoom(e, DefaultTagID.Favourite)}>
|
2020-06-17 02:29:36 +03:00
|
|
|
<span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconStar" />
|
2020-06-10 08:09:15 +03:00
|
|
|
<span>{_t("Favourite")}</span>
|
|
|
|
</AccessibleButton>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<AccessibleButton onClick={(e) => this.onTagRoom(e, DefaultTagID.LowPriority)}>
|
2020-06-17 02:29:36 +03:00
|
|
|
<span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconArrowDown" />
|
2020-06-10 08:09:15 +03:00
|
|
|
<span>{_t("Low Priority")}</span>
|
|
|
|
</AccessibleButton>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<AccessibleButton onClick={this.onOpenRoomSettings}>
|
2020-06-17 02:29:36 +03:00
|
|
|
<span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconSettings" />
|
2020-06-10 08:09:15 +03:00
|
|
|
<span>{_t("Settings")}</span>
|
|
|
|
</AccessibleButton>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div className="mx_IconizedContextMenu_optionList">
|
|
|
|
<ul>
|
|
|
|
<li className="mx_RoomTile2_contextMenu_redRow">
|
|
|
|
<AccessibleButton onClick={this.onLeaveRoomClick}>
|
2020-06-17 02:29:36 +03:00
|
|
|
<span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconSignOut" />
|
2020-06-10 08:09:15 +03:00
|
|
|
<span>{_t("Leave Room")}</span>
|
|
|
|
</AccessibleButton>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ContextMenu>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
<ContextMenuButton
|
|
|
|
className="mx_RoomTile2_menuButton"
|
|
|
|
onClick={this.onGeneralMenuOpenClick}
|
|
|
|
inputRef={this.generalMenuButtonRef}
|
|
|
|
label={_t("Room options")}
|
|
|
|
isExpanded={this.state.generalMenuDisplayed}
|
|
|
|
/>
|
|
|
|
{contextMenu}
|
|
|
|
</React.Fragment>
|
2020-06-18 16:32:43 +03:00
|
|
|
);
|
2020-06-10 08:09:15 +03:00
|
|
|
}
|
|
|
|
|
2020-05-08 21:53:05 +03:00
|
|
|
public render(): React.ReactElement {
|
2020-06-29 05:03:04 +03:00
|
|
|
// TODO: Invites: https://github.com/vector-im/riot-web/issues/14198
|
|
|
|
// TODO: a11y proper: https://github.com/vector-im/riot-web/issues/14180
|
2020-05-08 21:53:05 +03:00
|
|
|
|
|
|
|
const classes = classNames({
|
2020-06-05 01:34:04 +03:00
|
|
|
'mx_RoomTile2': true,
|
2020-06-05 23:08:20 +03:00
|
|
|
'mx_RoomTile2_selected': this.state.selected,
|
2020-06-10 08:09:15 +03:00
|
|
|
'mx_RoomTile2_hasMenuOpen': this.state.generalMenuDisplayed,
|
2020-06-11 23:39:28 +03:00
|
|
|
'mx_RoomTile2_minimized': this.props.isMinimized,
|
2020-05-08 21:53:05 +03:00
|
|
|
});
|
|
|
|
|
2020-07-01 01:24:46 +03:00
|
|
|
const avatarSize = 32;
|
|
|
|
const roomAvatar = <DecoratedRoomAvatar
|
|
|
|
room={this.props.room}
|
|
|
|
avatarSize={avatarSize}
|
|
|
|
tag={this.props.tag}
|
|
|
|
displayBadge={this.props.isMinimized}
|
|
|
|
/>
|
|
|
|
|
|
|
|
let badge: React.ReactNode;
|
|
|
|
if (!this.props.isMinimized) {
|
|
|
|
badge = <NotificationBadge
|
2020-06-20 00:44:37 +03:00
|
|
|
notification={this.state.notificationState}
|
|
|
|
forceCount={false}
|
|
|
|
roomId={this.props.room.roomId}
|
|
|
|
/>
|
2020-07-01 01:24:46 +03:00
|
|
|
}
|
2020-05-12 06:09:32 +03:00
|
|
|
|
2020-05-08 21:53:05 +03:00
|
|
|
// TODO: the original RoomTile uses state for the room name. Do we need to?
|
|
|
|
let name = this.props.room.name;
|
|
|
|
if (typeof name !== 'string') name = '';
|
|
|
|
name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
|
|
|
|
|
2020-06-05 06:21:04 +03:00
|
|
|
let messagePreview = null;
|
2020-06-11 23:39:28 +03:00
|
|
|
if (this.props.showMessagePreview && !this.props.isMinimized) {
|
2020-06-11 03:37:59 +03:00
|
|
|
// The preview store heavily caches this info, so should be safe to hammer.
|
2020-06-26 01:26:07 +03:00
|
|
|
const text = MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag);
|
2020-06-11 03:37:59 +03:00
|
|
|
|
|
|
|
// Only show the preview if there is one to show.
|
|
|
|
if (text) {
|
|
|
|
messagePreview = (
|
|
|
|
<div className="mx_RoomTile2_messagePreview">
|
|
|
|
{text}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2020-05-12 01:20:26 +03:00
|
|
|
}
|
|
|
|
|
2020-06-05 06:21:04 +03:00
|
|
|
const nameClasses = classNames({
|
|
|
|
"mx_RoomTile2_name": true,
|
|
|
|
"mx_RoomTile2_nameWithPreview": !!messagePreview,
|
2020-06-08 22:42:18 +03:00
|
|
|
"mx_RoomTile2_nameHasUnreadEvents": this.state.notificationState.color >= NotificationColor.Bold,
|
2020-06-05 06:21:04 +03:00
|
|
|
});
|
|
|
|
|
2020-06-11 23:39:28 +03:00
|
|
|
let nameContainer = (
|
|
|
|
<div className="mx_RoomTile2_nameContainer">
|
|
|
|
<div title={name} className={nameClasses} tabIndex={-1} dir="auto">
|
|
|
|
{name}
|
|
|
|
</div>
|
|
|
|
{messagePreview}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
if (this.props.isMinimized) nameContainer = null;
|
|
|
|
|
2020-05-08 21:53:05 +03:00
|
|
|
return (
|
|
|
|
<React.Fragment>
|
2020-06-10 08:09:15 +03:00
|
|
|
<RovingTabIndexWrapper inputRef={this.roomTileRef}>
|
2020-05-08 21:53:05 +03:00
|
|
|
{({onFocus, isActive, ref}) =>
|
|
|
|
<AccessibleButton
|
|
|
|
onFocus={onFocus}
|
|
|
|
tabIndex={isActive ? 0 : -1}
|
|
|
|
inputRef={ref}
|
|
|
|
className={classes}
|
2020-05-12 01:20:26 +03:00
|
|
|
onMouseEnter={this.onTileMouseEnter}
|
|
|
|
onMouseLeave={this.onTileMouseLeave}
|
2020-05-12 01:29:32 +03:00
|
|
|
onClick={this.onTileClick}
|
2020-05-08 21:53:05 +03:00
|
|
|
role="treeitem"
|
|
|
|
>
|
2020-07-01 01:24:46 +03:00
|
|
|
{roomAvatar}
|
2020-06-11 23:39:28 +03:00
|
|
|
{nameContainer}
|
2020-06-05 06:21:04 +03:00
|
|
|
<div className="mx_RoomTile2_badgeContainer">
|
2020-05-12 06:09:32 +03:00
|
|
|
{badge}
|
2020-05-08 21:53:05 +03:00
|
|
|
</div>
|
2020-06-10 08:09:15 +03:00
|
|
|
{this.renderGeneralMenu()}
|
2020-05-08 21:53:05 +03:00
|
|
|
</AccessibleButton>
|
|
|
|
}
|
|
|
|
</RovingTabIndexWrapper>
|
|
|
|
</React.Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|