From 9ff108f56b3ca9fe0738b4f0fc584908456f3d03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E9=A1=BA=E5=BC=BA?= <ysq9207@126.com>
Date: Fri, 25 Jan 2019 11:21:55 +0800
Subject: [PATCH] Wiki module optimized (#2884)

* optimized wiki code

* optimized wiki code
---
 frontend/src/pages/wiki/side-panel.js | 293 +++++++++++++-------------
 1 file changed, 147 insertions(+), 146 deletions(-)

diff --git a/frontend/src/pages/wiki/side-panel.js b/frontend/src/pages/wiki/side-panel.js
index 256281f880..5e80fa3061 100644
--- a/frontend/src/pages/wiki/side-panel.js
+++ b/frontend/src/pages/wiki/side-panel.js
@@ -1,9 +1,10 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { gettext, siteRoot, logoPath, mediaUrl, siteTitle, logoWidth, logoHeight, repoID } from '../../utils/constants';
+import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import { gettext, siteRoot, repoID } from '../../utils/constants';
+import Logo from '../../components/logo';
 import TreeView from '../../components/tree-view/tree-view';
 import NodeMenu from '../../components/tree-view/node-menu';
-import MenuControl from '../../components/menu-control';
 import Delete from '../../components/dialog/delete-dialog';
 import Rename from '../../components/dialog/rename-dialog';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
@@ -43,28 +44,41 @@ class SidePanel extends Component {
       },
       isLoadFailed: false,
       isMenuIconShow: false,
-      showDelete: false,
-      showFile: false,
-      showFolder: false,
-      showRename: false,
+      isHeaderMenuShow: false,
+      isDeleteDialogShow: false,
+      isAddFileDialogShow: false,
+      isAddFolderDialogShow: false,
+      isRenameDialogShow: false,
     };
-    this.searchedPath = null;
   }
 
-  closeSide = () => {
-    this.props.onCloseSide();
+  componentDidMount() {
+    document.addEventListener('click', this.onHideContextMenu);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({currentNode: nextProps.changedNode});
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onHideContextMenu);
   }
 
   onMouseEnter = () => {
-    this.setState({
-      isMenuIconShow: true
-    });
+    this.setState({isMenuIconShow: true});
   }
 
   onMouseLeave = () => {
-    this.setState({
-      isMenuIconShow: false
-    });
+    this.setState({isMenuIconShow: false});
+  }
+
+  onDropdownToggleClick = (e) => {
+    e.preventDefault();
+    this.toggleOperationMenu();
+  }
+
+  toggleOperationMenu = () => {
+    this.setState({isHeaderMenuShow: !this.state.isHeaderMenuShow});
   }
 
   onNodeClick = (e, node) => {
@@ -84,19 +98,6 @@ class SidePanel extends Component {
     });
   }
 
-  onHeadingMenuClick = (e) => {
-    e.nativeEvent.stopImmediatePropagation();
-    let node = this.props.treeData.root;
-    let left = e.clientX - 8*16;
-    let top  = e.clientY + 10;
-    let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
-    this.setState({
-      isShowMenu: !this.state.isShowMenu,
-      currentNode: node,
-      menuPosition: position
-    });
-  }
-
   onHideContextMenu = () => {
     if (!this.state.isShowMenu) {
       return;
@@ -107,76 +108,62 @@ class SidePanel extends Component {
     });
   }
 
