package text-dropdown-menu for text-button dropdown menu

frontend/src/components/dropdown-menu/item-dropdown-menu.js

@@ -30,7 +30,6 @@ class ItemDropDownMenu extends React.Component {
       menuList: [],
       isItemMenuShow: false,
     };
-
   }
 
   componentDidMount() {
@@ -96,7 +95,7 @@ class ItemDropDownMenu extends React.Component {
 
   onMenuItemClick = (event) => {
     let operation = event.target.dataset.toggle;
-    this.props.onMenuItemClick(operation);
+    this.props.onMenuItemClick(operation, event);
   }
 
   render() {

frontend/src/components/dropdown-menu/text-dropdown-menu.js

@@ -0,0 +1,105 @@
+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 = {
+  menuClass: PropTypes.string,
+  menuType: PropTypes.oneOf(['pc', 'mobile']),
+  menuChildren: PropTypes.string.isRequired,
+  menuList: PropTypes.array.isRequired,
+  isHandleContextMenuEvent: PropTypes.bool,
+  onMenuItemClick: PropTypes.func.isRequired,
+};
+
+class TextDropDownMenu extends React.Component {
+
+  static defaultProps = {
+    isHandleContextMenuEvent: true,
+    menuType: 'pc',
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemMenuShow: false,
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.isHandleContextMenuEvent) {
+      this.listenerId = listener.register(this.onShowMenu, this.onHideMenu);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.isHandleContextMenuEvent && this.listenerId) {
+      listener.unregister(this.listenerId);
+    }
+  }
+
+  onShowMenu = () => {
+    // nothing todo
+  }
+
+  onHideMenu = () => {
+    if (this.state.isItemMenuShow) {
+      this.setState({isItemMenuShow: false});
+    }
+  }
+
+  onDropdownToggleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.toggleOperationMenu();
+  }
+
+  toggleOperationMenu = () => {
+    this.setState({isItemMenuShow: !this.state.isItemMenuShow});
+  }
+
+  onMenuItemClick = (event) => {
+    let operation = event.target.dataset.toggle;
+    this.props.onMenuItemClick(operation, event);
+  }
+
+  render() {
+    let { menuClass, menuChildren, menuList } = this.props;
+    menuClass = 'btn btn-secondary operation-item ' + menuClass;
+
+    if (!menuList.length) {
+      return '';
+    }
+
+    return (
+      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
+        <DropdownToggle
+          className={menuClass}
+          title={gettext('More Operations')}
+          data-toggle="dropdown" 
+          aria-expanded={this.state.isItemMenuShow}
+          // onClick={this.onDropdownToggleClick}
+        >
+          {menuChildren}
+        </DropdownToggle>
+        <DropdownMenu>
+          {menuList.map((menuItem, index) => {
+            if (menuItem === 'Divider') {
+              return <DropdownItem key={index} divider />;
+            } else {
+              return (
+                <DropdownItem key={index} data-toggle={menuItem.key} onClick={this.onMenuItemClick}>{menuItem.value}</DropdownItem>
+              );
+            }
+          })}
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+}
+
+TextDropDownMenu.propTypes = propTypes;
+
+export default TextDropDownMenu;

frontend/src/components/toolbar/view-file-toolbar.js

@@ -4,10 +4,12 @@ import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem, Tooltip} from 're
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import TextTranslation from '../../utils/text-translation';
 import ModalPotal from '../modal-portal';
 import ShareDialog from '../dialog/share-dialog';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import RelatedFileDialogs from '../dialog/related-file-dialogs';
+import TextDropDownMenu from '../dropdown-menu/text-dropdown-menu';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -31,7 +33,6 @@ class ViewFileToolbar extends React.Component {
     super(props);
     this.state = {
       isDraftMessageShow: false,
-      isMoreMenuShow: false,
       isShareDialogShow: false,
       isEditTagDialogShow: false,
       isRelatedFileDialogShow: false,
@@ -58,8 +59,20 @@ class ViewFileToolbar extends React.Component {
     this.setState({isDraftMessageShow: !this.state.isDraftMessageShow});
   }
 
-  toggleMore = () => {
+  onMenuItemClick = (operation) => {
-    this.setState({isMoreMenuShow: !this.state.isMoreMenuShow});
+    switch (operation) {
+      case 'Share':
+        this.onShareToggle();
+        break;
+      case 'Tags':
+        this.onEditFileTagToggle();
+        break;
+      case 'Related Files':
+        this.onListRelatedFileToggle();
+        break;
+      default:
+        break;
+    }
   }
 
   onShareToggle = () => {
@@ -104,16 +117,13 @@ class ViewFileToolbar extends React.Component {
             </Fragment>
           )}
           {filePermission === 'rw' && (
-            <Dropdown isOpen={this.state.isMoreMenuShow} toggle={this.toggleMore}>
+            <TextDropDownMenu 
-              <DropdownToggle className='btn btn-secondary operation-item'>
+              menuClass={'btn btn-secondary operation-item'}
-                {gettext('More')}
+              menuType={'pc'}
-              </DropdownToggle>
+              menuChildren={gettext('More')}
-              <DropdownMenu>
+              menuList={[TextTranslation.SHARE, TextTranslation.TAGS, TextTranslation.RELATED_FILES]}
-                <DropdownItem onClick={this.onShareToggle}>{gettext('Share')}</DropdownItem>
+              onMenuItemClick={this.onMenuItemClick}
-                <DropdownItem onClick={this.onEditFileTagToggle}>{gettext('Tags')}</DropdownItem>
+            />
-                <DropdownItem onClick={this.onListRelatedFileToggle}>{gettext('Related Files')}</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
           )}
         </div>
         {this.state.isShareDialogShow && (