Repo mode optimized (#2850)

* optimized repo-wiki-mode side-panel.js

* optimized main-panel code

* repair bug

frontend/src/pages/repo-wiki-mode/main-panel.js

@@ -214,83 +214,81 @@ class MainPanel extends Component {
               )}
             </div>
             <div className="cur-view-content">
-              {!this.props.pathExist ?
-                ErrMessage :
+              {!this.props.pathExist && ErrMessage }
+              {(this.props.pathExist && this.props.isViewFile) && (
+                <WikiMarkdownViewer
+                  isFileLoading={this.props.isFileLoading}
+                  markdownContent={this.props.content}
+                  latestContributor={this.props.latestContributor}
+                  lastModified = {this.props.lastModified}
+                  onLinkClick={this.props.onLinkClick}
+                >
+                  <Fragment>
+                    {this.props.reviewStatus === 'open' &&
+                      <div className='seafile-btn-view-review text-center'>
+                        <div className='tag tag-green'> 
+                          {gettext('This file is in review stage')}
+                          <a className="ml-2" onMouseDown={this.props.goReviewPage}>{gettext('View Review')}</a>
+                        </div>
+                      </div>
+                    }
+                    {(!this.props.isDraft && this.props.hasDraft && this.props.reviewStatus !== 'open') &&
+                      <div className='seafile-btn-view-review text-center'>
+                        <div className='tag tag-green'>
+                          {gettext('This file is in draft stage.')}
+                          <a className="ml-2" onMouseDown={this.props.goDraftPage}>{gettext('Edit Draft')}</a>
+                        </div>
+                      </div>
+                    }
+                  </Fragment>
+                </WikiMarkdownViewer>
+              )}
+              {(this.props.pathExist && !this.props.isViewFile) && (
                 <Fragment>
-                  {this.props.isViewFile ?
-                    <WikiMarkdownViewer
-                      isFileLoading={this.props.isFileLoading}
-                      markdownContent={this.props.content}
-                      latestContributor={this.props.latestContributor}
-                      lastModified = {this.props.lastModified}
-                      onLinkClick={this.props.onLinkClick}
-                    >
-                      <Fragment>
-                        {this.props.reviewStatus === 'open' &&
-                          <div className='seafile-btn-view-review text-center'>
-                            <div className='tag tag-green'> 
-                              {gettext('This file is in review stage')}
-                              <a className="ml-2" onMouseDown={this.props.goReviewPage}>{gettext('View Review')}</a>
-                            </div>
-                          </div>
-                        }
-                        {(!this.props.isDraft && this.props.hasDraft && this.props.reviewStatus !== 'open') &&
-                          <div className='seafile-btn-view-review text-center'>
-                            <div className='tag tag-green'>
-                              {gettext('This file is in draft stage.')}
-                              <a className="ml-2" onMouseDown={this.props.goDraftPage}>{gettext('Edit Draft')}</a>
-                            </div>
-                          </div>
-                        }
-                      </Fragment>
-                    </WikiMarkdownViewer> :
-                    <Fragment>
-                      {showRepoInfoBar && (
-                        <RepoInfoBar
-                          repoID={repoID}
-                          currentPath={this.props.path}
-                          usedRepoTags={this.props.usedRepoTags}
-                          readmeMarkdown={this.props.readmeMarkdown}
-                          draftCounts={this.props.draftCounts}
-                          reviewCounts={this.props.reviewCounts}
-                        />
-                      )}
-                      <DirentListView
-                        path={this.props.path}
-                        repoID={repoID}
-                        repoEncrypted={this.props.repoEncrypted}
-                        direntList={this.props.direntList}
-                        sortBy={this.props.sortBy}
-                        sortOrder={this.props.sortOrder}
-                        sortItems={this.props.sortItems}
-                        onAddFile={this.props.onAddFile}
-                        onItemClick={this.onItemClick}
-                        onItemDelete={this.props.onItemDelete}
-                        onItemRename={this.props.onItemRename}
-                        onItemMove={this.props.onItemMove}
-                        onItemCopy={this.props.onItemCopy}
-                        onDirentClick={this.onDirentClick}
-                        onItemDetails={this.onItemDetails}
-                        isDirentListLoading={this.props.isDirentListLoading}
-                        updateDirent={this.props.updateDirent}
-                        currentRepoInfo={this.state.currentRepoInfo}
-                        isRepoOwner={this.state.isRepoOwner}
-                        isAllItemSelected={this.props.isAllDirentSelected}
-                        onAllItemSelected={this.props.onAllDirentSelected}
-                        onItemSelected={this.props.onItemSelected}
-                      />
-                      <FileUploader
-                        ref={uploader => this.uploader = uploader}
-                        dragAndDrop={true}
-                        path={this.props.path}
-                        repoID={repoID}
-                        direntList={this.props.direntList}
-                        onFileUploadSuccess={this.onFileUploadSuccess}
-                      />
-                    </Fragment>
-                  }
+                  {showRepoInfoBar && (
+                    <RepoInfoBar
+                      repoID={repoID}
+                      currentPath={this.props.path}
+                      usedRepoTags={this.props.usedRepoTags}
+                      readmeMarkdown={this.props.readmeMarkdown}
+                      draftCounts={this.props.draftCounts}
+                      reviewCounts={this.props.reviewCounts}
+                    />
+                  )}
+                  <DirentListView
+                    path={this.props.path}
+                    repoID={repoID}
+                    repoEncrypted={this.props.repoEncrypted}
+                    direntList={this.props.direntList}
+                    sortBy={this.props.sortBy}
+                    sortOrder={this.props.sortOrder}
+                    sortItems={this.props.sortItems}
+                    onAddFile={this.props.onAddFile}
+                    onItemClick={this.onItemClick}
+                    onItemDelete={this.props.onItemDelete}
+                    onItemRename={this.props.onItemRename}
+                    onItemMove={this.props.onItemMove}
+                    onItemCopy={this.props.onItemCopy}
+                    onDirentClick={this.onDirentClick}
+                    onItemDetails={this.onItemDetails}
+                    isDirentListLoading={this.props.isDirentListLoading}
+                    updateDirent={this.props.updateDirent}
+                    currentRepoInfo={this.state.currentRepoInfo}
+                    isRepoOwner={this.state.isRepoOwner}
+                    isAllItemSelected={this.props.isAllDirentSelected}
+                    onAllItemSelected={this.props.onAllDirentSelected}
+                    onItemSelected={this.props.onItemSelected}
+                  />
+                  <FileUploader
+                    ref={uploader => this.uploader = uploader}
+                    dragAndDrop={true}
+                    path={this.props.path}
+                    repoID={repoID}
+                    direntList={this.props.direntList}
+                    onFileUploadSuccess={this.onFileUploadSuccess}
+                  />
                 </Fragment>
-              }
+              )}
             </div>
           </div>
           {this.state.isDirentDetailShow && (

frontend/src/pages/repo-wiki-mode/side-panel.js

@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { gettext, siteRoot, logoPath, mediaUrl, siteTitle, logoWidth, logoHeight } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
+import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
 import TreeView from '../../components/tree-view/tree-view';
 import NodeMenu from '../../components/tree-view/node-menu';
-import MenuControl from '../../components/menu-control';
+import Logo from '../../components/logo';
+import ModalPortal from '../../components/modal-portal';
 import Delete from '../../components/dialog/delete-dialog';
 import Rename from '../../components/dialog/rename-dialog';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
@@ -37,29 +39,29 @@ class SidePanel extends Component {
       },
       isLoadFailed: false,
       isMenuIconShow: false,
-      showDelete: false,
-      showFile: false,
-      showFolder: false,
-      showRename: false,
-      isFile: false
+      isHeaderMenuShow: false,
+      isDeleteDialogShow: false,
+      isAddFileDialogShow: false,
+      isAddFolderDialogShow: false,
+      isRenameDialogShow: false,
     };
-    this.searchedPath = null;
-  }
-
-  closeSide = () => {
-    this.props.onCloseSide();
   }
 
   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 = (node) => {
@@ -79,19 +81,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;
@@ -102,44 +91,50 @@ class SidePanel extends Component {
     });
   }
 
