package drop-down menu component

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

@@ -6,7 +6,7 @@ import { gettext, siteRoot, mediaUrl } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
-import DirentMenu from './dirent-menu';
+import DropDownMenu from '../dropdown-menu/dropdown-menu';
 import Rename from '../rename';
 import ModalPortal from '../modal-portal';
 import MoveDirentDialog from '../dialog/move-dirent-dialog';
@@ -44,6 +44,7 @@ const propTypes = {
   onItemContextMenu: PropTypes.func.isRequired,
   selectedDirentList: PropTypes.array.isRequired,
   activeDirent: PropTypes.object,
+  getDirentItemMenuList: PropTypes.func.isRequired,
 };
 
 class DirentListItem extends React.Component {
@@ -428,13 +429,15 @@ class DirentListItem extends React.Component {
                     <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
                   </li>
                   <li className="operation-group-item">
-                    <DirentMenu
+                    <DropDownMenu
-                      dirent={this.props.dirent}
+                      opItem={this.props.dirent}
+                      menuType={'pc'}
+                      menuClass={'sf2-icon-caret-down'}
+                      isHandleContextMenuEvent={true}
+                      getOpItemMenuList={this.props.getDirentItemMenuList}
                       onMenuItemClick={this.onMenuItemClick}
-                      currentRepoInfo={this.props.currentRepoInfo}
-                      isRepoOwner={this.props.isRepoOwner}
-                      onFreezedItem={this.props.onFreezedItem}
                       onUnfreezedItem={this.onUnfreezedItem}
+                      onFreezedItem={this.props.onFreezedItem}
                     />
                   </li>
                 </ul>
@@ -457,13 +460,15 @@ class DirentListItem extends React.Component {
                     <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
                   </li>
                   <li className="operation-group-item">
-                    <DirentMenu
+                    <DropDownMenu
-                      dirent={this.props.dirent}
+                      opItem={this.props.dirent}
+                      menuType={'pc'}
+                      menuClass={'sf2-icon-caret-down'}
+                      isHandleContextMenuEvent={true}
+                      getOpItemMenuList={this.props.getDirentItemMenuList}
                       onMenuItemClick={this.onMenuItemClick}
-                      currentRepoInfo={this.props.currentRepoInfo}
-                      isRepoOwner={this.props.isRepoOwner}
-                      onFreezedItem={this.props.onFreezedItem}
                       onUnfreezedItem={this.onUnfreezedItem}
+                      onFreezedItem={this.props.onFreezedItem}
                     />
                   </li>
                 </ul>

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

@@ -584,6 +584,7 @@ class DirentListView extends React.Component {
                   selectedDirentList={this.props.selectedDirentList}
                   activeDirent={this.state.activeDirent}
                   onFileTagChanged={this.props.onFileTagChanged}
+                  getDirentItemMenuList={this.getDirentItemMenuList}
                 />
               );
             })}

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

@@ -0,0 +1,129 @@
+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 = {
+  tagName: PropTypes.string,
+  opItem: PropTypes.object.isRequired,
+  menuType: PropTypes.oneOf(['pc', 'mobile']).isRequired,
+  menuClass: PropTypes.string.isRequired,
+  isHandleContextMenuEvent: PropTypes.bool,
+  getOpItemMenuList: PropTypes.func.isRequired,
+  onMenuItemClick: PropTypes.func.isRequired,
+  onFrezeedItem: PropTypes.func,
+  onUnfrezeedItem: PropTypes.func,
+};
+
+class DropDownMenu extends React.Component {
+
+  static defaultProps = {
+    isHandleContextMenuEvent: false,
+    menuType: 'pc',
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      menuList: [],
+      isItemMenuShow: false,
+    };
+
+  }
+
+  componentDidMount() {
+    if (this.props.isHandleContextMenuEvent) {
+      this.listenerId = listener.register(this.onShowMenu, this.onHideMenu);
+    }
+    let { opItem, menuType } = this.props;
+
+    // scene 1: menuType === 'pc', Get some menu operations
+    // scene 2: menuType === 'mobile', Get all menu operations
+    let isAllOperations = menuType === 'pc' ? false : true;
+    let menuList = this.props.getOpItemMenuList(opItem, isAllOperations);
+    this.setState({menuList: menuList});
+  }
+
+  componentWillUnmount() {
+    if (this.props.isHandleContextMenuEvent && this.listenerId) {
+      listener.unregister(this.listenerId);
+    }
+  }
+
+  onShowMenu = () => {
+    // nothing todo
+  }
+
+  onHideMenu = () => {
+    if (this.state.isItemMenuShow) {
+      this.setState({isItemMenuShow: false});
+      if (typeof(this.props.onUnfreezedItem) === 'function') {
+        this.props.onUnfreezedItem();
+      }
+    }
+  }
+
+  onDropdownToggleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.toggleOperationMenu();
+  }
+
+  toggleOperationMenu = () => {
+    this.setState(
+      {isItemMenuShow: !this.state.isItemMenuShow},
+      () => {
+        if (this.state.isItemMenuShow && typeof(this.props.onFreezedItem) === 'function') {
+          this.props.onFreezedItem();
+        } else if (!this.state.isItemMenuShow && typeof(this.props.onUnfreezedItem) === 'function') {
+          this.props.onUnfreezedItem();
+        }
+      }
+    );
+  }
+
+  onMenuItemClick = (event) => {
+    let operation = event.target.dataset.toggle;
+    this.props.onMenuItemClick(operation);
+  }
+
+  render() {
+    let menuList = this.state.menuList;
+    let { menuClass, tagName } = this.props;
+    menuClass = 'sf-dropdown-toggle ' + menuClass;
+
+    if (!menuList.length) {
+      return '';
+    }
+
+    return (
+      <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
+        <DropdownToggle
+          tag={tagName || 'i'}
+          className={menuClass}
+          title={gettext('More Operations')}
+          data-toggle="dropdown" 
+          aria-expanded={this.state.isItemMenuShow}
+          // onClick={this.onDropdownToggleClick}
+        />
+        <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>
+    );
+  }
+}
+
+DropDownMenu.propTypes = propTypes;
+
+export default DropDownMenu;