Item right menu (#3203)

* Add item right menu

* Add item right menu

* Pass value bug

* Add item right menu

* modify style problem

* Add some style

* Modifying naming issues

* Modify Priority

* Add showShare jurisdiction and modify priority

* Modify subscript to itemIndex

* Communication between sibling components

* Improve interaction

* modify style problem

* Promotion isItemFreezed  and onUnfreezedItem level

* modify bugs

* have tree-node bug

* Solve tree-node item-click  bug

* Complete right click menu

* modify style

* modify style

* item-right-menu finash

* modify style to dirent-=list-item

* modify some style problem

* modify styles

* stop thead contextmenu

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

@@ -10,6 +10,7 @@ const propTypes = {
   onUnFreezedItem: PropTypes.func.isRequired,
   registerHandlers: PropTypes.func,
   unregisterHandlers: PropTypes.func,
+  appMenuType: PropTypes.oneOf(['list_view_contextmenu', 'item_contextmenu', 'tree_contextmenu', 'item_op_menu']),
 };
 
 class TreeNodeMenu extends React.Component {
@@ -27,6 +28,13 @@ class TreeNodeMenu extends React.Component {
     this.setState({menuList: menuList});
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.appMenuType !== 'item_op_menu') {
+      this.setState({isItemMenuShow: false}); 
+      this.props.onUnFreezedItem();
+    }
+  }
+
   caculateMenuList() {
     let { node } = this.props;
     let menuList = [];
@@ -93,8 +101,6 @@ class TreeNodeMenu extends React.Component {
   }
 
   render() {
-    this.state.isItemMenuShow ? this.props.unregisterHandlers() : this.props.registerHandlers()
-
     return (
       <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
         <DropdownToggle 

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

@@ -21,6 +21,7 @@ const propTypes = {
   unregisterHandlers: PropTypes.func,
   onNodeDragMove: PropTypes.func,
   onNodeDrop: PropTypes.func,
+  appMenuType: PropTypes.oneOf(['list_view_contextmenu', 'item_contextmenu', 'tree_contextmenu', 'item_op_menu']),
 };
 
 class TreeNodeView extends React.Component {
@@ -34,6 +35,15 @@ class TreeNodeView extends React.Component {
     };
   }
 
+  componentWillReceiveProps(nextProp) {
+    if (nextProp.appMenuType === 'list_view_contextmenu' && nextProp.appMenuType === 'item_contextmenu') {
+      this.setState({
+        isShowOperationMenu: false,
+        isHighlight: false,
+      })
+    }
+  }
+  
   onMouseEnter = () => {
     if (!this.props.isItemFreezed) {
       this.setState({
@@ -163,6 +173,7 @@ class TreeNodeView extends React.Component {
               onNodeDrop={this.props.onNodeDrop}
               onNodeDragEnter={this.props.onNodeDragEnter}
               onNodeDragLeave={this.props.onNodeDragLeave}
+              appMenuType={this.props.appMenuType}
             />
           );
         })}
@@ -203,6 +214,7 @@ class TreeNodeView extends React.Component {
                   onFreezedItem={this.props.onFreezedItem}
                   registerHandlers={this.props.registerHandlers}
                   unregisterHandlers={this.props.unregisterHandlers}
+                  appMenuType={this.props.appMenuType}
                 />
               )}
             </div>

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

@@ -15,6 +15,8 @@ const propTypes = {
   onNodeCollapse: PropTypes.func.isRequired,
   onItemMove: PropTypes.func,
   currentRepoInfo: PropTypes.object,
+  switchAnotherMenuToShow: PropTypes.func,
+  appMenuType: PropTypes.oneOf(['list_view_contextmenu', 'item_contextmenu', 'tree_contextmenu', 'item_op_menu']),
 };
 
 const PADDING_LEFT = 20;
@@ -36,6 +38,10 @@ class TreeView extends React.Component {
     this.registerHandlers();
   }
 
+  componentDidUpdate() {
+    this.registerHandlers();
+  }
+
   componentWillUnmount() {
     this.unregisterHandlers();
   }
@@ -100,6 +106,7 @@ class TreeView extends React.Component {
 
   onFreezedItem = () => {
     this.setState({isItemFreezed: true});
+    this.props.switchAnotherMenuToShow('item_op_menu');
   }
 
   onUnFreezedItem = () => {
@@ -108,16 +115,18 @@ class TreeView extends React.Component {
 
   contextMenu = (e) => {
     e.preventDefault();
+    
+    this.props.switchAnotherMenuToShow('tree_contextmenu');
+
     this.setState({
       isRightMenuShow:false,
-    });
-    setTimeout(() => { 
+    }, () => {
       this.setState({
-        isRightMenuShow:true,
-        fileData:this.state.nodeData,
+        isRightMenuShow: true,
+        fileData: this.state.nodeData,
         mousePosition: {clientX: e.clientX, clientY: e.clientY}
       })
-    },40)
+    }) 
   }  
 
   unregisterHandlers = () => {
@@ -140,6 +149,7 @@ class TreeView extends React.Component {
     this.setState({
       isRightMenuShow:false,
     })
+    this.onUnFreezedItem();
   }
 
   onMenuItemClick = (operation, node) => {
@@ -170,8 +180,9 @@ class TreeView extends React.Component {
           onNodeDrop={this.onNodeDrop}
           onNodeDragEnter={this.onNodeDragEnter}
           onNodeDragLeave={this.onNodeDragLeave}
+          appMenuType={this.props.appMenuType}
         />
-       {this.state.isRightMenuShow && (
+       {this.state.isRightMenuShow && this.props.appMenuType === 'tree_contextmenu' && (
           <TreeViewContextMenu 
             node={this.state.fileData}
             onMenuItemClick={this.onMenuItemClick}