2015-11-27 14:50:33 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2017-09-11 18:59:09 +03:00
|
|
|
Copyright 2017 New Vector Ltd
|
2018-06-16 11:10:13 +03:00
|
|
|
Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
|
2019-06-19 13:48:47 +03:00
|
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
2015-11-27 14:50:33 +03:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
2018-06-16 11:10:13 +03:00
|
|
|
import React from 'react';
|
2017-12-26 04:03:18 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2019-09-06 17:04:46 +03:00
|
|
|
import createReactClass from 'create-react-class';
|
2018-06-16 11:10:13 +03:00
|
|
|
import classNames from 'classnames';
|
2018-03-14 17:29:55 +03:00
|
|
|
import dis from '../../../dispatcher';
|
2018-06-16 11:10:13 +03:00
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
2016-10-02 14:57:45 +03:00
|
|
|
import DMRoomMap from '../../../utils/DMRoomMap';
|
2018-06-16 11:10:13 +03:00
|
|
|
import sdk from '../../../index';
|
2018-06-18 13:54:06 +03:00
|
|
|
import {createMenu} from '../../structures/ContextualMenu';
|
2018-06-16 11:10:13 +03:00
|
|
|
import * as RoomNotifs from '../../../RoomNotifs';
|
|
|
|
import * as FormattingUtils from '../../../utils/FormattingUtils';
|
2017-01-25 01:41:52 +03:00
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
2017-09-11 18:59:09 +03:00
|
|
|
import ActiveRoomObserver from '../../../ActiveRoomObserver';
|
2019-01-17 12:29:37 +03:00
|
|
|
import RoomViewStore from '../../../stores/RoomViewStore';
|
2018-12-19 01:11:08 +03:00
|
|
|
import SettingsStore from "../../../settings/SettingsStore";
|
2019-09-30 18:04:43 +03:00
|
|
|
import {_t} from "../../../languageHandler";
|
2015-11-27 14:50:33 +03:00
|
|
|
|
2019-09-06 17:04:46 +03:00
|
|
|
module.exports = createReactClass({
|
2015-11-27 14:50:33 +03:00
|
|
|
displayName: 'RoomTile',
|
|
|
|
|
|
|
|
propTypes: {
|
2017-12-26 04:03:18 +03:00
|
|
|
onClick: PropTypes.func,
|
2015-11-27 14:50:33 +03:00
|
|
|
|
2017-12-26 04:03:18 +03:00
|
|
|
room: PropTypes.object.isRequired,
|
|
|
|
collapsed: PropTypes.bool.isRequired,
|
|
|
|
unread: PropTypes.bool.isRequired,
|
|
|
|
highlight: PropTypes.bool.isRequired,
|
2018-03-05 15:36:02 +03:00
|
|
|
// If true, apply mx_RoomTile_transparent class
|
|
|
|
transparent: PropTypes.bool,
|
2017-12-26 04:03:18 +03:00
|
|
|
isInvite: PropTypes.bool.isRequired,
|
|
|
|
incomingCall: PropTypes.object,
|
2015-11-27 14:50:33 +03:00
|
|
|
},
|
|
|
|
|
2016-09-09 18:15:01 +03:00
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
isDragging: false,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2015-11-27 14:50:33 +03:00
|
|
|
getInitialState: function() {
|
2017-11-16 16:19:36 +03:00
|
|
|
return ({
|
2017-10-11 19:56:17 +03:00
|
|
|
hover: false,
|
|
|
|
badgeHover: false,
|
2017-03-09 20:03:57 +03:00
|
|
|
menuDisplayed: false,
|
2018-03-14 17:29:55 +03:00
|
|
|
roomName: this.props.room.name,
|
2016-08-18 16:00:14 +03:00
|
|
|
notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
|
2018-03-14 17:29:55 +03:00
|
|
|
notificationCount: this.props.room.getUnreadNotificationCount(),
|
2019-01-17 12:29:37 +03:00
|
|
|
selected: this.props.room.roomId === RoomViewStore.getRoomId(),
|
2019-01-15 18:20:43 +03:00
|
|
|
statusMessage: this._getStatusMessage(),
|
2016-07-18 18:10:07 +03:00
|
|
|
});
|
2015-11-27 14:50:33 +03:00
|
|
|
},
|
|
|
|
|
2016-09-09 16:36:51 +03:00
|
|
|
_isDirectMessageRoom: function(roomId) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const dmRooms = DMRoomMap.shared().getUserIdForRoomId(roomId);
|
2018-06-16 11:10:13 +03:00
|
|
|
return Boolean(dmRooms);
|
2016-09-09 16:36:51 +03:00
|
|
|
},
|
|
|
|
|
2019-01-15 18:20:43 +03:00
|
|
|
_shouldShowStatusMessage() {
|
|
|
|
if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
const isInvite = this.props.room.getMyMembership() === "invite";
|
|
|
|
const isJoined = this.props.room.getMyMembership() === "join";
|
|
|
|
const looksLikeDm = this.props.room.getInvitedAndJoinedMemberCount() === 2;
|
|
|
|
return !isInvite && isJoined && looksLikeDm;
|
|
|
|
},
|
|
|
|
|
|
|
|
_getStatusMessageUser() {
|
2019-06-05 00:34:05 +03:00
|
|
|
if (!MatrixClientPeg.get()) return null; // We've probably been logged out
|
|
|
|
|
2019-01-15 18:20:43 +03:00
|
|
|
const selfId = MatrixClientPeg.get().getUserId();
|
|
|
|
const otherMember = this.props.room.currentState.getMembersExcept([selfId])[0];
|
|
|
|
if (!otherMember) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return otherMember.user;
|
|
|
|
},
|
|
|
|
|
|
|
|
_getStatusMessage() {
|
|
|
|
const statusUser = this._getStatusMessageUser();
|
|
|
|
if (!statusUser) {
|
|
|
|
return "";
|
|
|
|
}
|
|
|
|
return statusUser._unstable_statusMessage;
|
|
|
|
},
|
|
|
|
|
2018-03-14 17:29:55 +03:00
|
|
|
onRoomName: function(room) {
|
|
|
|
if (room !== this.props.room) return;
|
|
|
|
this.setState({
|
|
|
|
roomName: this.props.room.name,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-05-16 18:11:01 +03:00
|
|
|
onAccountData: function(accountDataEvent) {
|
2018-06-16 11:10:13 +03:00
|
|
|
if (accountDataEvent.getType() === 'm.push_rules') {
|
2017-05-16 18:11:01 +03:00
|
|
|
this.setState({
|
|
|
|
notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
|
|
|
|
});
|
|
|
|
}
|
2017-04-19 02:13:01 +03:00
|
|
|
},
|
|
|
|
|
2018-03-14 17:29:55 +03:00
|
|
|
onAction: function(payload) {
|
|
|
|
switch (payload.action) {
|
|
|
|
// XXX: slight hack in order to zero the notification count when a room
|
|
|
|
// is read. Ideally this state would be given to this via props (as we
|
|
|
|
// do with `unread`). This is still better than forceUpdating the entire
|
|
|
|
// RoomList when a room is read.
|
|
|
|
case 'on_room_read':
|
|
|
|
if (payload.roomId !== this.props.room.roomId) break;
|
|
|
|
this.setState({
|
|
|
|
notificationCount: this.props.room.getUnreadNotificationCount(),
|
|
|
|
});
|
2019-01-12 03:24:06 +03:00
|
|
|
break;
|
|
|
|
// RoomTiles are one of the few components that may show custom status and
|
|
|
|
// also remain on screen while in Settings toggling the feature. This ensures
|
|
|
|
// you can clearly see the status hide and show when toggling the feature.
|
|
|
|
case 'feature_custom_status_changed':
|
|
|
|
this.forceUpdate();
|
|
|
|
break;
|
2018-03-14 17:29:55 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2019-01-17 12:29:37 +03:00
|
|
|
_onActiveRoomChange: function() {
|
2017-09-11 18:59:09 +03:00
|
|
|
this.setState({
|
2019-01-17 12:29:37 +03:00
|
|
|
selected: this.props.room.roomId === RoomViewStore.getRoomId(),
|
2017-09-11 18:59:09 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2019-10-08 14:10:37 +03:00
|
|
|
componentDidMount: function() {
|
|
|
|
const cli = MatrixClientPeg.get();
|
|
|
|
cli.on("accountData", this.onAccountData);
|
|
|
|
cli.on("Room.name", this.onRoomName);
|
2017-09-11 18:59:09 +03:00
|
|
|
ActiveRoomObserver.addListener(this.props.room.roomId, this._onActiveRoomChange);
|
2018-03-14 17:29:55 +03:00
|
|
|
this.dispatcherRef = dis.register(this.onAction);
|
2019-01-15 18:20:43 +03:00
|
|
|
|
|
|
|
if (this._shouldShowStatusMessage()) {
|
|
|
|
const statusUser = this._getStatusMessageUser();
|
|
|
|
if (statusUser) {
|
2019-10-08 14:10:37 +03:00
|
|
|
statusUser.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
|
2019-01-15 18:20:43 +03:00
|
|
|
}
|
|
|
|
}
|
2017-04-18 21:28:24 +03:00
|
|
|
},
|
|
|
|
|
2017-05-16 18:11:01 +03:00
|
|
|
componentWillUnmount: function() {
|
2017-10-11 19:56:17 +03:00
|
|
|
const cli = MatrixClientPeg.get();
|
2017-05-16 18:11:01 +03:00
|
|
|
if (cli) {
|
|
|
|
MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
|
2018-03-14 17:29:55 +03:00
|
|
|
MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
|
2017-05-16 18:11:01 +03:00
|
|
|
}
|
2017-09-11 18:59:09 +03:00
|
|
|
ActiveRoomObserver.removeListener(this.props.room.roomId, this._onActiveRoomChange);
|
2018-03-14 17:29:55 +03:00
|
|
|
dis.unregister(this.dispatcherRef);
|
2019-01-15 18:20:43 +03:00
|
|
|
|
|
|
|
if (this._shouldShowStatusMessage()) {
|
|
|
|
const statusUser = this._getStatusMessageUser();
|
|
|
|
if (statusUser) {
|
|
|
|
statusUser.removeListener(
|
|
|
|
"User._unstable_statusMessage",
|
|
|
|
this._onStatusMessageCommitted,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2018-03-14 17:29:55 +03:00
|
|
|
},
|
|
|
|
|
2018-03-20 20:19:49 +03:00
|
|
|
componentWillReceiveProps: function(props) {
|
|
|
|
// XXX: This could be a lot better - this makes the assumption that
|
|
|
|
// the notification count may have changed when the properties of
|
|
|
|
// the room tile change.
|
|
|
|
this.setState({
|
|
|
|
notificationCount: this.props.room.getUnreadNotificationCount(),
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2018-03-14 17:29:55 +03:00
|
|
|
// Do a simple shallow comparison of props and state to avoid unnecessary
|
|
|
|
// renders. The assumption made here is that only state and props are used
|
|
|
|
// in rendering this component and children.
|
|
|
|
//
|
|
|
|
// RoomList is frequently made to forceUpdate, so this decreases number of
|
|
|
|
// RoomTile renderings.
|
|
|
|
shouldComponentUpdate: function(newProps, newState) {
|
|
|
|
if (Object.keys(newProps).some((k) => newProps[k] !== this.props[k])) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (Object.keys(newState).some((k) => newState[k] !== this.state[k])) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
2017-04-17 22:58:43 +03:00
|
|
|
},
|
|
|
|
|
2019-01-15 18:20:43 +03:00
|
|
|
_onStatusMessageCommitted() {
|
|
|
|
// The status message `User` object has observed a message change.
|
|
|
|
this.setState({
|
|
|
|
statusMessage: this._getStatusMessage(),
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-04-20 16:16:45 +03:00
|
|
|
onClick: function(ev) {
|
2017-03-03 16:48:37 +03:00
|
|
|
if (this.props.onClick) {
|
2017-04-20 16:16:45 +03:00
|
|
|
this.props.onClick(this.props.room.roomId, ev);
|
2017-03-03 16:48:37 +03:00
|
|
|
}
|
2015-11-27 14:50:33 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
onMouseEnter: function() {
|
2017-10-11 19:56:17 +03:00
|
|
|
this.setState( { hover: true });
|
2016-09-11 02:30:43 +03:00
|
|
|
this.badgeOnMouseEnter();
|
2015-11-27 14:50:33 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
onMouseLeave: function() {
|
2017-10-11 19:56:17 +03:00
|
|
|
this.setState( { hover: false });
|
2016-09-11 02:30:43 +03:00
|
|
|
this.badgeOnMouseLeave();
|
2015-11-27 14:50:33 +03:00
|
|
|
},
|
|
|
|
|
2018-06-18 14:05:57 +03:00
|
|
|
_showContextMenu: function(x, y, chevronOffset) {
|
|
|
|
const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu');
|
|
|
|
|
|
|
|
createMenu(RoomTileContextMenu, {
|
|
|
|
chevronOffset,
|
|
|
|
left: x,
|
|
|
|
top: y,
|
|
|
|
room: this.props.room,
|
|
|
|
onFinished: () => {
|
|
|
|
this.setState({ menuDisplayed: false });
|
|
|
|
this.props.refreshSubList();
|
|
|
|
},
|
|
|
|
});
|
|
|
|
this.setState({ menuDisplayed: true });
|
|
|
|
},
|
|
|
|
|
2018-06-16 11:07:16 +03:00
|
|
|
onContextMenu: function(e) {
|
2018-06-18 14:05:57 +03:00
|
|
|
// Prevent the RoomTile onClick event firing as well
|
2018-06-16 11:07:16 +03:00
|
|
|
e.preventDefault();
|
2018-06-18 14:05:57 +03:00
|
|
|
// Only allow non-guests to access the context menu
|
|
|
|
if (MatrixClientPeg.get().isGuest()) return;
|
|
|
|
|
|
|
|
const chevronOffset = 12;
|
|
|
|
this._showContextMenu(e.clientX, e.clientY - (chevronOffset + 8), chevronOffset);
|
2018-06-16 11:07:16 +03:00
|
|
|
},
|
|
|
|
|
2016-07-18 18:10:07 +03:00
|
|
|
badgeOnMouseEnter: function() {
|
2016-09-11 02:30:43 +03:00
|
|
|
// Only allow non-guests to access the context menu
|
2016-08-02 16:46:47 +03:00
|
|
|
// and only change it if it needs to change
|
|
|
|
if (!MatrixClientPeg.get().isGuest() && !this.state.badgeHover) {
|
2017-10-11 19:56:17 +03:00
|
|
|
this.setState( { badgeHover: true } );
|
2016-07-27 13:58:40 +03:00
|
|
|
}
|
2016-07-18 18:10:07 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
badgeOnMouseLeave: function() {
|
2017-10-11 19:56:17 +03:00
|
|
|
this.setState( { badgeHover: false } );
|
2016-07-18 18:10:07 +03:00
|
|
|
},
|
|
|
|
|
2018-11-05 19:42:25 +03:00
|
|
|
onOpenMenu: function(e) {
|
2016-08-04 18:25:09 +03:00
|
|
|
// Prevent the RoomTile onClick event firing as well
|
|
|
|
e.stopPropagation();
|
2018-06-18 14:05:57 +03:00
|
|
|
// Only allow non-guests to access the context menu
|
|
|
|
if (MatrixClientPeg.get().isGuest()) return;
|
|
|
|
|
|
|
|
// If the badge is clicked, then no longer show tooltip
|
|
|
|
if (this.props.collapsed) {
|
|
|
|
this.setState({ hover: false });
|
|
|
|
}
|
|
|
|
|
|
|
|
const elementRect = e.target.getBoundingClientRect();
|
|
|
|
|
|
|
|
// The window X and Y offsets are to adjust position when zoomed in to page
|
|
|
|
const x = elementRect.right + window.pageXOffset + 3;
|
|
|
|
const chevronOffset = 12;
|
|
|
|
let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
|
|
|
|
y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
|
|
|
|
|
|
|
|
this._showContextMenu(x, y, chevronOffset);
|
2016-07-21 19:44:31 +03:00
|
|
|
},
|
|
|
|
|
2015-11-27 14:50:33 +03:00
|
|
|
render: function() {
|
2018-08-02 12:42:05 +03:00
|
|
|
const isInvite = this.props.room.getMyMembership() === "invite";
|
2019-02-11 17:40:17 +03:00
|
|
|
const notificationCount = this.props.notificationCount;
|
2016-01-22 20:22:49 +03:00
|
|
|
// var highlightCount = this.props.room.getUnreadNotificationCount("highlight");
|
|
|
|
|
2019-06-19 13:46:24 +03:00
|
|
|
const notifBadges = notificationCount > 0 && RoomNotifs.shouldShowNotifBadge(this.state.notifState);
|
|
|
|
const mentionBadges = this.props.highlight && RoomNotifs.shouldShowMentionBadge(this.state.notifState);
|
2016-08-18 15:44:58 +03:00
|
|
|
const badges = notifBadges || mentionBadges;
|
2016-08-18 13:58:27 +03:00
|
|
|
|
2018-12-12 07:40:11 +03:00
|
|
|
let subtext = null;
|
2019-01-15 18:20:43 +03:00
|
|
|
if (this._shouldShowStatusMessage()) {
|
|
|
|
subtext = this.state.statusMessage;
|
2018-12-12 07:40:11 +03:00
|
|
|
}
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const classes = classNames({
|
2015-11-27 14:50:33 +03:00
|
|
|
'mx_RoomTile': true,
|
2017-09-11 18:59:09 +03:00
|
|
|
'mx_RoomTile_selected': this.state.selected,
|
2017-05-16 18:11:01 +03:00
|
|
|
'mx_RoomTile_unread': this.props.unread,
|
2016-08-18 17:19:24 +03:00
|
|
|
'mx_RoomTile_unreadNotify': notifBadges,
|
|
|
|
'mx_RoomTile_highlight': mentionBadges,
|
2018-08-02 12:42:05 +03:00
|
|
|
'mx_RoomTile_invited': isInvite,
|
2017-03-09 20:03:57 +03:00
|
|
|
'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
|
2016-08-18 13:58:27 +03:00
|
|
|
'mx_RoomTile_noBadges': !badges,
|
2018-03-05 15:36:02 +03:00
|
|
|
'mx_RoomTile_transparent': this.props.transparent,
|
2018-12-12 22:57:48 +03:00
|
|
|
'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
|
2015-11-27 14:50:33 +03:00
|
|
|
});
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const avatarClasses = classNames({
|
2016-07-28 19:24:58 +03:00
|
|
|
'mx_RoomTile_avatar': true,
|
|
|
|
});
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const badgeClasses = classNames({
|
2016-07-28 19:24:58 +03:00
|
|
|
'mx_RoomTile_badge': true,
|
2017-03-09 20:03:57 +03:00
|
|
|
'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.menuDisplayed,
|
2016-07-28 19:24:58 +03:00
|
|
|
});
|
|
|
|
|
2018-03-14 17:29:55 +03:00
|
|
|
let name = this.state.roomName;
|
2018-09-18 02:16:25 +03:00
|
|
|
if (name == undefined || name == null) name = '';
|
2015-11-27 14:50:33 +03:00
|
|
|
name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
|
2016-07-21 16:33:54 +03:00
|
|
|
|
2016-07-20 14:47:32 +03:00
|
|
|
|
2018-11-05 19:42:25 +03:00
|
|
|
let badge;
|
|
|
|
if (badges) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const limitedCount = FormattingUtils.formatCount(notificationCount);
|
2018-11-05 19:42:25 +03:00
|
|
|
const badgeContent = notificationCount ? limitedCount : '!';
|
|
|
|
badge = <div className={badgeClasses}>{ badgeContent }</div>;
|
2016-07-20 14:47:32 +03:00
|
|
|
}
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
let label;
|
2018-12-12 07:40:11 +03:00
|
|
|
let subtextLabel;
|
2017-10-11 19:56:17 +03:00
|
|
|
let tooltip;
|
2015-11-27 14:50:33 +03:00
|
|
|
if (!this.props.collapsed) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const nameClasses = classNames({
|
2016-07-28 19:24:58 +03:00
|
|
|
'mx_RoomTile_name': true,
|
|
|
|
'mx_RoomTile_invite': this.props.isInvite,
|
2017-03-09 20:03:57 +03:00
|
|
|
'mx_RoomTile_badgeShown': badges || this.state.badgeHover || this.state.menuDisplayed,
|
2016-07-28 19:24:58 +03:00
|
|
|
});
|
|
|
|
|
2018-12-12 07:40:11 +03:00
|
|
|
subtextLabel = subtext ? <span className="mx_RoomTile_subtext">{ subtext }</span> : null;
|
2019-05-19 18:31:25 +03:00
|
|
|
label = <div title={name} className={nameClasses} dir="auto">{ name }</div>;
|
2016-09-09 08:57:30 +03:00
|
|
|
} else if (this.state.hover) {
|
2019-02-01 02:36:19 +03:00
|
|
|
const Tooltip = sdk.getComponent("elements.Tooltip");
|
|
|
|
tooltip = <Tooltip className="mx_RoomTile_tooltip" label={this.props.room.name} dir="auto" />;
|
2015-11-27 14:50:33 +03:00
|
|
|
}
|
|
|
|
|
2016-09-15 16:39:34 +03:00
|
|
|
//var incomingCallBox;
|
|
|
|
//if (this.props.incomingCall) {
|
|
|
|
// var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
|
|
|
|
// incomingCallBox = <IncomingCallBox incomingCall={ this.props.incomingCall }/>;
|
|
|
|
//}
|
2015-12-17 05:49:09 +03:00
|
|
|
|
2018-11-05 19:42:25 +03:00
|
|
|
let contextMenuButton;
|
|
|
|
if (!MatrixClientPeg.get().isGuest()) {
|
|
|
|
contextMenuButton = <AccessibleButton className="mx_RoomTile_menuButton" onClick={this.onOpenMenu} />;
|
|
|
|
}
|
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
|
2015-11-27 14:50:33 +03:00
|
|
|
|
2019-09-30 18:04:43 +03:00
|
|
|
let ariaLabel = name;
|
|
|
|
|
2018-06-16 11:10:13 +03:00
|
|
|
let dmIndicator;
|
2016-09-26 20:02:14 +03:00
|
|
|
if (this._isDirectMessageRoom(this.props.room.roomId)) {
|
2019-01-11 04:37:28 +03:00
|
|
|
dmIndicator = <img
|
|
|
|
src={require("../../../../res/img/icon_person.svg")}
|
|
|
|
className="mx_RoomTile_dm"
|
|
|
|
width="11"
|
|
|
|
height="13"
|
|
|
|
alt="dm"
|
|
|
|
/>;
|
2016-09-26 20:02:14 +03:00
|
|
|
}
|
2016-09-09 16:36:51 +03:00
|
|
|
|
2019-10-03 11:35:39 +03:00
|
|
|
// The following labels are written in such a fashion to increase screen reader efficiency (speed).
|
2019-09-30 18:04:43 +03:00
|
|
|
if (notifBadges && mentionBadges && !isInvite) {
|
2019-10-03 11:35:39 +03:00
|
|
|
ariaLabel += " " + _t("%(count)s unread messages including mentions.", {
|
2019-09-30 18:04:43 +03:00
|
|
|
count: notificationCount,
|
|
|
|
});
|
|
|
|
} else if (notifBadges) {
|
2019-10-03 11:35:39 +03:00
|
|
|
ariaLabel += " " + _t("%(count)s unread messages.", { count: notificationCount });
|
2019-09-30 18:04:43 +03:00
|
|
|
} else if (mentionBadges && !isInvite) {
|
2019-10-03 11:35:39 +03:00
|
|
|
ariaLabel += " " + _t("Unread mentions.");
|
2019-10-29 19:34:56 +03:00
|
|
|
} else if (this.props.unread) {
|
|
|
|
ariaLabel += " " + _t("Unread messages.");
|
2019-09-30 18:04:43 +03:00
|
|
|
}
|
|
|
|
|
2018-06-16 11:07:16 +03:00
|
|
|
return <AccessibleButton tabIndex="0"
|
|
|
|
className={classes}
|
|
|
|
onClick={this.onClick}
|
|
|
|
onMouseEnter={this.onMouseEnter}
|
|
|
|
onMouseLeave={this.onMouseLeave}
|
|
|
|
onContextMenu={this.onContextMenu}
|
2019-09-30 18:04:43 +03:00
|
|
|
aria-label={ariaLabel}
|
2019-10-17 17:53:39 +03:00
|
|
|
aria-selected={this.state.selected}
|
|
|
|
role="treeitem"
|
2018-06-16 11:07:16 +03:00
|
|
|
>
|
2018-01-18 20:52:50 +03:00
|
|
|
<div className={avatarClasses}>
|
|
|
|
<div className="mx_RoomTile_avatar_container">
|
|
|
|
<RoomAvatar room={this.props.room} width={24} height={24} />
|
2018-06-16 11:10:13 +03:00
|
|
|
{ dmIndicator }
|
2015-11-27 14:50:33 +03:00
|
|
|
</div>
|
2017-01-13 19:25:26 +03:00
|
|
|
</div>
|
2018-01-18 20:52:50 +03:00
|
|
|
<div className="mx_RoomTile_nameContainer">
|
2019-01-04 03:36:57 +03:00
|
|
|
<div className="mx_RoomTile_labelContainer">
|
|
|
|
{ label }
|
|
|
|
{ subtextLabel }
|
|
|
|
</div>
|
2019-01-04 02:00:23 +03:00
|
|
|
{ contextMenuButton }
|
2018-01-18 20:52:50 +03:00
|
|
|
{ badge }
|
|
|
|
</div>
|
|
|
|
{ /* { incomingCallBox } */ }
|
|
|
|
{ tooltip }
|
|
|
|
</AccessibleButton>;
|
2017-10-11 19:56:17 +03:00
|
|
|
},
|
2015-11-27 14:50:33 +03:00
|
|
|
});
|