Merge pull request #4492 from ihatetothink/comunities-drag-from-context

Solves communities can be dragged from context menu

src/components/views/elements/DNDTagTile.js

@@ -19,8 +19,22 @@ import TagTile from './TagTile';
 
 import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
+import { ContextMenu, toRightOf, useContextMenu } from "../../structures/ContextMenu";
+import * as sdk from '../../../index';
 
 export default function DNDTagTile(props) {
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
+
+    let contextMenu = null;
+    if (menuDisplayed && handle.current) {
+        const elementRect = handle.current.getBoundingClientRect();
+        const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
+        contextMenu = (
+            <ContextMenu {...toRightOf(elementRect)} onFinished={closeMenu}>
+                <TagTileContextMenu tag={props.tag} onFinished={closeMenu} />
+            </ContextMenu>
+        );
+    }
     return <div>
         <Draggable
             key={props.tag}
@@ -28,18 +42,21 @@ export default function DNDTagTile(props) {
             index={props.index}
             type="draggable-TagTile"
         >
-            { (provided, snapshot) => (
+            {(provided, snapshot) => (
-                <div>
+                <div
-                    <div
+                    ref={provided.innerRef}
-                        ref={provided.innerRef}
+                    {...provided.draggableProps}
-                        {...provided.draggableProps}
+                    {...provided.dragHandleProps}
-                        {...provided.dragHandleProps}
+                >
-                    >
+                    <TagTile
-                        <TagTile {...props} />
+                        {...props}
-                    </div>
+                        contextMenuButtonRef={handle}
-                    { provided.placeholder }
+                        menuDisplayed={menuDisplayed}
+                        openMenu={openMenu}
+                    />
                 </div>
-            ) }
+            )}
         </Draggable>
+        {contextMenu}
     </div>;
 }

src/components/views/elements/TagTile.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 classNames from 'classnames';
@@ -28,7 +28,6 @@ import * as FormattingUtils from '../../../utils/FormattingUtils';
 import FlairStore from '../../../stores/FlairStore';
 import GroupStore from '../../../stores/GroupStore';
 import TagOrderStore from '../../../stores/TagOrderStore';
-import {ContextMenu, toRightOf} from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 // A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
@@ -43,6 +42,9 @@ export default createReactClass({
         // A string tag such as "m.favourite" or a group ID such as "+groupid:domain.bla"
         // For now, only group IDs are handled.
         tag: PropTypes.string,
+        contextMenuButtonRef: PropTypes.object,
+        openMenu: PropTypes.func,
+        menuDisplayed: PropTypes.bool,
     },
 
     statics: {
@@ -55,14 +57,10 @@ export default createReactClass({
             hover: false,
             // The profile data of the group if this.props.tag is a group ID
             profile: null,
-            // Whether or not the context menu is open
-            menuDisplayed: false,
         };
     },
 
     componentDidMount() {
-        this._contextMenuButton = createRef();
-
         this.unmounted = false;
         if (this.props.tag[0] === '+') {
             FlairStore.addListener('updateGroupProfile', this._onFlairStoreUpdated);
@@ -86,7 +84,7 @@ export default createReactClass({
             this.props.tag,
         ).then((profile) => {
             if (this.unmounted) return;
-            this.setState({profile});
+            this.setState({ profile });
         }).catch((err) => {
             console.warn('Could not fetch group profile for ' + this.props.tag, err);
         });
@@ -113,28 +111,19 @@ export default createReactClass({
     },
 
     onMouseOver: function() {
-        this.setState({hover: true});
+        this.setState({ hover: true });
     },
 
     onMouseOut: function() {
-        this.setState({hover: false});
+        this.setState({ hover: false });
     },
 
     openMenu: function(e) {
         // Prevent the TagTile onClick event firing as well
         e.stopPropagation();
         e.preventDefault();
-
+        this.setState({ hover: false });
-        this.setState({
+        this.props.openMenu();
-            menuDisplayed: true,
-            hover: false,
-        });
-    },
-
-    closeMenu: function() {
-        this.setState({
-            menuDisplayed: false,
-        });
     },
 
     render: function() {
@@ -154,7 +143,7 @@ export default createReactClass({
 
         const badge = TagOrderStore.getGroupBadge(this.props.tag);
         let badgeElement;
-        if (badge && !this.state.hover) {
+        if (badge && !this.state.hover && !this.props.menuDisplayed) {
             const badgeClasses = classNames({
                 "mx_TagTile_badge": true,
                 "mx_TagTile_badgeHighlight": badge.highlight,
@@ -163,39 +152,34 @@ export default createReactClass({
         }
 
         // FIXME: this ought to use AccessibleButton for a11y but that causes onMouseOut/onMouseOver to fire too much
-        const contextButton = this.state.hover || this.state.menuDisplayed ?
+        const contextButton = this.state.hover || this.props.menuDisplayed ?
-            <div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this._contextMenuButton}>
+            <div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this.props.contextMenuButtonRef}>
-                { "\u00B7\u00B7\u00B7" }
+                {"\u00B7\u00B7\u00B7"}
-            </div> : <div ref={this._contextMenuButton} />;
+            </div> : <div ref={this.props.contextMenuButtonRef} />;
-
-        let contextMenu;
-        if (this.state.menuDisplayed) {
-            const elementRect = this._contextMenuButton.current.getBoundingClientRect();
-            const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
-            contextMenu = (
-                <ContextMenu {...toRightOf(elementRect)} onFinished={this.closeMenu}>
-                    <TagTileContextMenu tag={this.props.tag} onFinished={this.closeMenu} />
-                </ContextMenu>
-            );
-        }
 
         const AccessibleTooltipButton = sdk.getComponent("elements.AccessibleTooltipButton");
-        return <React.Fragment>
-            <AccessibleTooltipButton className={className} onClick={this.onClick} onContextMenu={this.openMenu} title={name}>
-                <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
-                    <BaseAvatar
-                        name={name}
-                        idName={this.props.tag}
-                        url={httpUrl}
-                        width={avatarHeight}
-                        height={avatarHeight}
-                    />
-                    { contextButton }
-                    { badgeElement }
-                </div>
-            </AccessibleTooltipButton>
 
-            { contextMenu }
+        return <AccessibleTooltipButton
-        </React.Fragment>;
+            className={className}
+            onClick={this.onClick}
+            onContextMenu={this.openMenu}
+            title={name}
+        >
+            <div
+                className="mx_TagTile_avatar"
+                onMouseOver={this.onMouseOver}
+                onMouseOut={this.onMouseOut}
+            >
+                <BaseAvatar
+                    name={name}
+                    idName={this.props.tag}
+                    url={httpUrl}
+                    width={avatarHeight}
+                    height={avatarHeight}
+                />
+                {contextButton}
+                {badgeElement}
+            </div>
+        </AccessibleTooltipButton>;
     },
 });