Refactored DNDTagTile to use useContextMenu

Signed-off-by: Agusti Bau <agustibau@gmail.com>

src/components/views/elements/DNDTagTile.js

@@ -17,55 +17,29 @@ limitations under the License.
 
 import TagTile from './TagTile';
 
-import React, {createRef} from 'react';
+import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
-import {ContextMenu, toRightOf} from "../../structures/ContextMenu";
+import {ContextMenu, toRightOf, useContextMenu} from "../../structures/ContextMenu";
 import * as sdk from '../../../index';
 
-export default class DNDTagTile extends React.Component {
+export default function DNDTagTile(props) {
-    constructor() {
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
-        super();
-        this.state = {
-            menuDisplayed: false,
-        };
 
-        this.openMenu = this.openMenu.bind(this);
+    let contextMenu = null;
-        this.closeMenu = this.closeMenu.bind(this);
+    if (menuDisplayed && handle.current) {
-    }
+        const elementRect = handle.current.getBoundingClientRect();
-
-    componentDidMount() {
-        this._contextMenuButton = createRef();
-    }
-
-    openMenu() {
-        this.setState({
-            menuDisplayed: true,
-        });
-    }
-
-    closeMenu() {
-        console.log("Closig menu");
-        this.setState({
-            menuDisplayed: false,
-        });
-    }
-
-    getContextMenu() {
-        const elementRect = this._contextMenuButton.current.getBoundingClientRect();
         const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
-        return (
+        contextMenu = (
-            <ContextMenu {...toRightOf(elementRect)} onFinished={this.closeMenu}>
+            <ContextMenu {...toRightOf(elementRect)} onFinished={closeMenu}>
-                <TagTileContextMenu tag={this.props.tag} onFinished={this.closeMenu} />
+                <TagTileContextMenu tag={props.tag} onFinished={closeMenu} />
             </ContextMenu>
         );
     }
-
-    render(props) {
         return <div>
             <Draggable
-                key={this.props.tag}
+                key={props.tag}
-                draggableId={this.props.tag}
+                draggableId={props.tag}
-                index={this.props.index}
+                index={props.index}
                 type="draggable-TagTile"
             >
                 { (provided, snapshot) => (
@@ -76,17 +50,16 @@ export default class DNDTagTile extends React.Component {
                             {...provided.dragHandleProps}
                         >
                            <TagTile
-                            {...this.props}
+                            {...props}
-                               contextMenuButtonRef= {this._contextMenuButton}
+                               contextMenuButtonRef= {handle}
-                               menuDisplayed={this.state.menuDisplayed}
+                               menuDisplayed={menuDisplayed}
-                               openMenu={this.openMenu}
+                               openMenu={openMenu}
                             />
                         </div>
                         { provided.placeholder }
                     </div>
                 ) }
             </Draggable>
-                    {this.state.menuDisplayed && this.getContextMenu()}
+                    {contextMenu}
         </div>;
-    }
 }