Implement wiki mode menu function (#2461)

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, repoID, serviceUrl, slug, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -7,6 +7,7 @@ import CommonToolbar from '../../components/toolbar/common-toolbar';
 import PathToolbar from '../../components/toolbar/path-toolbar';
 import MarkdownViewer from '../../components/markdown-viewer';
 import DirentListView from '../../components/dirent-list-view/dirent-list-view';
+import DirentDetail from '../../components/dirent-detail/dirent-details';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';
 
@@ -25,6 +26,9 @@ const propTypes = {
   onLinkClick: PropTypes.func.isRequired,
   onMainItemClick: PropTypes.func.isRequired,
   onMainItemDelete: PropTypes.func.isRequired,
+  onMainItemRename: PropTypes.func.isRequired,
+  onMainItemMove: PropTypes.func.isRequired,
+  onMainItemCopy: PropTypes.func.isRequired,
   onMainAddFile: PropTypes.func.isRequired,
   onMainAddFolder: PropTypes.func.isRequired,
   switchViewMode: PropTypes.func.isRequired,
@@ -42,6 +46,10 @@ class MainPanel extends Component {
       showFileDialog: false,
       showFolderDialog: false,
       createFileType: '',
+      isDirentDetailShow: false,
+      currentDirent: null,
+      currentFilePath: '',
+      isDirentListLoading: true,
     };
   }
 
@@ -62,7 +70,8 @@ class MainPanel extends Component {
   }
 
   updateViewList = (filePath) => {
-    seafileAPI.listDir(repoID, filePath, 48).then(res => {
+    this.setState({isDirentListLoading: true});
+    seafileAPI.listDir(repoID, filePath).then(res => {
       let direntList = [];
       res.data.forEach(item => {
         let dirent = new Dirent(item);
@@ -70,6 +79,7 @@ class MainPanel extends Component {
       });
       this.setState({
         direntList: direntList,
+        isDirentListLoading: false,
       });
     });
   }
@@ -168,6 +178,18 @@ class MainPanel extends Component {
     this.props.onMainAddFolder(dirPath);
   }
 
+  onItemDetails = (dirent, direntPath) => {
+    this.setState({
+      currentDirent: dirent,
+      currentFilePath: direntPath,
+      isDirentDetailShow: true,
+    });
+  }
+
+  onItemDetailsClose = () => {
+    this.setState({isDirentDetailShow: false});
+  }
+
   render() {
     let filePathList = this.props.filePath.split('/');
     let nodePath = '';
@@ -202,13 +224,18 @@ class MainPanel extends Component {
             <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.onMenuClick}></span>
             <div className="file-operation">
               <div className="operation">
-                { 
+                {
                   this.props.permission === 'rw' &&
                   <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onEditClick}>{gettext('Edit')}</button>
                 }
-                <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onUploadClick}>{gettext('Upload')}</button>
-                <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onNewClick}>{gettext('New')}</button>
-                <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onShareClick}>{gettext('Share')}</button>
+                {
+                  !this.props.isViewFileState &&
+                  <Fragment>
+                    <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onUploadClick}>{gettext('Upload')}</button>
+                    <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onNewClick}>{gettext('New')}</button>
+                    <button className="btn btn-secondary operation-item" title={gettext('Edit File')} onClick={this.onShareClick}>{gettext('Share')}</button>
+                  </Fragment>
+                }
               </div>
               {
                 this.state.uploadMenuShow && 
@@ -222,7 +249,7 @@ class MainPanel extends Component {
                 <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
                   <li className="dropdown-item" onClick={this.addFolder}>{gettext('New Folder')}</li>
                   <li className="dropdown-item" onClick={this.addFile}>{gettext('New File')}</li>
-                  <li className="dropdown-item menu-inner-divider"></li>
+                  <li className="dropdown-divider"></li>
                   <li className="dropdown-item" onClick={this.addMarkdownFile}>{gettext('New Markdown File')}</li>
                 </ul>
               }
@@ -235,37 +262,53 @@ class MainPanel extends Component {
           </div>
           <CommonToolbar onSearchedClick={this.props.onSearchedClick} searchPlaceholder={'Search files in this library'}/>
         </div>
-        <div className="cur-view-container">
-          <div className="cur-view-path">
-            <div className="path-containter">
-              <a href={siteRoot + '#common/'} className="normal">{gettext('Libraries')}</a>
-              <span className="path-split">/</span>
-              {this.props.filePath === '/' ?
-                <span>{slug}</span> :
-                <a className="path-link" data-path="/" onClick={this.onMainNavBarClick}>{slug}</a>
-              }
-              {pathElem}
+        <div className="main-panel-center flex-direction-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <div className="path-containter">
+                <a href={siteRoot + '#common/'} className="normal">{gettext('Libraries')}</a>
+                <span className="path-split">/</span>
+                {this.props.filePath === '/' ?
+                  <span>{slug}</span> :
+                  <a className="path-link" data-path="/" onClick={this.onMainNavBarClick}>{slug}</a>
+                }
+                {pathElem}
+              </div>
+              <PathToolbar filePath={this.props.filePath}/>
+            </div>
+            <div className="cur-view-content">
+              { this.props.isViewFileState ?
+                <MarkdownViewer
+                  markdownContent={this.props.content}
+                  latestContributor={this.props.latestContributor}
+                  lastModified = {this.props.lastModified}
+                  onLinkClick={this.props.onLinkClick}
+                  isFileLoading={this.props.isFileLoading}
+                /> :
+                <DirentListView 
+                  direntList={this.state.direntList}
+                  filePath={this.props.filePath}
+                  onItemClick={this.props.onMainItemClick}
+                  onItemDelete={this.props.onMainItemDelete}
+                  onItemRename={this.props.onMainItemRename}
+                  onItemMove={this.props.onMainItemMove}
+                  onItemCopy={this.props.onMainItemCopy}
+                  onItemDetails={this.onItemDetails}
+                  updateViewList={this.updateViewList}
+                  isDirentListLoading={this.state.isDirentListLoading}
+                />
+              }
             </div>
-            <PathToolbar filePath={this.props.filePath}/>
           </div>
-          <div className="cur-view-content">
-            { this.props.isViewFileState ?
-              <MarkdownViewer
-                markdownContent={this.props.content}
-                latestContributor={this.props.latestContributor}
-                lastModified = {this.props.lastModified}
-                onLinkClick={this.props.onLinkClick}
-                isFileLoading={this.props.isFileLoading}
-              /> :
-              <DirentListView 
-                direntList={this.state.direntList}
-                filePath={this.props.filePath}
-                onItemClick={this.props.onMainItemClick}
-                onItemDelete={this.props.onMainItemDelete}
-                updateViewList={this.updateViewList}
+          { this.state.isDirentDetailShow &&
+            <div className="cur-view-detail">
+              <DirentDetail 
+                dirent={this.state.currentDirent}
+                direntPath={this.state.currentFilePath}
+                onItemDetailsClose={this.onItemDetailsClose}
               />
-            }
-          </div>
+            </div>
+          }
         </div>
         {this.state.showFileDialog && 
           <CreateFile