Optimized wiki code (#2566)

* optimized path component

* abstract component

* repair copy bug

* move copy&move&download to list-item

* add modal portal

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

@@ -1,20 +1,17 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { gettext, repoID, serviceUrl, slug, siteRoot } from '../../utils/constants';
+import { gettext, repoID, serviceUrl, slug } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
-import URLDecorator from '../../utils/url-decorator';
 import Repo from '../../models/repo';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
-import PathToolbar from '../../components/toolbar/path-toolbar';
+import MutipleDirentsOperationToolbar from '../../components/toolbar/mutilple-dir-operation-toolbar';
+import CurDirPath from '../../components/cur-dir-path';
 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';
-import ZipDownloadDialog from '../../components/dialog/zip-download-dialog';
-import MoveDirentDialog from '../../components/dialog/move-dirent-dialog';
-import CopyDirentDialog from '../../components/dialog/copy-dirent-dialog';
 import FileUploader from '../../components/file-uploader/file-uploader';
 
 const propTypes = {
@@ -69,13 +66,7 @@ class MainPanel extends Component {
       direntPath: '',
       currentRepo: null,
       isRepoOwner: false,
-      progress: 0,
-      isProgressDialogShow: false,
-      isMoveDialogShow: false,
-      isCopyDialogShow: false,
-      isMutipleOperation: false,
     };
-    this.zip_token = null;
   }
 
   componentDidMount() {
@@ -110,8 +101,8 @@ class MainPanel extends Component {
     this.props.onSideNavMenuClick();
   }
 
-  onMainNavBarClick = (e) => {
-    this.props.onMainNavBarClick(e.target.dataset.path);
+  onMainNavBarClick = (path) => {
+    this.props.onMainNavBarClick(path);
   }
 
   onEditClick = (e) => {
@@ -222,149 +213,7 @@ class MainPanel extends Component {
 
   }
 
-  onSelectedMoveToggle = () => {
-    this.setState({
-      isMutipleOperation: true,
-      isMoveDialogShow: true,
-      currentDirent: null,
-      direntPath: '',
-    });
-  }
-
-  onSelectedCopyToggle = () => {
-    this.setState({
-      isMutipleOperation: true,
-      isCopyDialogShow: true,
-      currentDirent: null,
-      direntPath: '',
-    });
-  }
-
-  onItemMoveToggle = (dirent, direntPath) => {
-    this.setState({
-      isMutipleOperation: false,
-      isMoveDialogShow: true,
-      currentDirent: dirent,
-      direntPath: direntPath,
-    });
-  }
-  
-  onItemCopyToggle = (dirent, direntPath) => {
-    this.setState({
-      isMutipleOperation: false,
-      isCopyDialogShow: true,
-      currentDirent: dirent,
-      direntPath: direntPath
-    });
-  }
-
-  onCancelMove = () => {
-    this.setState({isMoveDialogShow: false});
-  }
-
-  onCancelCopy = () => {
-    this.setState({isCopyDialogShow: false});
-  }
-
-  onItemsDownload = () => {
-    let selectedDirentList = this.props.selectedDirentList;
-    if (selectedDirentList.length) {
-      if (selectedDirentList.length === 1 && !selectedDirentList[0].isDir()) {
-        let direntPath = Utils.joinPath(this.props.path, selectedDirentList[0].name);
-        let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
-        location.href= url;
-        return;
-      }
-      let selectedDirentNames = selectedDirentList.map(dirent => {
-        return dirent.name;
-      });
-      this.setState({isProgressDialogShow: true, progress: 0});
-      seafileAPI.zipDownload(repoID, this.props.path, selectedDirentNames).then(res => {
-        this.zip_token = res.data['zip_token'];
-        this.addDownloadAnimation();
-        this.interval = setInterval(this.addDownloadAnimation, 1000);
-      });
-    }
-  }
-
-  onItemDownload = (dirent, direntPath) => {
-    if (dirent.type === 'dir') {
-      this.setState({isProgressDialogShow: true, progress: 0});
-      seafileAPI.zipDownload(repoID, this.props.path, dirent.name).then(res => {
-        this.zip_token = res.data['zip_token'];
-        this.addDownloadAnimation();
-        this.interval = setInterval(this.addDownloadAnimation, 1000);
-      }).catch(() => {
-        clearInterval(this.interval);
-        // Toast.error(gettext(''));
-        //todo;
-      });
-    } else {
-      let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: direntPath});
-      location.href = url;
-    }
-  }
-
-  addDownloadAnimation = () => {
-    let _this = this;
-    let token = this.zip_token;
-    seafileAPI.queryZipProgress(token).then(res => {
-      let data = res.data;
-      let progress = data.total === 0 ? 100 : (data.zipped / data.total * 100).toFixed(0);
-      this.setState({progress: parseInt(progress)});
-
-      if (data['total'] === data['zipped']) {
-        this.setState({
-          progress: 100
-        });
-        clearInterval(this.interval);
-        location.href = URLDecorator.getUrl({type: 'download_dir_zip_url', token: token});
-        setTimeout(function() {
-          _this.setState({isProgressDialogShow: false});
-        }, 500);
-      }
-
-    });
-  }
-
-  onCancelDownload = () => {
-    let zip_token = this.zip_token;
-    seafileAPI.cancelZipTask(zip_token).then(res => {
-      this.setState({
-        isProgressDialogShow: false,
-      });
-    });
-  }
-
   render() {
-    let path = this.props.path;
-    path = path[path.length - 1] === '/' ? path.slice(0, path.length - 1) : path;
-    let pathList = path.split('/');
-    let nodePath = '';
-    let pathElem = pathList.map((item, index) => {
-      if (item === '') {
-        return;
-      }
-      if (index === (pathList.length - 1)) {
-        return (
-          <span key={index}><span className="path-split">/</span>{item}</span>
-        );
-      } else {
-        nodePath += '/' + item;
-        return (
-          <span key={index} >
-            <span className="path-split">/</span>
-            <a
-              className="path-link"
-              data-path={nodePath}
-              onClick={this.onMainNavBarClick}>
-              {item}
-            </a>
-          </span>
-        );
-      }
-    });
-
     return (
       <div className="main-panel wiki-main-panel o-hidden">
         <div className="main-panel-top panel-top">
@@ -372,12 +221,14 @@ 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.onSideNavMenuClick}></span>
             <div className="dir-operation">
               {this.props.isDirentSelected &&
-                <div className="operation mutiple-dirents-operation">
-                  <button className="btn btn-secondary operation-item op-icon sf2-icon-move" title={gettext('Move')} onClick={this.onSelectedMoveToggle}></button>
-                  <button className="btn btn-secondary operation-item op-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onSelectedCopyToggle}></button>
-                  <button className="btn btn-secondary operation-item op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.props.onItemsDelete}></button>
-                  <button className="btn btn-secondary operation-item op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></button>
-                </div>
+                <MutipleDirentsOperationToolbar
+                  repoID={repoID} 
+                  path={this.props.path}
+                  selectedDirentList={this.props.selectedDirentList}
+                  onItemsMove={this.props.onItemsMove}
+                  onItemsCopy={this.props.onItemsCopy}
+                  onItemsDelete={this.props.onItemsDelete}
+                />
               }
               {!this.props.isDirentSelected &&
                 <div className="operation">
@@ -427,16 +278,7 @@ class MainPanel extends Component {
         <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.path === '/' ?
-                  <span>{slug}</span> :
-                  <a className="path-link" data-path="/" onClick={this.onMainNavBarClick}>{slug}</a>
-                }
-                {pathElem}
-              </div>
-              <PathToolbar path={this.props.path}/>
+              <CurDirPath currentPath={this.props.path} repoName={slug} onPathClick={this.onMainNavBarClick}/>
             </div>
             <div className="cur-view-content">
               { !this.props.pathExist ?
@@ -457,9 +299,8 @@ class MainPanel extends Component {
                         onItemClick={this.props.onItemClick}
                         onItemDelete={this.props.onItemDelete}
                         onItemRename={this.props.onItemRename}
-                        onItemDownload={this.onItemDownload}
-                        onItemMoveToggle={this.onItemMoveToggle}
-                        onItemCopyToggle={this.onItemCopyToggle}
+                        onItemMove={this.props.onItemMove}
+                        onItemCopy={this.props.onItemCopy}
                         onItemDetails={this.onItemDetails}
                         isDirentListLoading={this.props.isDirentListLoading}
                         updateDirent={this.props.updateDirent}
@@ -508,34 +349,6 @@ class MainPanel extends Component {
             onAddFolder={this.onAddFolder}
           />
         }
-        {this.state.isMoveDialogShow &&
-          <MoveDirentDialog
-            path={this.props.path}
-            isMutipleOperation={this.state.isMutipleOperation}
-            selectedDirentList={this.props.selectedDirentList}
-            dirent={this.state.currentDirent}
-            direntPath={this.state.direntPath}
-            onItemMove={this.props.onItemMove}
-            onItemsMove={this.props.onItemsMove}
-            onCancelMove={this.onCancelMove}
-          />
-        }
-        {this.state.isCopyDialogShow &&
-          <CopyDirentDialog
-            path={this.props.path}
-            isMutipleOperation={this.state.isMutipleOperation}
-            selectedDirentList={this.props.selectedDirentList}
-            dirent={this.state.currentDirent}
-            direntPath={this.state.direntPath}
-            onItemCopy={this.props.onItemCopy}
-            onItemsCopy={this.props.onItemsCopy}
-            onCancelCopy={this.onCancelCopy}
-          />
-        }
-        {this.state.isProgressDialogShow &&
-          <ZipDownloadDialog progress={this.state.progress} onCancelDownload={this.onCancelDownload}
-          />
-        }
       </div>
     );
   }