2017-08-18 13:22:50 +03:00
|
|
|
/*
|
2018-06-12 17:22:45 +03:00
|
|
|
Copyright 2017, 2018 New Vector Ltd
|
2018-06-18 14:16:33 +03:00
|
|
|
Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
|
2017-08-18 13:22:50 +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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2019-09-06 20:35:52 +03:00
|
|
|
import createReactClass from 'create-react-class';
|
2017-11-09 17:34:04 +03:00
|
|
|
import { MatrixClient } from 'matrix-js-sdk';
|
2017-08-18 13:22:50 +03:00
|
|
|
import sdk from '../../../index';
|
|
|
|
import dis from '../../../dispatcher';
|
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
2018-06-12 17:22:45 +03:00
|
|
|
import classNames from 'classnames';
|
2018-06-18 14:16:33 +03:00
|
|
|
import MatrixClientPeg from "../../../MatrixClientPeg";
|
|
|
|
import {createMenu} from "../../structures/ContextualMenu";
|
2017-08-18 13:22:50 +03:00
|
|
|
|
2019-09-06 20:35:52 +03:00
|
|
|
export default createReactClass({
|
2017-08-18 13:22:50 +03:00
|
|
|
displayName: 'GroupInviteTile',
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
group: PropTypes.object.isRequired,
|
|
|
|
},
|
|
|
|
|
2017-11-09 17:34:04 +03:00
|
|
|
contextTypes: {
|
|
|
|
matrixClient: PropTypes.instanceOf(MatrixClient),
|
|
|
|
},
|
|
|
|
|
2018-06-12 17:22:45 +03:00
|
|
|
getInitialState: function() {
|
|
|
|
return ({
|
|
|
|
hover: false,
|
|
|
|
badgeHover: false,
|
|
|
|
menuDisplayed: false,
|
|
|
|
selected: this.props.group.groupId === null, // XXX: this needs linking to LoggedInView/GroupView state
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-08-18 13:22:50 +03:00
|
|
|
onClick: function(e) {
|
|
|
|
dis.dispatch({
|
|
|
|
action: 'view_group',
|
|
|
|
group_id: this.props.group.groupId,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2018-06-12 17:22:45 +03:00
|
|
|
onMouseEnter: function() {
|
|
|
|
const state = {hover: true};
|
|
|
|
// Only allow non-guests to access the context menu
|
|
|
|
if (!this.context.matrixClient.isGuest()) {
|
|
|
|
state.badgeHover = true;
|
|
|
|
}
|
|
|
|
this.setState(state);
|
|
|
|
},
|
|
|
|
|
|
|
|
onMouseLeave: function() {
|
|
|
|
this.setState({
|
|
|
|
badgeHover: false,
|
|
|
|
hover: false,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2018-06-18 14:16:33 +03:00
|
|
|
_showContextMenu: function(x, y, chevronOffset) {
|
|
|
|
const GroupInviteTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu');
|
|
|
|
|
|
|
|
createMenu(GroupInviteTileContextMenu, {
|
|
|
|
chevronOffset,
|
|
|
|
left: x,
|
|
|
|
top: y,
|
|
|
|
group: this.props.group,
|
|
|
|
onFinished: () => {
|
|
|
|
this.setState({ menuDisplayed: false });
|
|
|
|
},
|
|
|
|
});
|
|
|
|
this.setState({ menuDisplayed: true });
|
|
|
|
},
|
|
|
|
|
2018-06-16 11:07:16 +03:00
|
|
|
onContextMenu: function(e) {
|
2018-06-18 14:16:33 +03:00
|
|
|
// Prevent the RoomTile onClick event firing as well
|
2018-06-16 11:07:16 +03:00
|
|
|
e.preventDefault();
|
2018-06-18 14:16:33 +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
|
|
|
},
|
|
|
|
|
2018-06-12 17:22:45 +03:00
|
|
|
onBadgeClicked: function(e) {
|
|
|
|
// Prevent the RoomTile onClick event firing as well
|
|
|
|
e.stopPropagation();
|
2018-06-18 14:16:33 +03:00
|
|
|
// Only allow non-guests to access the context menu
|
|
|
|
if (MatrixClientPeg.get().isGuest()) return;
|
2018-06-12 17:22:45 +03:00
|
|
|
|
|
|
|
// If the badge is clicked, then no longer show tooltip
|
|
|
|
if (this.props.collapsed) {
|
|
|
|
this.setState({ hover: false });
|
|
|
|
}
|
|
|
|
|
2018-06-18 14:16:33 +03:00
|
|
|
const elementRect = e.target.getBoundingClientRect();
|
2018-06-12 17:22:45 +03:00
|
|
|
|
|
|
|
// 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
|
|
|
|
|
2018-06-18 14:16:33 +03:00
|
|
|
this._showContextMenu(x, y, chevronOffset);
|
2018-06-12 17:22:45 +03:00
|
|
|
},
|
|
|
|
|
2017-08-18 13:22:50 +03:00
|
|
|
render: function() {
|
|
|
|
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
|
|
|
|
|
2017-10-19 17:47:52 +03:00
|
|
|
const groupName = this.props.group.name || this.props.group.groupId;
|
2017-11-09 17:34:04 +03:00
|
|
|
const httpAvatarUrl = this.props.group.avatarUrl ?
|
|
|
|
this.context.matrixClient.mxcUrlToHttp(this.props.group.avatarUrl, 24, 24) : null;
|
2017-10-19 17:47:52 +03:00
|
|
|
|
2017-11-09 17:34:04 +03:00
|
|
|
const av = <BaseAvatar name={groupName} width={24} height={24} url={httpAvatarUrl} />;
|
2017-08-18 13:22:50 +03:00
|
|
|
|
2018-06-19 21:11:22 +03:00
|
|
|
const nameClasses = classNames('mx_RoomTile_name mx_RoomTile_invite mx_RoomTile_badgeShown', {
|
2018-06-12 17:22:45 +03:00
|
|
|
'mx_RoomTile_badgeShown': this.state.badgeHover || this.state.menuDisplayed,
|
|
|
|
});
|
|
|
|
|
2019-05-19 17:23:43 +03:00
|
|
|
const label = <div title={this.props.group.groupId} className={nameClasses} dir="auto">
|
2017-10-19 17:47:52 +03:00
|
|
|
{ groupName }
|
2019-05-19 17:23:43 +03:00
|
|
|
</div>;
|
2017-08-18 13:22:50 +03:00
|
|
|
|
2018-06-12 17:22:45 +03:00
|
|
|
const badgeEllipsis = this.state.badgeHover || this.state.menuDisplayed;
|
2018-06-27 11:50:32 +03:00
|
|
|
const badgeClasses = classNames('mx_RoomTile_badge mx_RoomTile_highlight', {
|
2018-06-12 17:22:45 +03:00
|
|
|
'mx_RoomTile_badgeButton': badgeEllipsis,
|
|
|
|
});
|
|
|
|
|
|
|
|
const badgeContent = badgeEllipsis ? '\u00B7\u00B7\u00B7' : '!';
|
2018-06-18 14:16:33 +03:00
|
|
|
const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
|
2018-06-12 17:22:45 +03:00
|
|
|
|
|
|
|
let tooltip;
|
|
|
|
if (this.props.collapsed && this.state.hover) {
|
2019-02-01 02:36:19 +03:00
|
|
|
const Tooltip = sdk.getComponent("elements.Tooltip");
|
|
|
|
tooltip = <Tooltip className="mx_RoomTile_tooltip" label={groupName} dir="auto" />;
|
2018-06-12 17:22:45 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
const classes = classNames('mx_RoomTile mx_RoomTile_highlight', {
|
|
|
|
'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
|
|
|
|
'mx_RoomTile_selected': this.state.selected,
|
2019-02-15 14:37:22 +03:00
|
|
|
'mx_GroupInviteTile': true,
|
2018-06-12 17:22:45 +03:00
|
|
|
});
|
2017-08-18 13:22:50 +03:00
|
|
|
|
|
|
|
return (
|
2018-06-16 11:07:16 +03:00
|
|
|
<AccessibleButton className={classes}
|
|
|
|
onClick={this.onClick}
|
|
|
|
onMouseEnter={this.onMouseEnter}
|
|
|
|
onMouseLeave={this.onMouseLeave}
|
|
|
|
onContextMenu={this.onContextMenu}
|
|
|
|
>
|
2017-11-03 15:19:37 +03:00
|
|
|
<div className="mx_RoomTile_avatar">
|
2017-09-28 13:21:06 +03:00
|
|
|
{ av }
|
2017-08-18 13:22:50 +03:00
|
|
|
</div>
|
2017-11-03 15:19:37 +03:00
|
|
|
<div className="mx_RoomTile_nameContainer">
|
2017-09-28 13:21:06 +03:00
|
|
|
{ label }
|
|
|
|
{ badge }
|
2017-08-18 13:22:50 +03:00
|
|
|
</div>
|
2018-06-12 17:22:45 +03:00
|
|
|
{ tooltip }
|
2017-08-18 13:22:50 +03:00
|
|
|
</AccessibleButton>
|
|
|
|
);
|
2017-08-21 21:34:07 +03:00
|
|
|
},
|
2017-08-18 13:22:50 +03:00
|
|
|
});
|