change menu implatement method

frontend/config/server.js

@@ -15,10 +15,10 @@ const devServerOptions = Object.assign({}, config.devServer, {
 console.log('Dev server options:', devServerOptions);
 
 const server = new WebpackDevServer(compiler, devServerOptions);
-server.listen(3001, '0.0.0.0', function (err, result) {
+server.listen(3000, '0.0.0.0', function (err, result) {
   if (err) {
     console.log(err)
   }
 
-  console.log('Listening at 0.0.0.0:3001')
+  console.log('Listening at 0.0.0.0:3000')
 })

frontend/config/webpack.config.dev.js

@@ -15,7 +15,7 @@ const BundleTracker = require('webpack-bundle-tracker');
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // In development, we always serve from the root. This makes config easier.
-const publicPath = 'http://127.0.0.1:3001/assets/bundles/';
+const publicPath = 'http://127.0.0.1:3000/assets/bundles/';
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.

frontend/package-lock.json

@@ -180,7 +180,7 @@
       "dependencies": {
         "reactstrap": {
           "version": "5.0.0",
-          "resolved": "http://registry.npmjs.org/reactstrap/-/reactstrap-5.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-5.0.0.tgz",
           "integrity": "sha512-y0eju/LAK7gbEaTFfq2iW92MF7/5Qh0tc1LgYr2mg92IX8NodGc03a+I+cp7bJ0VXHAiLy0bFL9UP89oSm4cBg==",
           "requires": {
             "classnames": "^2.2.3",
@@ -640,7 +640,7 @@
     },
     "axios": {
       "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
       "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
       "requires": {
         "follow-redirects": "^1.3.0",
@@ -10793,9 +10793,9 @@
       }
     },
     "seafile-js": {
-      "version": "0.2.42",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.42.tgz",
-      "integrity": "sha512-qbia7tcIRRtI16ks42ocJHd2i1z7QkfsvqGawATKtrnvij2kXNRnTnZqwbHpSjv1H1yctots+NN9F1JRziHDkQ==",
+      "version": "0.2.43",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.43.tgz",
+      "integrity": "sha512-9Y3pssifTbHMEbsa7aQEHMuiauOZzSj2/L1Z8IhMLBDtO58Zp5wgn4FmDCeNR1tRPGIsJbFYaMOMBjwYGy3p9w==",
       "requires": {
         "axios": "^0.18.0",
         "form-data": "^2.3.2",

frontend/package.json

@@ -29,7 +29,7 @@
     "react-moment": "^0.7.9",
     "react-select": "^2.1.1",
     "reactstrap": "^6.4.0",
-    "seafile-js": "^0.2.42",
+    "seafile-js": "^0.2.43",
     "seafile-ui": "^0.1.10",
     "sw-precache-webpack-plugin": "0.11.4",
     "unified": "^7.0.0",

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);
-    }
-  }
-
-  onShowWikiMenu = (e) => {
-    let left = e.clientX - 8*16;
-    let top  = e.clientY + 12;
-    let position = {top: top, left: left};
+    let targetType = e.target.dataset.toggle;
+    if (targetType === 'dropdown') {
+      if (this.props.isItemFreezed) {
         this.setState({
-      isShowWikiMenu: true,
-      position: position,
+          highlight: false,
+          isShowMenuControl: false,
+          isShowWikiMenu: !this.state.isShowWikiMenu
+        });
+        this.props.onUnfreezedItem();
+      } else {
+        this.setState({
+          isShowWikiMenu: !this.state.isShowWikiMenu
         });
         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,
@@ -127,9 +109,18 @@ class WikiListItem extends Component {
   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;
     this.props.renameWiki(wiki, newName);
@@ -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.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}
                 />
-            {this.state.isShowWikiMenu &&
-              <WikiMenu
-                position={this.state.position}
-                onRenameToggle={this.onRenameToggle}
-                onDeleteToggle={this.onDeleteToggle}
-              />
-            }
+                <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) &&