improve tree-node-menu code

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

@@ -1,137 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import listener from '../context-menu/globalEventListener';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext } from '../../utils/constants';
-
-const propTypes = {
-  node: PropTypes.object.isRequired,
-  onMenuItemClick: PropTypes.func.isRequired,
-  onFreezedItem: PropTypes.func.isRequired,
-  onUnFreezedItem: PropTypes.func.isRequired,
-};
-
-class TreeNodeMenu extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isItemMenuShow: false,
-      menuList: []
-    };
-  }
-
-  componentDidMount() {
-    let menuList = this.caculateMenuList();
-    this.setState({menuList: menuList});
-    this.listenerId = listener.register(this.onShowMenu, this.onHideMenu);
-  }
-
-  componentWillUnmount () {
-    if (this.listenerId) {
-      listener.unregister(this.listenerId);
-    }
-  }
-
-  onShowMenu = () => {
-    // nothing todo
-  }
-
-  onHideMenu = () => {
-    if (this.state.isItemMenuShow) {
-      this.setState({isItemMenuShow: false});
-      this.props.onUnFreezedItem();
-    }
-  }
-
-  caculateMenuList() {
-    let { node } = this.props;
-    let menuList = [];
-    if (node.object.type === 'dir') {
-      menuList = ['New Folder', 'New File', 'Copy', 'Move', 'Rename', 'Delete'];
-    } else {
-      menuList = ['Rename', 'Delete', 'Copy', 'Move', 'Open in New Tab'];
-    }
-    return menuList;
-  }
-
-  translateMenuItem = (menuItem) => {
-    let translateResult = '';
-    switch(menuItem) {
-      case 'New Folder':
-        translateResult = gettext('New Folder');
-        break;
-      case 'New File':
-        translateResult = gettext('New File');
-        break;
-      case 'Rename':
-        translateResult = gettext('Rename');
-        break;
-      case 'Copy':
-        translateResult = gettext('Copy');
-        break;
-      case 'Move':
-        translateResult = gettext('Move');
-        break;
-      case 'Delete':
-        translateResult = gettext('Delete');
-        break;
-      case 'Open in New Tab':
-        translateResult = gettext('Open in New Tab');
-        break;
-      default:
-        break;
-    }
-    return translateResult;
-  }
-
-  onDropdownToggleClick = (e) => {
-    e.preventDefault();
-    this.toggleOperationMenu(e);
-  }
-
-  toggleOperationMenu = (e) => {
-    e.stopPropagation();
-    this.setState(
-      {isItemMenuShow: !this.state.isItemMenuShow }, () => {
-        if (this.state.isItemMenuShow) {
-          this.props.onFreezedItem();
-        } else {
-          this.props.onUnFreezedItem();
-        }
-      }
-    );
-  }
-
-  onMenuItemClick = (event) => {
-    let operation = event.target.dataset.toggle;
-    let node = this.props.node;
-    this.props.onMenuItemClick(operation, node);
-  }
-
-  render() {
-    return (
-      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
-        <DropdownToggle 
-          tag="i" 
-          className="fas fa-ellipsis-v" 
-          title={gettext('More Operations')}
-          data-toggle="dropdown" 
-          aria-expanded={this.state.isItemMenuShow}
-          onClick={this.onDropdownToggleClick}
-        />
-        <DropdownMenu>
-          {this.state.menuList.map((menuItem, index) => {
-            return (
-              <DropdownItem key={index} data-toggle={menuItem} onClick={this.onMenuItemClick}>{this.translateMenuItem(menuItem)}</DropdownItem>
-            );
-          })}
-        </DropdownMenu>
-      </Dropdown>
-    );
-  }
-}
-
-TreeNodeMenu.propTypes = propTypes;
-
-export default TreeNodeMenu;

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import TreeNodeMenu from './tree-node-menu';
 import { permission } from '../../utils/constants';
+import TextTranslation from '../../utils/text-translation';
+import ItemDropDownMenu from '../dropdown-menu/item-dropdown-menu';
 
 const propTypes = {
   repoPermission: PropTypes.bool,
@@ -168,6 +169,16 @@ class TreeNodeView extends React.Component {
     return {icon, type};
   }
 
+  caculateMenuList(node) {
+    let { NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE, OPEN_VIA_CLIENT} =  TextTranslation;
+
+    if (node.object.type === 'dir') {
+      return [NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE];
+    }
+    
+    return [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT];
+  }
+
   renderChildren = () => {
     let { node, paddingLeft } = this.props;
     if (!node.hasChildren()) {
@@ -242,14 +253,14 @@ class TreeNodeView extends React.Component {
           {isNodeMenuShow && (
             <div className="right-icon">
               {((this.props.repoPermission || permission) && this.state.isShowOperationMenu) && (
-                <TreeNodeMenu 
-                  node={this.props.node}
+                <ItemDropDownMenu 
+                  opItem={this.props.node}
+                  menuClass={'fas fa-ellipsis-v'}
+                  menuType={'pc'}
+                  getOpItemMenuList={this.caculateMenuList}
                   onMenuItemClick={this.onMenuItemClick}
+                  onFreezedItem={this.onFreezedItem}
                   onUnFreezedItem={this.onUnFreezedItem}
-                  onFreezedItem={this.props.onFreezedItem}
-                  registerHandlers={this.props.registerHandlers}
-                  unregisterHandlers={this.props.unregisterHandlers}
-                  appMenuType={this.props.appMenuType}
                 />
               )}
             </div>