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>
|
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';
|
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';
|
|
|
|
import RoomViewStore from '../../../stores/RoomViewStore';
|
2015-11-27 14:50:33 +03:00
|
|
|
|
|
|
|
module.exports = React.createClass({
|
|
|
|
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(),
|
2017-09-11 18:59:09 +03:00
|
|
|
selected: this.props.room.roomId === RoomViewStore.getRoomId(),
|
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() {
|
2018-06-16 11:10:13 +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) {
|
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
|
|
|
},
|
|
|
|
|
2018-03-14 17:29:55 +03:00
|
|
|
onRoomTimeline: function(ev, room) {
|
|
|
|
if (room !== this.props.room) return;
|
|
|
|
this.setState({
|
|
|
|
notificationCount: this.props.room.getUnreadNotificationCount(),
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
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(),
|
|
|
|
});
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-09-11 18:59:09 +03:00
|
|
|
_onActiveRoomChange: function() {
|
|
|
|
this.setState({
|
|
|
|
selected: this.props.room.roomId === RoomViewStore.getRoomId(),
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-05-16 18:11:01 +03:00
|
|
|
componentWillMount: function() {
|
|
|
|
MatrixClientPeg.get().on("accountData", this.onAccountData);
|
2018-03-14 17:29:55 +03:00
|
|
|
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
|
|
|
|
MatrixClientPeg.get().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);
|
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.timeline", this.onRoomTimeline);
|
|
|
|
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);
|
|
|
|
},
|
|
|
|
|
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
|
|
|
},
|
|
|
|
|
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
|
|
|
},
|
|
|
|
|
2016-07-21 19:44:31 +03:00
|
|
|
onBadgeClicked: 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";
|
2018-03-14 17:29:55 +03:00
|
|
|
const notificationCount = this.state.notificationCount;
|
2016-01-22 20:22:49 +03:00
|
|
|
// var highlightCount = this.props.room.getUnreadNotificationCount("highlight");
|
|
|
|
|
2016-08-18 15:44:58 +03:00
|
|
|
const notifBadges = notificationCount > 0 && this._shouldShowNotifBadge();
|
2017-05-16 18:11:01 +03:00
|
|
|
const mentionBadges = this.props.highlight && this._shouldShowMentionBadge();
|
2016-08-18 15:44:58 +03:00
|
|
|
const badges = notifBadges || mentionBadges;
|
2016-08-18 13:58:27 +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,
|
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
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
let badgeContent;
|
2016-07-20 14:47:32 +03:00
|
|
|
|
2017-03-09 20:03:57 +03:00
|
|
|
if (this.state.badgeHover || this.state.menuDisplayed) {
|
2016-07-20 19:12:41 +03:00
|
|
|
badgeContent = "\u00B7\u00B7\u00B7";
|
2016-08-18 13:58:27 +03:00
|
|
|
} else if (badges) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const 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';
|
|
|
|
}
|
|
|
|
|
2018-06-18 14:05:57 +03:00
|
|
|
const 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');
|
2017-10-11 19:56:17 +03:00
|
|
|
let label;
|
|
|
|
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
|
|
|
});
|
|
|
|
|
2017-09-11 18:59:09 +03:00
|
|
|
if (this.state.selected) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const nameSelected = <EmojiText>{ name }</EmojiText>;
|
2016-07-22 16:58:09 +03:00
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
label = <div title={name} className={nameClasses} dir="auto">{ nameSelected }</div>;
|
2016-07-05 07:46:17 +03:00
|
|
|
} else {
|
2017-10-11 19:56:17 +03:00
|
|
|
label = <EmojiText element="div" title={name} className={nameClasses} dir="auto">{ name }</EmojiText>;
|
2016-04-14 23:11:10 +03:00
|
|
|
}
|
2016-09-09 08:57:30 +03:00
|
|
|
} else if (this.state.hover) {
|
2017-10-11 19:56:17 +03:00
|
|
|
const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
|
2018-06-12 17:22:45 +03:00
|
|
|
tooltip = <RoomTooltip 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
|
|
|
|
2017-10-11 19:56:17 +03:00
|
|
|
const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
|
2015-11-27 14:50:33 +03:00
|
|
|
|
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)) {
|
2018-06-16 11:10:13 +03:00
|
|
|
dmIndicator = <img src="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
|
|
|
|
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}
|
|
|
|
>
|
2018-01-18 20:52:50 +03:00
|
|
|
<div className={avatarClasses}>
|
|
|
|
<div className="mx_RoomTile_avatar_container">
|
2018-05-25 05:17:29 +03:00
|
|
|
<RoomAvatar room={this.props.room} width={32} height={32} />
|
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-09-24 18:07:42 +03:00
|
|
|
{ label }
|
|
|
|
{ badge }
|
2018-01-18 20:52:50 +03:00
|
|
|
{ /* { incomingCallBox } */ }
|
|
|
|
{ tooltip }
|
|
|
|
</AccessibleButton>;
|
2017-10-11 19:56:17 +03:00
|
|
|
},
|
2015-11-27 14:50:33 +03:00
|
|
|
});
|