-  toggleAddFile = () => {
-    this.setState({showFile: !this.state.showFile});
+  onAddFileToggle = () => {
+    this.setState({
+      isMenuIconShow: false,
+      isAddFileDialogShow: !this.state.isAddFileDialogShow
+    });
     this.onHideContextMenu();
   }
 
-  toggleAddFolder = () => {
-    this.setState({showFolder: !this.state.showFolder});
+  onAddFolderToggle = () => {
+    this.setState({
+      isMenuIconShow: false,
+      isAddFolderDialogShow: !this.state.isAddFolderDialogShow
+    });
     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, isDraft) => {
-    this.setState({showFile: !this.state.showFile});
+    this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
     this.props.onAddFileNode(filePath, isDraft);
   }
 
   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);
   }
@@ -157,97 +152,109 @@ class SidePanel extends Component {
   }
 
   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});
   }
 
   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">
-          <h3
-            className="wiki-pages-heading"
-            onMouseEnter={this.onMouseEnter}
-            onMouseLeave={this.onMouseLeave}
-          >
+          <h3 className="wiki-pages-heading" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
             {gettext('Files')}
             <div className="heading-icon">
-              <MenuControl
-                isShow={this.state.isMenuIconShow}
-                onClick={this.onHeadingMenuClick}
-              />
+              {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.toggleAddFile}
-              toggleAddFolder={this.toggleAddFolder}
-              toggleRename={this.toggleRename}
-              toggleDelete={this.toggleDelete}
-            />
-            }
-            {this.state.showDelete &&
+            {this.props.treeData && (
+              <TreeView
+                treeData={this.props.treeData}
+                currentPath={this.props.currentPath}
+                isNodeItemFrezee={this.state.isNodeItemFrezee}
+                onShowContextMenu={this.onShowContextMenu}
+                onNodeClick={this.onNodeClick}
+                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}
+              />
+            )}
+          </div>
+        </div>
+        {this.state.isDeleteDialogShow && (
+          <ModalPortal>
             <Delete
               currentNode={this.state.currentNode}
               handleSubmit={this.onDeleteNode}
               toggleCancel={this.deleteCancel}
             />
-            }
-            {this.state.showFile &&
+          </ModalPortal>
+        )}
+        {this.state.isAddFileDialogShow && (
+          <ModalPortal>
             <CreateFile
               fileType={'.md'}
               parentPath={this.state.currentNode.path}
               onAddFile={this.onAddFileNode}
               addFileCancel={this.addFileCancel}
             />
-            }
-            {this.state.showFolder &&
+          </ModalPortal>
+        )}
+        {this.state.isAddFolderDialogShow && (
+          <ModalPortal>
             <CreateFolder
               parentPath={this.state.currentNode.path}
               onAddFolder={this.onAddFolderNode}
               addFolderCancel={this.addFolderCancel}
             />
-            }
-            {this.state.showRename &&
+          </ModalPortal>
+        )}
+        {this.state.isRenameDialogShow && (
+          <ModalPortal>
             <Rename
               currentNode={this.state.currentNode}
               onRename={this.onRenameNode}
               toggleCancel={this.renameCancel}
             />
-            }
-          </div>
-        </div>
+          </ModalPortal>
+        )}
       </div>
     );
   }