change menu implatement method

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

@@ -1,12 +1,11 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { gettext, siteRoot } from '../../utils/constants';
+import Toast from '../toast';
 import ModalPortal from '../modal-portal';
 import WikiDeleteDialog from '../dialog/wiki-delete-dialog';
-import MenuControl from '../menu-control';
-import Toast from '../toast';
-import WikiMenu from './wiki-menu';
 import WikiRename from './wiki-rename';
 
 const propTypes = {
@@ -23,58 +22,42 @@ class WikiListItem extends Component {
     super(props);
     this.state = {
       isShowWikiMenu: false,
-      position: {top:'', left: ''},
       isShowDeleteDialog: false,
       isShowMenuControl: false,
       isRenameing: false,
-      highlight: '',
+      highlight: false,
     };
   }
 
-  componentDidMount() {
-    document.addEventListener('click', this.onHideWikiMenu);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.onHideWikiMenu);
+  clickMenuToggle = (e) => {
+    e.preventDefault();
+    this.onMenuToggle(e);
   }
 
   onMenuToggle = (e) => {
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-
-    if (this.state.isShowWikiMenu) {
-      this.onHideWikiMenu();
-    } else {
-      this.onShowWikiMenu(e);
+    let targetType = e.target.dataset.toggle;
+    if (targetType === 'dropdown') {
+      if (this.props.isItemFreezed) {
+        this.setState({
+          highlight: false,
+          isShowMenuControl: false,
+          isShowWikiMenu: !this.state.isShowWikiMenu
+        });
+        this.props.onUnfreezedItem();
+      } else {
+        this.setState({
+          isShowWikiMenu: !this.state.isShowWikiMenu
+        });
+        this.props.onFreezedItem();
+      }
     }
   }
 
-  onShowWikiMenu = (e) => {
-    let left = e.clientX - 8*16;
-    let top  = e.clientY + 12;
-    let position = {top: top, left: left};
-    this.setState({
-      isShowWikiMenu: true,
-      position: position,
-    });
-    this.props.onFreezedItem();
-  }
-
-  onHideWikiMenu = () => {
-    this.setState({
-      isShowWikiMenu: false,
-      isShowMenuControl: false,
-      highlight: '',
-    });
-    this.props.onUnfreezedItem();
-  }
-
   onMouseEnter = () => {
     if (!this.props.isItemFreezed) {
       this.setState({
         isShowMenuControl: true,
-        highlight: 'tr-highlight',
+        highlight: true,
       });
     }
   }
@@ -83,13 +66,12 @@ class WikiListItem extends Component {
     if (!this.props.isItemFreezed) {
       this.setState({
         isShowMenuControl: false,
-        highlight: '',
+        highlight: false,
       });
     }
   }
 
   onRenameToggle = (e) => {
-    e.nativeEvent.stopImmediatePropagation();
     this.props.onFreezedItem();
     this.setState({
       isShowWikiMenu: false,
@@ -123,12 +105,21 @@ class WikiListItem extends Component {
     this.setState({isRenameing: false});
     this.props.onUnfreezedItem();
   }
-
+  
   onDeleteToggle = () => {
     this.setState({
       isShowDeleteDialog: !this.state.isShowDeleteDialog,
+      isShowWikiMenu: false,
+      isShowMenuControl: false,
     });
   }
+  
+  onDeleteCancel = () => {
+    this.setState({
+      isShowDeleteDialog: !this.state.isShowDeleteDialog,
+    });
+    this.props.onUnfreezedItem();
+  }
 
   renameWiki = (newName) => {
     let wiki = this.props.wiki;
@@ -149,7 +140,7 @@ class WikiListItem extends Component {
 
     return (
       <Fragment>
-        <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
           <td className="name">
             {this.state.isRenameing ?
               <WikiRename wiki={wiki} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
@@ -159,23 +150,28 @@ class WikiListItem extends Component {
           <td><a href={userProfileURL} target='_blank'>{gettext(wiki.owner_nickname)}</a></td>
           <td>{moment(wiki.updated_at).fromNow()}</td>
           <td className="menu-toggle">
-            <MenuControl
-              isShow={this.state.isShowMenuControl}
-              onClick={this.onMenuToggle}
-            />
-            {this.state.isShowWikiMenu &&
-              <WikiMenu
-                position={this.state.position}
-                onRenameToggle={this.onRenameToggle}
-                onDeleteToggle={this.onDeleteToggle}
-              />
-            }
+            {this.state.isShowMenuControl && (
+              <Dropdown isOpen={this.state.isShowWikiMenu} toggle={this.onMenuToggle}>
+                <DropdownToggle 
+                  tag="a" 
+                  className="fas fa-ellipsis-v" 
+                  title={gettext('More Operations')}
+                  data-toggle="dropdown" 
+                  aria-expanded={this.state.isShowWikiMenu}
+                  onClick={this.clickMenuToggle}
+                />
+                <DropdownMenu>
+                  <DropdownItem onClick={this.onRenameToggle}>{gettext('Rename')}</DropdownItem>
+                  <DropdownItem onClick={this.onDeleteToggle}>{gettext('Delete')}</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+            )}
           </td>
         </tr>
         {this.state.isShowDeleteDialog &&
           <ModalPortal>
             <WikiDeleteDialog
-              toggleCancel={this.onDeleteToggle}
+              toggleCancel={this.onDeleteCancel}
               handleSubmit={this.deleteWiki}
             />
           </ModalPortal>

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

@@ -46,7 +46,7 @@ class WikiListView extends Component {
           </thead>
           <tbody>
             {wikis.map((wiki, index) => {
-              return(
+              return (
                 <WikiListItem 
                   key={index} 
                   wiki={wiki}
@@ -55,7 +55,8 @@ class WikiListView extends Component {
                   isItemFreezed={this.state.isItemFreezed}
                   onFreezedItem={this.onFreezedItem}
                   onUnfreezedItem={this.onUnfreezedItem}
-                />);
+                />
+              );
             })}
           </tbody>
         </table>

frontend/src/components/wiki-list-view/wiki-menu.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-
-const propTypes = {
-  position: PropTypes.object.isRequired,
-  onRenameToggle: PropTypes.func.isRequired,
-  onDeleteToggle: PropTypes.func.isRequired,
-};
-
-class WikiMenu extends React.Component {
-
-  render() {
-    let position = this.props.position;
-    let style = {position: 'fixed', top: position.top, left: position.left, display: 'block'};
-
-    return (
-      <ul className="dropdown-menu" style={style}>
-        <li className="dropdown-item" onClick={this.props.onRenameToggle}>{gettext('Rename')}</li>
-        <li className="dropdown-item" onClick={this.props.onDeleteToggle}>{gettext('Delete')}</li>
-      </ul>
-    );
-  }
-}
-
-WikiMenu.propTypes = propTypes;
-
-export default WikiMenu;

frontend/src/pages/wikis/wiki-add.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
-
-const propTypes = {
-  isShowWikiAdd: PropTypes.bool.isRequired,
-  position: PropTypes.object.isRequired,
-  onSelectToggle: PropTypes.func.isRequired,
-  onCreateToggle: PropTypes.func.isRequired,
-};
-
-class WikiAdd extends React.Component {
-
-  render() {
-    let style = {};
-    let {isShowWikiAdd, position} = this.props;
-    if (isShowWikiAdd) {
-      style = {position: 'fixed', top: position.top, left: position.left, display: 'block'};
-    }
-    return (
-      <ul className="dropdown-menu" style={style}>
-        <li className="dropdown-item" onClick={this.props.onCreateToggle}>{gettext('New Wiki')}</li>
-        <li className="dropdown-item" onClick={this.props.onSelectToggle}>{gettext('Choose a library as Wiki')}</li>
-      </ul>
-    );
-  }
-}
-
-WikiAdd.propTypes = propTypes;
-
-export default WikiAdd;

frontend/src/pages/wikis/wikis.js

@@ -1,8 +1,8 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, loginUrl } from '../../utils/constants';
-import WikiAdd from './wiki-add';
 import toaster from '../../components/toast';
 import ModalPortal from '../../components/modal-portal';
 import NewWikiDialog from '../../components/dialog/new-wiki-dialog';
@@ -25,14 +25,9 @@ class Wikis extends Component {
   }
 
   componentDidMount() {
-    document.addEventListener('click', this.onHideWikiAdd);
     this.getWikis();
   }
 
-  componentWillUnmount() {
-    document.removeEventListener('click', this.onHideWikiAdd);
-  }
-
   getWikis = () => {
     seafileAPI.listWikis().then(res => {
       this.setState({
@@ -62,31 +57,13 @@ class Wikis extends Component {
     });
   }
 
-  onAddMenuToggle = (e) => {
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-
-    if (this.state.isShowWikiAdd) {
-      this.onHideWikiAdd();
-    } else {
-      this.onShowWikiAdd(e);
-    }
+  clickMenuToggle = (e) => {
+    e.preventDefault();
+    this.onMenuToggle();
   }
 
-  onShowWikiAdd = (e) => {
-    let left = e.clientX - 10*20;
-    let top  = e.clientY + 12;
-    let position = {top: top, left: left};
-    this.setState({
-      isShowWikiAdd: true,
-      position: position,
-    });
-  }
-
-  onHideWikiAdd = () => {
-    this.setState({
-      isShowWikiAdd: false,
-    });
+  onMenuToggle = () => {
+    this.setState({isShowWikiAdd: !this.state.isShowWikiAdd})
   }
 
   onSelectToggle = () => {
@@ -156,19 +133,23 @@ class Wikis extends Component {
                 <h3 className="sf-heading">{gettext('Wikis')}</h3>
               </div>
               <div className="path-toolbar">
-                <button className="btn btn-secondary operation-item" style={{marginTop: '-0.25rem'}} onClick={this.onAddMenuToggle}>
-                  <i className="fa fa-plus-square op-icon"></i>
-                  {gettext('Add Wiki')}
-                </button>
+                <Dropdown tag="div" className="btn btn-secondary operation-item" style={{marginTop: '-0.25rem'}} isOpen={this.state.isShowWikiAdd} toggle={this.onMenuToggle}>
+                  <DropdownToggle 
+                    tag="i" 
+                    className="fa fa-plus-square op-icon" 
+                    title={gettext('More Operations')}
+                    data-toggle="dropdown" 
+                    aria-expanded={this.state.isShowWikiAdd}
+                    onClick={this.clickMenuToggle}
+                  >
+                    {gettext(' Add Wiki')}
+                  </DropdownToggle>
+                  <DropdownMenu>
+                    <DropdownItem onClick={this.onCreateToggle}>{gettext('New Wiki')}</DropdownItem>
+                    <DropdownItem onClick={this.onSelectToggle}>{gettext('Choose a library as Wiki')}</DropdownItem>
+                  </DropdownMenu>
+                </Dropdown>
               </div>
-              {this.state.isShowWikiAdd &&
-                <WikiAdd 
-                  isShowWikiAdd={this.state.isShowWikiAdd}
-                  position={this.state.position}
-                  onSelectToggle={this.onSelectToggle}
-                  onCreateToggle={this.onCreateToggle}
-                />
-              }
             </div>
             <div className="cur-view-content">
               {(this.state.loading || this.state.wikis.length !== 0) &&