-  toggleAddFile = () => {
-    this.setState({showFile: !this.state.showFile});
+  onAddFolderToggle = () => {
+    this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
     this.onHideContextMenu();
   }
 
-  toggleAddFolder = () => {
-    this.setState({showFolder: !this.state.showFolder});
+  onAddFileToggle = () => {
+    this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
     this.onHideContextMenu();
   }
   
-  toggleRename = () => {
-    this.setState({showRename: !this.state.showRename});
+  onRenameToggle = () => {
+    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
     this.onHideContextMenu();
   }
   
-  toggleDelete = () => {
-    this.setState({showDelete: !this.state.showDelete});
+  onDeleteToggle = () => {
+    this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
     this.onHideContextMenu();
   }
 
   onAddFolderNode = (dirPath) => {
-    this.setState({showFolder: !this.state.showFolder});
+    this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
     this.props.onAddFolderNode(dirPath);
   }
   
   onAddFileNode = (filePath) => {
-    this.setState({showFile: !this.state.showFile});
+    this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
     this.props.onAddFileNode(filePath);
   }
   
   onRenameNode = (newName) => {
-    this.setState({showRename: !this.state.showRename});
+    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
     let node = this.state.currentNode;
     this.props.onRenameNode(node, newName);
   }
   
   onDeleteNode = () => {
-    this.setState({showDelete: !this.state.showDelete});
+    this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
     let node = this.state.currentNode;
     this.props.onDeleteNode(node);
   }
 
-  componentDidMount() {
-    document.addEventListener('click', this.onHideContextMenu);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      currentNode: nextProps.changedNode
-    });
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.onHideContextMenu);
-  }
-
   addFolderCancel = () => {
-    this.setState({showFolder: !this.state.showFolder});
+    this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
   }
 
   addFileCancel = () => {
-    this.setState({showFile: !this.state.showFile});
+    this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
   }
 
   deleteCancel = () => {
-    this.setState({showDelete: !this.state.showDelete});
+    this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
   }
 
   renameCancel = () => {
-    this.setState({showRename: !this.state.showRename});
+    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
   }
 
   onEditClick = (e) => {
@@ -188,100 +175,114 @@ class SidePanel extends Component {
     // todo
   }
 
+  renderIndexView = () => {
+    return (
+      <Fragment>
+        <h3 className="wiki-pages-heading">
+          {gettext('Contents')}
+          {this.props.indexPermission === 'rw' && 
+            <button className="btn btn-secondary operation-item index-edit" title="Edit Index" onClick={this.onEditClick}>{gettext('Edit')}</button>
+          }
+        </h3>
+        <div className="wiki-pages-container">
+          <IndexContentViewer
+            onLinkClick={this.props.onLinkClick}
+            onContentRendered={this.onContentRendered}
+            indexContent={this.props.indexContent}
+          />
+        </div>
+      </Fragment>
+    );
+  }
+
+  renderTreeView = () => {
+    return (
+      <Fragment>
+        <h3 className="wiki-pages-heading" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+          {gettext('Pages')}
+          <div className="heading-icon">
+            {this.state.isMenuIconShow && (
+              <Dropdown isOpen={this.state.isHeaderMenuShow} toggle={this.toggleOperationMenu}>
+                <DropdownToggle 
+                  tag="i" 
+                  className="fas fa-ellipsis-v" 
+                  title={gettext('More Operations')}
+                  data-toggle="dropdown" 
+                  aria-expanded={this.state.isHeaderMenuShow}
+                  onClick={this.onDropdownToggleClick}
+                />
+                <DropdownMenu right>
+                  <DropdownItem onClick={this.onAddFolderToggle}>{gettext('New Folder')}</DropdownItem>
+                  <DropdownItem onClick={this.onAddFileToggle}>{gettext('New File')}</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+            )}
+          </div>
+        </h3>
+        <div className="wiki-pages-container">
+          {this.props.treeData && (
+            <TreeView
+              currentPath={this.props.currentPath}
+              treeData={this.props.treeData}
+              currentNode={this.state.currentNode}
+              isNodeItemFrezee={this.state.isNodeItemFrezee}
+              onNodeClick={this.onNodeClick}
+              onShowContextMenu={this.onShowContextMenu}
+              onDirCollapse={this.props.onDirCollapse}
+            />
+          )}
+          {this.state.isShowMenu && (
+            <NodeMenu 
+              menuPosition={this.state.menuPosition}
+              currentNode={this.state.currentNode}
+              toggleAddFile={this.onAddFileToggle}
+              toggleAddFolder={this.onAddFolderToggle}
+              toggleRename={this.onRenameToggle}
+              toggleDelete={this.onDeleteToggle}
+            />
+          )}
+          {this.state.isDeleteDialogShow && (
+            <Delete 
+              currentNode={this.state.currentNode}
+              handleSubmit={this.onDeleteNode}
+              toggleCancel={this.deleteCancel}
+            />
+          )}
+          {this.state.isAddFileDialogShow && (
+            <CreateFile
+              fileType={'.md'}
+              parentPath={this.state.currentNode.path}
+              onAddFile={this.onAddFileNode}
+              addFileCancel={this.addFileCancel}
+            />
+          )}
+          {this.state.isAddFolderDialogShow && (
+            <CreateFolder 
+              parentPath={this.state.currentNode.path}
+              onAddFolder={this.onAddFolderNode}
+              addFolderCancel={this.addFolderCancel}
+            />
+          )}
+          {this.state.isRenameDialogShow && (
+            <Rename 
+              currentNode={this.state.currentNode}
+              onRename={this.onRenameNode} 
+              toggleCancel={this.renameCancel} 
+            />
+          )}
+        </div>
+      </Fragment>
+    )
+  }
+
   render() {
     return (
       <div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '': 'left-zero'}`}>
         <div className="side-panel-top panel-top">
-          <a href={siteRoot} id="logo">
-            <img src={mediaUrl + logoPath} title={siteTitle} alt="logo" width={logoWidth} height={logoHeight} />
-          </a>
-          <a title="Close" aria-label="Close" onClick={this.closeSide} className="sf2-icon-x1 sf-popover-close side-panel-close action-icon d-md-none "></a>
+          <Logo onCloseSidePanel={this.props.onCloseSide} />
         </div>
         <div id="side-nav" className="wiki-side-nav" role="navigation">
-          {this.props.hasIndex ?
-            <Fragment>
-              <h3 className="wiki-pages-heading">
-                {gettext('Contents')}
-                {this.props.indexPermission === 'rw' && 
-                  <button className="btn btn-secondary operation-item index-edit" title="Edit Index" onClick={this.onEditClick}>{gettext('Edit')}</button>
-                }
-              </h3>
-              <div className="wiki-pages-container">
-                <IndexContentViewer
-                  onLinkClick={this.props.onLinkClick}
-                  onContentRendered={this.onContentRendered}
-                  indexContent={this.props.indexContent}
-                />
-              </div>
-            </Fragment> :
-            <Fragment>
-              <h3 
-                className="wiki-pages-heading" 
-                onMouseEnter={this.onMouseEnter} 
-                onMouseLeave={this.onMouseLeave}
-              >
-                {gettext('Pages')}
-                <div className="heading-icon">
-                  <MenuControl 
-                    isShow={this.state.isMenuIconShow}
-                    onClick={this.onHeadingMenuClick}
-                  />
-                </div>
-              </h3>
-              <div className="wiki-pages-container">
-                {this.props.treeData && 
-                <TreeView
-                  currentPath={this.props.currentPath}
-                  treeData={this.props.treeData}
-                  currentNode={this.state.currentNode}
-                  isNodeItemFrezee={this.state.isNodeItemFrezee}
-                  onNodeClick={this.onNodeClick}
-                  onShowContextMenu={this.onShowContextMenu}
-                  onDirCollapse={this.props.onDirCollapse}
-                />
-                }
-                {this.state.isShowMenu && 
-                <NodeMenu 
-                  menuPosition={this.state.menuPosition}
-                  currentNode={this.state.currentNode}
-                  toggleAddFile={this.toggleAddFile}
-                  toggleAddFolder={this.toggleAddFolder}
-                  toggleRename={this.toggleRename}
-                  toggleDelete={this.toggleDelete}
-                />
-                }
-                {this.state.showDelete &&
-                <Delete 
-                  currentNode={this.state.currentNode}
-                  handleSubmit={this.onDeleteNode}
-                  toggleCancel={this.deleteCancel}
-                />
-                }
-                {this.state.showFile && 
-                <CreateFile
-                  fileType={'.md'}
-                  parentPath={this.state.currentNode.path}
-                  onAddFile={this.onAddFileNode}
-                  addFileCancel={this.addFileCancel}
-                />
-                }
-                {this.state.showFolder &&
-                <CreateFolder 
-                  parentPath={this.state.currentNode.path}
-                  onAddFolder={this.onAddFolderNode}
-                  addFolderCancel={this.addFolderCancel}
-                />
-                }
-                {this.state.showRename &&
-                <Rename 
-                  currentNode={this.state.currentNode}
-                  onRename={this.onRenameNode} 
-                  toggleCancel={this.renameCancel} 
-                />
-                }
-              </div>
-            </Fragment>
-          }
+          {this.props.hasIndex ? this.renderIndexView() : this.renderTreeView()}}
         </div>
       </div>
     );