Contextmenu improve (#3238)

* add a commen contextmenu component

* optimized translate for menu

* repair contextmenu bug

* optimized share btn show code

* repair showShareBtn bug

* optimized contextmenu

* optimized contextmenu code

* complete dirent-item-menu logic

* optimized contextmenu code

* complete dirent-container-menu logic

* complete tree-node-contextmenu logic

* delete unnecessary code

* optimized contextmenu func

* repair bug

* optimized code style

* optimized code style

* add a dirent-none-view for dir-list-view mode

* optimized dirent-container-menu&dirent-item-menu

* add select-item contextmenu

* repair rebase bug

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import TextTranslation from '../../utils/text-translation';
 import TreeNodeView from './tree-node-view';
-
-import TreeViewContextMenu from './tree-view-contextmenu'
+import ContextMenu from '../context-menu/context-menu';
+import { hideMenu, showMenu } from '../context-menu/actions';
 
 const propTypes = {
   repoPermission: PropTypes.bool,
@@ -15,8 +16,7 @@ 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']),
+  selectedDirentList: PropTypes.array.isRequired,
 };
 
 const PADDING_LEFT = 20;
@@ -27,26 +27,10 @@ class TreeView extends React.Component {
     super(props);
     this.state = {
       isItemFreezed: false,
-      isRightMenuShow: false,
-      nodeData: null,
-      fileData: null,
-      mousePosition: {clientX: '', clientY: ''},
       isTreeViewDropTipShow: false,
     };
   }
 
-  componentDidMount() {
-    this.registerHandlers();
-  }
-
-  componentDidUpdate() {
-    this.registerHandlers();
-  }
-
-  componentWillUnmount() {
-    this.unregisterHandlers();
-  }
-
   onItemMove = (repo, dirent, selectedPath, currentPath) => {
     this.props.onItemMove(repo, dirent, selectedPath, currentPath);
   }
@@ -130,59 +114,96 @@ class TreeView extends React.Component {
 
   onFreezedItem = () => {
     this.setState({isItemFreezed: true});
-    this.props.switchAnotherMenuToShow('item_op_menu');
   }
 
   onUnFreezedItem = () => {
     this.setState({isItemFreezed: false});
   }
 
-  contextMenu = (e) => {
-    e.preventDefault();
-    
-    this.props.switchAnotherMenuToShow('tree_contextmenu');
-
-    this.setState({
-      isRightMenuShow:false,
-    }, () => {
-      this.setState({
-        isRightMenuShow: true,
-        fileData: this.state.nodeData,
-        mousePosition: {clientX: e.clientX, clientY: e.clientY}
-      })
-    }) 
-  }  
-
-  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,
-    })
-    this.onUnFreezedItem();
-  }
-
   onMenuItemClick = (operation, node) => {
-    this.props.onMenuItemClick(operation, node)
+    this.props.onMenuItemClick(operation, node);
+    hideMenu();
+  }
+
+  onMouseDown = (event) => {
+    event.stopPropagation();
+    if (event.button === 2) {
+      return;
+    }
+  }
+
+  onContextMenu = (event) => {
+    this.handleContextClick(event);
+  }
+  
+  handleContextClick = (event, node) => {
+    if (this.props.selectedDirentList.length) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+
+    let x = event.clientX || (event.touches && event.touches[0].pageX);
+    let y = event.clientY || (event.touches && event.touches[0].pageY);
+
+    if (this.props.posX) {
+        x -= this.props.posX;
+    }
+    if (this.props.posY) {
+        y -= this.props.posY;
+    }
+
+    hideMenu();
+
+    let menuList = this.getMenuList(node);
+    
+    let showMenuConfig = {
+      id: 'tree-node-contextmenu',
+      position: { x, y },
+      target: event.target,
+      currentObject: node,
+      menuList: menuList,
+    };
+    
+    showMenu(showMenuConfig);
+  }
+
+  getMenuList = (node) => {
+    let menuList = [];
+
+    let { NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE, OPEN_VIA_CLIENT} = TextTranslation;
+
+    if (!node) {
+      return [NEW_FOLDER, NEW_FILE];
+    }
+
+    if (node.object.type === 'dir') {
+      menuList = [NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE];
+    } else {
+      menuList = [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT];
+    } 
+
+    return menuList;
+  }
+
+  onShowMenu = () => {
+    this.onFreezedItem();
+  }
+
+  onHideMenu = () => {
+    this.onUnFreezedItem();
   }
 
   render() {
     return (
-      <div className={`tree-view tree ${this.state.isTreeViewDropTipShow ? 'tree-view-drop' : ''}`} onDrop={this.onNodeDrop} onDragEnter={this.onNodeDragEnter} onDragLeave={this.onNodeDragLeave}>
+      <div 
+        className={`tree-view tree ${this.state.isTreeViewDropTipShow ? 'tree-view-drop' : ''}`} 
+        onDrop={this.onNodeDrop} 
+        onDragEnter={this.onNodeDragEnter} 
+        onDragLeave={this.onNodeDragLeave}
+        onMouseDown={this.onMouseDown}
+        onContextMenu={this.onContextMenu}
+      >
         <TreeNodeView 
           repoPermission={this.props.repoPermission}
           node={this.props.treeData.root}
@@ -197,25 +218,18 @@ class TreeView extends React.Component {
           onNodeDragStart={this.onNodeDragStart}
           onFreezedItem={this.onFreezedItem}
           onUnFreezedItem={this.onUnFreezedItem}
-          onNodeChanged={this.onNodeChanged}
-          registerHandlers={this.registerHandlers}
-          unregisterHandlers={this.unregisterHandlers}
           onNodeDragMove={this.onNodeDragMove}
           onNodeDrop={this.onNodeDrop}
           onNodeDragEnter={this.onNodeDragEnter}
           onNodeDragLeave={this.onNodeDragLeave}
-          appMenuType={this.props.appMenuType}
+          handleContextClick={this.handleContextClick}
+        />
+        <ContextMenu 
+          id={'tree-node-contextmenu'}
+          onMenuItemClick={this.onMenuItemClick}
+          onHideMenu={this.onHideMenu}
+          onShowMenu={this.onShowMenu}
         />
-       {this.state.isRightMenuShow && this.props.appMenuType === 'tree_contextmenu' && (
-          <TreeViewContextMenu 
-            node={this.state.fileData}
-            onMenuItemClick={this.onMenuItemClick}
-            mousePosition={this.state.mousePosition}
-            closeRightMenu={this.closeRightMenu}
-            registerHandlers={this.registerHandlers}
-            unregisterHandlers={this.unregisterHandlers}
-          />
-        )}
       </div>
     );
   }