Add right-click menu, move and copy effects (#3148)

frontend/src/components/tree-view/tree-view.js

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TreeNodeView from './tree-node-view';
 
+import TreeViewContextMenu from './tree-view-contextmenu'
+
 const propTypes = {
   repoPermission: PropTypes.bool,
   isNodeMenuShow: PropTypes.bool.isRequired,
@@ -21,9 +23,21 @@ class TreeView extends React.Component {
     super(props);
     this.state = {
       isItemFreezed: false,
+      isRightMenuShow: false,
+      nodeData: null,
+      fileData: null,
+      mousePosition: {clientX: '', clientY: ''},
     };
   }
 
+  componentDidMount() {
+    this.registerHandlers();
+  }
+
+  componentWillUnmount() {
+    this.unregisterHandlers();
+  }
+
   onNodeDragStart = (e, node) => {
     // todo
   }
@@ -36,6 +50,46 @@ class TreeView extends React.Component {
     this.setState({isItemFreezed: false});
   }
 
+  contextMenu = (e) => {
+    e.preventDefault();
+    this.setState({
+      isRightMenuShow:false,
+    });
+    setTimeout(() => { 
+      this.setState({
+        isRightMenuShow:true,
+        fileData:this.state.nodeData,
+        mousePosition: {clientX: e.clientX, clientY: e.clientY}
+      })
+    },40)
+  }  
+
+  unregisterHandlers = () => {
+    let treeView = document.querySelector('.tree-view');
+    treeView.removeEventListener('contextmenu', this.contextMenu);
+  }
+
+  registerHandlers = () => {
+    let treeView = document.querySelector('.tree-view');
+    treeView.addEventListener('contextmenu', this.contextMenu);
+  }
+
+  onNodeChanged = (node) => {
+    this.setState({
+      nodeData:node
+    })
+  }
+
+  closeRightMenu = () => {
+    this.setState({
+      isRightMenuShow:false,
+    })
+  }
+
+  onMenuItemClick = (operation, node) => {
+    this.props.onMenuItemClick(operation, node)
+  }
+
   render() {
     return (
       <div className="tree-view tree">
@@ -53,7 +107,20 @@ class TreeView extends React.Component {
           onNodeDragStart={this.onNodeDragStart}
           onFreezedItem={this.onFreezedItem}
           onUnFreezedItem={this.onUnFreezedItem}
+          onNodeChanged={this.onNodeChanged}
+          registerHandlers={this.registerHandlers}
+          unregisterHandlers={this.unregisterHandlers}
         />
+       {this.state.isRightMenuShow && (
+          <TreeViewContextMenu 
+            node={this.state.fileData}
+            onMenuItemClick={this.onMenuItemClick}
+            mousePosition={this.state.mousePosition}
+            closeRightMenu={this.closeRightMenu}
+            registerHandlers={this.registerHandlers}
+            unregisterHandlers={this.unregisterHandlers}
+          />
+        )}
       </div>
     );
   }