make GroupInviteTile context menu appear where you right clicked instead

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/groups/GroupInviteTile.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017, 2018 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,8 +21,9 @@ import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
-import * as ContextualMenu from "../../structures/ContextualMenu";
 import classNames from 'classnames';
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import {createMenu} from "../../structures/ContextualMenu";
 
 export default React.createClass({
     displayName: 'GroupInviteTile',
@@ -66,34 +68,11 @@ export default React.createClass({
         });
     },
 
-    onContextMenu: function(e) {
+    _showContextMenu: function(x, y, chevronOffset) {
-        this.onBadgeClicked(e);
+        const GroupInviteTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu');
-        e.preventDefault();
-    },
 
-    onBadgeClicked: function(e) {
+        createMenu(GroupInviteTileContextMenu, {
-        // Prevent the RoomTile onClick event firing as well
+            chevronOffset,
-        e.stopPropagation();
-
-        // Only allow none guests to access the context menu
-        if (this.context.matrixClient.isGuest()) return;
-
-        // If the badge is clicked, then no longer show tooltip
-        if (this.props.collapsed) {
-            this.setState({ hover: false });
-        }
-
-        const RoomTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu');
-        const elementRect = this.refs.badge.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
-
-        ContextualMenu.createMenu(RoomTileContextMenu, {
-            chevronOffset: chevronOffset,
             left: x,
             top: y,
             group: this.props.group,
@@ -104,6 +83,38 @@ export default React.createClass({
         this.setState({ menuDisplayed: true });
     },
 
+    onContextMenu: function(e) {
+        // Prevent the RoomTile onClick event firing as well
+        e.preventDefault();
+        // 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);
+    },
+
+    onBadgeClicked: function(e) {
+        // Prevent the RoomTile onClick event firing as well
+        e.stopPropagation();
+        // 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);
+    },
+
     render: function() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const EmojiText = sdk.getComponent('elements.EmojiText');
@@ -130,7 +141,7 @@ export default React.createClass({
         });
 
         const badgeContent = badgeEllipsis ? '\u00B7\u00B7\u00B7' : '!';
-        const badge = <div className={badgeClasses} ref="badge" onClick={this.onBadgeClicked}>{ badgeContent }</div>;
+        const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
 
         let tooltip;
         if (this.props.collapsed && this.state.hover) {