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');
|
|
|
|
var classNames = require('classnames');
|
|
|
|
var dis = require("../../../dispatcher");
|
|
|
|
var MatrixClientPeg = require('../../../MatrixClientPeg');
|
|
|
|
var sdk = require('../../../index');
|
2016-07-27 16:49:10 +03:00
|
|
|
var ContextualMenu = require('../../structures/ContextualMenu');
|
2016-07-05 07:46:17 +03:00
|
|
|
import {emojifyText} from '../../../HtmlUtils';
|
2015-11-27 14:50:33 +03:00
|
|
|
|
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'RoomTile',
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
// TODO: We should *optionally* support DND stuff and ideally be impl agnostic about it
|
|
|
|
connectDragSource: React.PropTypes.func.isRequired,
|
|
|
|
connectDropTarget: React.PropTypes.func.isRequired,
|
|
|
|
isDragging: React.PropTypes.bool.isRequired,
|
|
|
|
|
|
|
|
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,
|
|
|
|
roomSubList: React.PropTypes.object.isRequired,
|
2015-12-17 05:49:09 +03:00
|
|
|
incomingCall: React.PropTypes.object,
|
2015-11-27 14:50:33 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
2016-07-28 19:24:58 +03:00
|
|
|
var areNotifsMuted = false;
|
|
|
|
var cli = MatrixClientPeg.get();
|
|
|
|
if (!cli.isGuest()) {
|
|
|
|
var roomPushRule = cli.getRoomPushRule("global", this.props.room.roomId);
|
|
|
|
if (roomPushRule) {
|
|
|
|
if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
|
|
|
|
areNotifsMuted = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-07-18 18:10:07 +03:00
|
|
|
return({
|
|
|
|
hover : false,
|
|
|
|
badgeHover : false,
|
2016-07-21 19:44:31 +03:00
|
|
|
menu: false,
|
2016-07-28 19:24:58 +03:00
|
|
|
areNotifsMuted: areNotifsMuted,
|
2016-07-18 18:10:07 +03:00
|
|
|
});
|
2015-11-27 14:50:33 +03:00
|
|
|
},
|
|
|
|
|
2016-07-28 19:24:58 +03:00
|
|
|
onAction: function(payload) {
|
|
|
|
switch (payload.action) {
|
|
|
|
case 'notification_change':
|
|
|
|
// Is the notificaion about this room
|
|
|
|
if (payload.roomId === this.props.room.roomId) {
|
|
|
|
this.setState( { areNotifsMuted : payload.isMuted });
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
componentDidMount: function() {
|
|
|
|
this.dispatcherRef = dis.register(this.onAction);
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount: function() {
|
|
|
|
dis.unregister(this.dispatcherRef);
|
|
|
|
},
|
|
|
|
|
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 });
|
|
|
|
},
|
|
|
|
|
|
|
|
onMouseLeave: function() {
|
|
|
|
this.setState( { hover : false });
|
|
|
|
},
|
|
|
|
|
2016-07-18 18:10:07 +03:00
|
|
|
badgeOnMouseEnter: function() {
|
2016-07-27 13:58:40 +03:00
|
|
|
// Only allow none guests to access the context menu
|
|
|
|
if (!MatrixClientPeg.get().isGuest()) {
|
|
|
|
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()) {
|
|
|
|
var Menu = sdk.getComponent('context_menus.NotificationStateContextMenu');
|
|
|
|
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;
|
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;
|
|
|
|
ContextualMenu.createMenu(Menu, {
|
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() {
|
|
|
|
self.setState({ menu: false });
|
|
|
|
}
|
|
|
|
});
|
|
|
|
this.setState({ menu: true });
|
|
|
|
}
|
2016-07-21 19:44:31 +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");
|
|
|
|
|
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-01-22 20:22:49 +03:00
|
|
|
'mx_RoomTile_unreadNotify': notificationCount > 0,
|
2016-07-21 16:33:54 +03:00
|
|
|
'mx_RoomTile_read': !(this.props.highlight || notificationCount > 0),
|
2015-11-27 14:50:33 +03:00
|
|
|
'mx_RoomTile_highlight': this.props.highlight,
|
|
|
|
'mx_RoomTile_invited': (me && me.membership == 'invite'),
|
2016-07-25 19:18:45 +03:00
|
|
|
'mx_RoomTile_menu': this.state.menu,
|
2015-11-27 14:50:33 +03:00
|
|
|
});
|
|
|
|
|
2016-07-28 19:24:58 +03:00
|
|
|
var avatarClasses = classNames({
|
|
|
|
'mx_RoomTile_avatar': true,
|
|
|
|
'mx_RoomTile_mute': this.state.areNotifsMuted,
|
|
|
|
});
|
|
|
|
|
|
|
|
var badgeClasses = classNames({
|
|
|
|
'mx_RoomTile_badge': true,
|
|
|
|
'mx_RoomTile_badgeButton': this.state.badgeHover || this.state.menu,
|
|
|
|
'mx_RoomTile_badgeMute': this.state.areNotifsMuted,
|
|
|
|
});
|
|
|
|
|
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-07-25 19:18:45 +03:00
|
|
|
if (this.state.badgeHover || this.state.menu) {
|
2016-07-20 19:12:41 +03:00
|
|
|
badgeContent = "\u00B7\u00B7\u00B7";
|
2016-07-20 14:47:32 +03:00
|
|
|
} else if (this.props.highlight || notificationCount > 0) {
|
2016-07-25 16:39:15 +03:00
|
|
|
var limitedCount = (notificationCount > 99) ? '99+' : notificationCount;
|
2016-07-21 20:50:07 +03:00
|
|
|
badgeContent = notificationCount ? limitedCount : '!';
|
2016-07-20 14:47:32 +03:00
|
|
|
} else {
|
|
|
|
badgeContent = '\u200B';
|
|
|
|
}
|
|
|
|
|
2016-07-28 19:24:58 +03:00
|
|
|
if (this.state.areNotifsMuted && !(this.state.badgeHover || this.state.menu)) {
|
|
|
|
badge = <div className={ badgeClasses } onClick={this.onBadgeClicked} onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave}><img className="mx_RoomTile_badgeIcon" src="img/icon-context-mute.svg" width="16" height="12" /></div>;
|
|
|
|
} else {
|
|
|
|
badge = <div className={ badgeClasses } onClick={this.onBadgeClicked} onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave}>{ badgeContent }</div>;
|
|
|
|
}
|
2016-07-20 14:47:32 +03:00
|
|
|
|
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,
|
|
|
|
'mx_RoomTile_mute': this.state.areNotifsMuted,
|
|
|
|
});
|
|
|
|
|
2016-07-05 07:46:17 +03:00
|
|
|
let nameHTML = emojifyText(name);
|
2016-04-14 23:11:10 +03:00
|
|
|
if (this.props.selected) {
|
2016-07-05 07:46:17 +03:00
|
|
|
name = <span dangerouslySetInnerHTML={nameHTML}></span>;
|
2016-07-22 16:58:09 +03:00
|
|
|
|
2016-07-28 19:24:58 +03:00
|
|
|
label = <div title={ name } onClick={this.onClick} onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave} className={ nameClasses }>{ name }</div>;
|
2016-07-05 07:46:17 +03:00
|
|
|
} else {
|
2016-07-28 19:24:58 +03:00
|
|
|
label = <div title={ name } onClick={this.onClick} onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave} className={ nameClasses } dangerouslySetInnerHTML={nameHTML}></div>;
|
2016-04-14 23:11:10 +03:00
|
|
|
}
|
2015-11-27 14:50:33 +03:00
|
|
|
}
|
|
|
|
else if (this.state.hover) {
|
2015-12-01 14:19:25 +03:00
|
|
|
var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
|
2015-11-27 14:50:33 +03:00
|
|
|
label = <RoomTooltip room={this.props.room}/>;
|
|
|
|
}
|
|
|
|
|
2015-12-17 05:49:09 +03:00
|
|
|
var incomingCallBox;
|
|
|
|
if (this.props.incomingCall) {
|
|
|
|
var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
|
|
|
|
incomingCallBox = <IncomingCallBox incomingCall={ this.props.incomingCall }/>;
|
|
|
|
}
|
|
|
|
|
2015-11-27 14:50:33 +03:00
|
|
|
var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
|
|
|
|
|
|
|
|
// 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;
|
|
|
|
|
|
|
|
return connectDragSource(connectDropTarget(
|
2016-07-21 19:44:31 +03:00
|
|
|
<div className={classes} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
|
2016-07-28 19:24:58 +03:00
|
|
|
<div className={avatarClasses}>
|
2016-07-21 19:44:31 +03:00
|
|
|
<RoomAvatar onClick={this.onClick} room={this.props.room} width={24} height={24} />
|
2015-11-27 14:50:33 +03:00
|
|
|
</div>
|
|
|
|
{ label }
|
2016-05-17 13:14:12 +03:00
|
|
|
{ badge }
|
2015-12-17 05:49:09 +03:00
|
|
|
{ incomingCallBox }
|
2016-07-22 16:58:09 +03:00
|
|
|
{ tooltip }
|
2015-11-27 14:50:33 +03:00
|
|
|
</div>
|
|
|
|
));
|
|
|
|
}
|
|
|
|
});
|