optimize menu show&hide (#5481)

frontend/src/components/context-menu/context-menu.js

@@ -81,7 +81,7 @@ class ContextMenu extends React.Component {
   }
 
   handleShow = (e) => {
-    if (e.detail.id !== this.props.id || this.state.isVisible) return;
+    if (e.detail.id !== this.props.id) return;
 
     const { x, y } = e.detail.position;
     const { currentObject, menuList} = e.detail;

frontend/src/components/dir-view-mode/dir-list-view.js

@@ -39,7 +39,7 @@ const propTypes = {
   onItemsDelete: PropTypes.func.isRequired,
   onFileTagChanged: PropTypes.func,
   showDirentDetail: PropTypes.func.isRequired,
-  loadDirentList: PropTypes.func.isRequired,
+  loadDirentList: PropTypes.func,
 };
 
 class DirListView extends React.Component {

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -80,6 +80,7 @@ class DirentGridView extends React.Component{
   }
 
   onGridItemClick = (dirent) => {
+    hideMenu();
     this.setState({activeDirent: dirent});
     this.props.onGridItemClick(dirent);
   }
@@ -367,6 +368,7 @@ class DirentGridView extends React.Component{
   }
 
   gridContainerClick = () => {
+    hideMenu();
     if (!this.props.isDirentDetailShow) {
       this.onGridItemClick(null);
     }

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -49,7 +49,7 @@ const propTypes = {
   isGroupOwnedRepo: PropTypes.bool.isRequired,
   userPerm: PropTypes.string,
   showDirentDetail: PropTypes.func.isRequired,
-  loadDirentList: PropTypes.func.isRequired,
+  loadDirentList: PropTypes.func,
 };
 
 class DirentListView extends React.Component {
@@ -125,6 +125,7 @@ class DirentListView extends React.Component {
   }
 
   onDirentClick = (dirent) => {
+    hideMenu();
     if (this.props.selectedDirentList.length > 0 && !this.state.activeDirent ) {
       return;
     }
@@ -311,6 +312,7 @@ class DirentListView extends React.Component {
 
   // table-container contextmenu handle
   onContainerClick = () => {
+    hideMenu();
     if (this.state.activeDirent) {
       this.onDirentClick(null);
     }

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

@@ -86,6 +86,15 @@ class TreeView extends React.Component {
     }
   }
 
+  onContainerClick = (event) => {
+    hideMenu();
+  }
+
+  onNodeClick = (node) => {
+    hideMenu();
+    this.props.onNodeClick(node);
+  }
+
   onNodeDrop = (e, node) => {
     if (Utils.isIEBrower() || !this.canDrop) {
       return false;
@@ -308,6 +317,7 @@ class TreeView extends React.Component {
         onDragLeave={this.onNodeDragLeave}
         onMouseDown={this.onMouseDown}
         onContextMenu={this.onContextMenu}
+        onClick={this.onContainerClick}
       >
         <TreeNodeView
           userPerm={this.props.userPerm}
@@ -316,7 +326,7 @@ class TreeView extends React.Component {
           paddingLeft={PADDING_LEFT}
           isNodeMenuShow={this.props.isNodeMenuShow}
           isItemFreezed={this.state.isItemFreezed}
-          onNodeClick={this.props.onNodeClick}
+          onNodeClick={this.onNodeClick}
           onMenuItemClick={this.props.onMenuItemClick}
           onNodeExpanded={this.props.onNodeExpanded}
           onNodeCollapse={this.props.onNodeCollapse}