2015-11-27 14:50:33 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var React = require('react');
|
2016-09-02 20:41:44 +03:00
|
|
|
var ReactDOM = require("react-dom");
|
2015-11-27 14:50:33 +03:00
|
|
|
var classNames = require('classnames');
|
|
|
|
var dis = require("../../../dispatcher");
|
|
|
|
var MatrixClientPeg = require('../../../MatrixClientPeg');
|
2016-09-09 16:36:51 +03:00
|
|
|
var DMRoomMap = require('../../../utils/DMRoomMap');
|
2015-11-27 14:50:33 +03:00
|
|
|
var sdk = require('../../../index');
|
2016-07-27 16:49:10 +03:00
|
|
|
var ContextualMenu = require('../../structures/ContextualMenu');
|
2016-08-17 20:26:37 +03:00
|
|
|
var RoomNotifs = require('../../../RoomNotifs');
|
2016-09-17 04:39:19 +03:00
|
|
|
var FormattingUtils = require('../../../utils/FormattingUtils');
|
2015-11-27 14:50:33 +03:00
|
|
|
|
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'RoomTile',
|
|
|
|
|
|
|
|
propTypes: {
|
2016-09-09 18:15:01 +03:00
|
|
|
connectDragSource: React.PropTypes.func,
|
|
|
|
connectDropTarget: React.PropTypes.func,
|
|
|
|
isDragging: React.PropTypes.bool,
|
2015-11-27 14:50:33 +03:00
|
|
|
|
|
|
|
room: React.PropTypes.object.isRequired,
|
|
|
|
collapsed: React.PropTypes.bool.isRequired,
|
|
|
|
selected: React.PropTypes.bool.isRequired,
|
|
|
|
unread: React.PropTypes.bool.isRequired,
|
|
|
|
highlight: React.PropTypes.bool.isRequired,
|
|
|
|
isInvite: React.PropTypes.bool.isRequired,
|
2015-12-17 05:49:09 +03:00
|
|
|
incomingCall: React.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() {
|
2016-07-18 18:10:07 +03:00
|
|
|
return({
|
|
|
|
hover : false,
|
|
|
|
badgeHover : false,
|
2016-08-05 17:48:28 +03:00
|
|
|
notificationTagMenu: false,
|
|
|
|
roomTagMenu: false,
|
2016-08-18 16:00:14 +03:00
|
|
|
notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
|
2016-07-18 18:10:07 +03:00
|
|
|
});
|
2015-11-27 14:50:33 +03:00
|
|
|
},
|
|
|
|
|
2016-08-18 13:58:27 +03:00
|
|
|
_shouldShowNotifBadge: function() {
|
2016-08-18 15:44:58 +03:00
|
|
|
const showBadgeInStates = [RoomNotifs.ALL_MESSAGES, RoomNotifs.ALL_MESSAGES_LOUD];
|
2016-08-18 16:00:14 +03:00
|
|
|
return showBadgeInStates.indexOf(this.state.notifState) > -1;
|
2016-08-17 20:26:37 +03:00
|
|
|
},
|
|
|
|
|
2016-08-18 13:58:27 +03:00
|
|
|
_shouldShowMentionBadge: function() {
|
2016-08-18 16:00:14 +03:00
|
|
|
return this.state.notifState != RoomNotifs.MUTE;
|
2016-08-18 13:58:27 +03:00
|
|
|
},
|
|
|
|
|
2016-09-09 16:36:51 +03:00
|
|
|
_isDirectMessageRoom: function(roomId) {
|
2016-09-26 20:02:14 +03:00
|
|
|
var dmRooms = DMRoomMap.shared().getUserIdForRoomId(roomId);
|
2016-09-09 16:36:51 +03:00
|
|
|
if (dmRooms) {
|
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-08-17 20:26:37 +03:00
|
|
|
onAccountData: function(accountDataEvent) {
|
|
|
|
if (accountDataEvent.getType() == 'm.push_rules') {
|
|
|
|
this.setState({
|
2016-08-18 16:00:14 +03:00
|
|
|
notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
|
2016-08-17 20:26:37 +03:00
|
|
|
});
|
2016-07-28 19:24:58 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-08-17 20:26:37 +03:00
|
|
|
componentWillMount: function() {
|
|
|
|
MatrixClientPeg.get().on("accountData", this.onAccountData);
|
2016-07-28 19:24:58 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount: function() {
|
2016-08-17 20:26:37 +03:00
|
|
|
var cli = MatrixClientPeg.get();
|
|
|
|
if (cli) {
|
|
|
|
MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
|
|
|
|
}
|
2016-07-28 19:24:58 +03:00
|
|
|
},
|
|
|
|
|
2015-11-27 14:50:33 +03:00
|
|
|
onClick: function() {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_room',
|
2016-07-28 19:24:58 +03:00
|
|
|
room_id: this.props.room.roomId,
|
2015-11-27 14:50:33 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
onMouseEnter: function() {
|
|
|
|
this.setState( { hover : true });
|
2016-09-11 02:30:43 +03:00
|
|
|
this.badgeOnMouseEnter();
|
2015-11-27 14:50:33 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
onMouseLeave: function() {
|
|
|
|
this.setState( { hover : false });
|
2016-09-11 02:30:43 +03:00
|
|
|
this.badgeOnMouseLeave();
|
2015-11-27 14:50:33 +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) {
|
2016-07-27 13:58:40 +03:00
|
|
|
this.setState( { badgeHover : true } );
|
|
|
|
}
|
2016-07-18 18:10:07 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
badgeOnMouseLeave: function() {
|
|
|
|
this.setState( { badgeHover : false } );
|
|
|
|
},
|
|
|
|
|
2016-07-21 19:44:31 +03:00
|
|
|
onBadgeClicked: function(e) {
|
2016-07-27 13:58:40 +03:00
|
|
|
// Only allow none guests to access the context menu
|
|
|
|
if (!MatrixClientPeg.get().isGuest()) {
|
2016-07-29 13:10:16 +03:00
|
|
|
|
|
|
|
// If the badge is clicked, then no longer show tooltip
|
|
|
|
if (this.props.collapsed) {
|
|
|
|
this.setState({ hover: false });
|
|
|
|
}
|
|
|
|
|
2016-08-05 17:48:28 +03:00
|
|
|
var NotificationStateMenu = sdk.getComponent('context_menus.NotificationStateContextMenu');
|
2016-07-27 13:58:40 +03:00
|
|
|
var elementRect = e.target.getBoundingClientRect();
|
|
|
|
// The window X and Y offsets are to adjust position when zoomed in to page
|
2016-07-30 14:52:39 +03:00
|
|
|
var x = elementRect.right + window.pageXOffset + 3;
|
2016-07-27 20:14:46 +03:00
|
|
|
var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 53;
|
2016-07-27 13:58:40 +03:00
|
|
|
var self = this;
|
2016-08-05 17:48:28 +03:00
|
|
|
ContextualMenu.createMenu(NotificationStateMenu, {
|
2016-07-27 19:43:48 +03:00
|
|
|
menuWidth: 188,
|
|
|
|
menuHeight: 126,
|
2016-07-27 20:10:45 +03:00
|
|
|
chevronOffset: 45,
|
2016-07-27 13:58:40 +03:00
|
|
|
left: x,
|
|
|
|
top: y,
|
|
|
|
room: this.props.room,
|
|
|
|
onFinished: function() {
|
2016-08-05 17:48:28 +03:00
|
|
|
self.setState({ notificationTagMenu: false });
|
2016-08-23 14:40:28 +03:00
|
|
|
self.props.refreshSubList();
|
2016-07-27 13:58:40 +03:00
|
|
|
}
|
|
|
|
});
|
2016-08-05 17:48:28 +03:00
|
|
|
this.setState({ notificationTagMenu: true });
|
2016-07-27 13:58:40 +03:00
|
|
|
}
|
2016-08-04 18:25:09 +03:00
|
|
|
// Prevent the RoomTile onClick event firing as well
|
|
|
|
e.stopPropagation();
|
2016-07-21 19:44:31 +03:00
|
|
|
},
|
|
|
|
|
2016-08-05 17:24:53 +03:00
|
|
|
onAvatarClicked: function(e) {
|
|
|
|
// Only allow none guests to access the context menu
|
2016-08-10 16:46:05 +03:00
|
|
|
if (!MatrixClientPeg.get().isGuest() && !this.props.collapsed) {
|
2016-08-05 17:24:53 +03:00
|
|
|
|
|
|
|
// If the badge is clicked, then no longer show tooltip
|
|
|
|
if (this.props.collapsed) {
|
|
|
|
this.setState({ hover: false });
|
|
|
|
}
|
|
|
|
|
2016-08-05 17:48:28 +03:00
|
|
|
var RoomTagMenu = sdk.getComponent('context_menus.RoomTagContextMenu');
|
2016-08-05 17:24:53 +03:00
|
|
|
var elementRect = e.target.getBoundingClientRect();
|
|
|
|
// The window X and Y offsets are to adjust position when zoomed in to page
|
|
|
|
var x = elementRect.right + window.pageXOffset + 3;
|
2016-08-05 17:48:28 +03:00
|
|
|
var y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset) - 19;
|
2016-08-05 17:24:53 +03:00
|
|
|
var self = this;
|
2016-08-05 17:48:28 +03:00
|
|
|
ContextualMenu.createMenu(RoomTagMenu, {
|
2016-08-05 17:24:53 +03:00
|
|
|
chevronOffset: 10,
|
2016-08-10 18:34:49 +03:00
|
|
|
menuColour: "#FFFFFF",
|
2016-08-05 17:24:53 +03:00
|
|
|
left: x,
|
|
|
|
top: y,
|
|
|
|
room: this.props.room,
|
|
|
|
onFinished: function() {
|
2016-08-10 16:46:05 +03:00
|
|
|
self.setState({ roomTagMenu: false });
|
2016-08-05 17:24:53 +03:00
|
|
|
}
|
|
|
|
});
|
2016-08-10 16:46:05 +03:00
|
|
|
this.setState({ roomTagMenu: true });
|
|
|
|
// Prevent the RoomTile onClick event firing as well
|
|
|
|
e.stopPropagation();
|
2016-08-05 17:24:53 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-11-27 14:50:33 +03:00
|
|
|
render: function() {
|
|
|
|
var myUserId = MatrixClientPeg.get().credentials.userId;
|
|
|
|
var me = this.props.room.currentState.members[myUserId];
|
2016-01-22 20:22:49 +03:00
|
|
|
|
|
|
|
var notificationCount = this.props.room.getUnreadNotificationCount();
|
|
|
|
// var highlightCount = this.props.room.getUnreadNotificationCount("highlight");
|
|
|
|
|
2016-08-18 15:44:58 +03:00
|
|
|
const notifBadges = notificationCount > 0 && this._shouldShowNotifBadge();
|
|
|
|
const mentionBadges = this.props.highlight && this._shouldShowMentionBadge();
|
|
|
|
const badges = notifBadges || mentionBadges;
|
2016-08-18 13:58:27 +03:00
|
|
|
|
2015-11-27 14:50:33 +03:00
|
|
|
var classes = classNames({
|
|
|
|
'mx_RoomTile': true,
|
|
|
|
'mx_RoomTile_selected': this.props.selected,
|
|
|
|
'mx_RoomTile_unread': this.props.unread,
|
2016-08-18 17:19:24 +03:00
|
|
|
'mx_RoomTile_unreadNotify': notifBadges,
|
|
|
|
'mx_RoomTile_highlight': mentionBadges,
|
2015-11-27 14:50:33 +03:00
|
|
|
'mx_RoomTile_invited': (me && me.membership == 'invite'),
|
2016-08-05 17:48:28 +03:00
|
|
|
'mx_RoomTile_notificationTagMenu': this.state.notificationTagMenu,
|
2016-08-18 13:58:27 +03:00
|
|
|
'mx_RoomTile_noBadges': !badges,
|
2015-11-27 14:50:33 +03:00
|
|
|
});
|
|
|
|
|
2016-07-28 19:24:58 +03:00
|
|
|
var avatarClasses = classNames({
|
|
|
|
'mx_RoomTile_avatar': true,
|
|
|
|
});
|
|
|
|
|
2016-08-10 16:46:05 +03:00
|
|
|
var avatarContainerClasses = classNames({
|
|
|
|
'mx_RoomTile_avatar_container': true,
|
|
|
|
'mx_RoomTile_avatar_roomTagMenu': this.state.roomTagMenu,
|
|
|
|
})
|
|
|
|
|
2016-07-28 19:24:58 +03:00
|
|
|
var badgeClasses = classNames({
|
|
|
|
'mx_RoomTile_badge': true,
|
2016-08-05 17:48:28 +03:00
|
|
|
'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.notificationTagMenu,
|
2016-07-28 19:24:58 +03:00
|
|
|
});
|
|
|
|
|
2015-12-08 13:21:40 +03:00
|
|
|
// XXX: We should never display raw room IDs, but sometimes the
|
|
|
|
// room name js sdk gives is undefined (cannot repro this -- k)
|
|
|
|
var name = this.props.room.name || this.props.room.roomId;
|
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
|
|
|
|
2015-11-27 14:50:33 +03:00
|
|
|
var badge;
|
2016-07-18 18:10:07 +03:00
|
|
|
var badgeContent;
|
2016-07-20 14:47:32 +03:00
|
|
|
|
2016-08-05 17:48:28 +03:00
|
|
|
if (this.state.badgeHover || this.state.notificationTagMenu) {
|
2016-07-20 19:12:41 +03:00
|
|
|
badgeContent = "\u00B7\u00B7\u00B7";
|
2016-08-18 13:58:27 +03:00
|
|
|
} else if (badges) {
|
2016-09-17 04:39:19 +03:00
|
|
|
var limitedCount = FormattingUtils.formatCount(notificationCount);
|
2016-07-21 20:50:07 +03:00
|
|
|
badgeContent = notificationCount ? limitedCount : '!';
|
2016-07-20 14:47:32 +03:00
|
|
|
} else {
|
|
|
|
badgeContent = '\u200B';
|
|
|
|
}
|
|
|
|
|
2016-09-11 02:30:43 +03:00
|
|
|
badge = <div className={ badgeClasses } onClick={this.onBadgeClicked}>{ badgeContent }</div>;
|
2016-07-20 14:47:32 +03:00
|
|
|
|
2016-08-11 05:25:12 +03:00
|
|
|
const EmojiText = sdk.getComponent('elements.EmojiText');
|
2015-11-27 14:50:33 +03:00
|
|
|
var label;
|
2016-07-22 16:58:09 +03:00
|
|
|
var tooltip;
|
2015-11-27 14:50:33 +03:00
|
|
|
if (!this.props.collapsed) {
|
2016-07-28 19:24:58 +03:00
|
|
|
var nameClasses = classNames({
|
|
|
|
'mx_RoomTile_name': true,
|
|
|
|
'mx_RoomTile_invite': this.props.isInvite,
|
2016-08-18 13:58:27 +03:00
|
|
|
'mx_RoomTile_badgeShown': badges || this.state.badgeHover || this.state.notificationTagMenu,
|
2016-07-28 19:24:58 +03:00
|
|
|
});
|
|
|
|
|
2016-04-14 23:11:10 +03:00
|
|
|
if (this.props.selected) {
|
2016-08-09 22:01:51 +03:00
|
|
|
let nameSelected = <EmojiText>{name}</EmojiText>;
|
2016-07-22 16:58:09 +03:00
|
|
|
|
2016-08-04 18:17:21 +03:00
|
|
|
label = <div title={ name } className={ nameClasses }>{ nameSelected }</div>;
|
2016-07-05 07:46:17 +03:00
|
|
|
} else {
|
2016-08-09 22:01:51 +03:00
|
|
|
label = <EmojiText element="div" title={ name } className={ nameClasses }>{name}</EmojiText>;
|
2016-04-14 23:11:10 +03:00
|
|
|
}
|
2016-09-09 08:57:30 +03:00
|
|
|
} else if (this.state.hover) {
|
2015-12-01 14:19:25 +03:00
|
|
|
var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
|
2016-09-09 08:57:30 +03:00
|
|
|
tooltip = <RoomTooltip className="mx_RoomTile_tooltip" room={this.props.room} />;
|
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
|
|
|
|
2015-11-27 14:50:33 +03:00
|
|
|
var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
|
|
|
|
|
2016-09-09 16:36:51 +03:00
|
|
|
var directMessageIndicator;
|
2016-09-26 20:02:14 +03:00
|
|
|
if (this._isDirectMessageRoom(this.props.room.roomId)) {
|
|
|
|
directMessageIndicator = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm"/>;
|
|
|
|
}
|
2016-09-09 16:36:51 +03:00
|
|
|
|
2015-11-27 14:50:33 +03:00
|
|
|
// These props are injected by React DnD,
|
|
|
|
// as defined by your `collect` function above:
|
|
|
|
var isDragging = this.props.isDragging;
|
|
|
|
var connectDragSource = this.props.connectDragSource;
|
|
|
|
var connectDropTarget = this.props.connectDropTarget;
|
|
|
|
|
2016-09-09 18:15:01 +03:00
|
|
|
let ret = (
|
2016-08-04 18:17:21 +03:00
|
|
|
<div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
2016-07-29 19:53:18 +03:00
|
|
|
<div className={avatarClasses}>
|
2016-08-10 16:46:05 +03:00
|
|
|
<div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
|
|
|
|
<div className={avatarContainerClasses}>
|
2016-08-10 19:01:06 +03:00
|
|
|
<RoomAvatar room={this.props.room} width={24} height={24} />
|
2016-09-09 16:36:51 +03:00
|
|
|
{directMessageIndicator}
|
2016-08-10 16:46:05 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
2015-11-27 14:50:33 +03:00
|
|
|
</div>
|
2016-08-03 16:09:10 +03:00
|
|
|
<div className="mx_RoomTile_nameContainer">
|
2016-08-02 16:46:47 +03:00
|
|
|
{ label }
|
|
|
|
{ badge }
|
|
|
|
</div>
|
2016-09-15 16:39:34 +03:00
|
|
|
{/* { incomingCallBox } */}
|
2016-07-22 16:58:09 +03:00
|
|
|
{ tooltip }
|
2015-11-27 14:50:33 +03:00
|
|
|
</div>
|
2016-09-09 18:15:01 +03:00
|
|
|
);
|
|
|
|
|
|
|
|
if (connectDropTarget) ret = connectDropTarget(ret);
|
|
|
|
if (connectDragSource) ret = connectDragSource(ret);
|
|
|
|
|
|
|
|
return ret;
|
2015-11-27 14:50:33 +03:00
|
|
|
}
|
|
|
|
});
|