diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js index bc861eb156..a21b091145 100644 --- a/src/components/views/groups/GroupInviteTile.js +++ b/src/components/views/groups/GroupInviteTile.js @@ -16,7 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {createRef} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import createReactClass from 'create-react-class'; import { MatrixClient } from 'matrix-js-sdk'; @@ -27,6 +27,7 @@ import classNames from 'classnames'; import MatrixClientPeg from "../../../MatrixClientPeg"; import {ContextMenu, ContextMenuButton, toRightOf} from "../../structures/ContextMenu"; +// XXX this class copies a lot from RoomTile.js export default createReactClass({ displayName: 'GroupInviteTile', @@ -47,10 +48,6 @@ export default createReactClass({ }); }, - componentDidMount: function() { - this._contextMenuButton = createRef(); - }, - onClick: function(e) { dis.dispatch({ action: 'view_group', @@ -74,16 +71,12 @@ export default createReactClass({ }); }, - openMenu: function(e) { + _showContextMenu: function(boundingClientRect) { // Only allow non-guests to access the context menu if (MatrixClientPeg.get().isGuest()) return; - // Prevent the GroupInviteTile onClick event firing as well - e.stopPropagation(); - e.preventDefault(); - const state = { - menuDisplayed: true, + contextMenuPosition: boundingClientRect, }; // If the badge is clicked, then no longer show tooltip @@ -94,9 +87,28 @@ export default createReactClass({ this.setState(state); }, + onContextMenuButtonClick: function(e) { + // Prevent the RoomTile onClick event firing as well + e.stopPropagation(); + e.preventDefault(); + + this._showContextMenu(e.target.getBoundingClientRect()); + }, + + onContextMenu: function(e) { + // Prevent the native context menu + e.preventDefault(); + + this._showContextMenu({ + right: e.clientX, + top: e.clientY, + height: 0, + }); + }, + closeMenu: function() { this.setState({ - menuDisplayed: false, + contextMenuPosition: null, }); }, @@ -110,15 +122,16 @@ export default createReactClass({ const av = ; + const isMenuDisplayed = Boolean(this.state.contextMenuPosition); const nameClasses = classNames('mx_RoomTile_name mx_RoomTile_invite mx_RoomTile_badgeShown', { - 'mx_RoomTile_badgeShown': this.state.badgeHover || this.state.menuDisplayed, + 'mx_RoomTile_badgeShown': this.state.badgeHover || isMenuDisplayed, }); const label =
{ groupName }
; - const badgeEllipsis = this.state.badgeHover || this.state.menuDisplayed; + const badgeEllipsis = this.state.badgeHover || isMenuDisplayed; const badgeClasses = classNames('mx_RoomTile_badge mx_RoomTile_highlight', { 'mx_RoomTile_badgeButton': badgeEllipsis, }); @@ -127,10 +140,9 @@ export default createReactClass({ const badge = ( { badgeContent } @@ -143,17 +155,16 @@ export default createReactClass({ } const classes = classNames('mx_RoomTile mx_RoomTile_highlight', { - 'mx_RoomTile_menuDisplayed': this.state.menuDisplayed, + 'mx_RoomTile_menuDisplayed': isMenuDisplayed, 'mx_RoomTile_selected': this.state.selected, 'mx_GroupInviteTile': true, }); let contextMenu; - if (this.state.menuDisplayed) { - const elementRect = this._contextMenuButton.current.getBoundingClientRect(); + if (isMenuDisplayed) { const GroupInviteTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu'); contextMenu = ( - + );