Implement wiki mode menu function (#2461)

frontend/src/components/tree-dir-view/tree-dir-list.js

@@ -1,17 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { serviceUrl } from '../../utils/constants';
-import OperationGroup from '../dirent-operation/operation-group';
 
 const propTypes = {
-  isItemFreezed: PropTypes.bool.isRequired,
   node: PropTypes.object.isRequired,
-  needOperationGroup: PropTypes.bool.isRequired,
-  onItemMenuHide: PropTypes.func.isRequired,
-  onItemMenuShow: PropTypes.func.isRequired,
   onMainNodeClick: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
-  onDownload: PropTypes.func.isRequired,
 };
 
 class TreeDirList extends React.Component {
@@ -25,79 +18,26 @@ class TreeDirList extends React.Component {
   }
 
   onMouseEnter = () => {
-    if (!this.props.isItemFreezed) {
-      this.setState({
-        highlight: true,
-        isOperationShow: true,
-      });
-    }
+    this.setState({highlight: true});
   }
 
-  onMouseOver = () => {
-    if (!this.props.isItemFreezed) {
-      this.setState({
-        highlight: true,
-        isOperationShow: true,
-      });
-    }
-  }
 
   onMouseLeave = () => {
-    if (!this.props.isItemFreezed) {
-      this.setState({
-        highlight: false,
-        isOperationShow: false
-      });
-    }
-  }
-
-  onItemMenuShow = () => {
-    this.props.onItemMenuShow();
-  }
-
-  onItemMenuHide = () => {
-    this.setState({
-      isOperationShow: false,
-      highlight: ''
-    });
-    this.props.onItemMenuHide();
+    this.setState({highlight: false});
   }
 
   onMainNodeClick = () => {
     this.props.onMainNodeClick(this.props.node);
   }
 
-  onDownload = () => {
-    this.props.onDownload(this.props.node);
-  }
-
-  onDelete = () => {
-    this.props.onDelete(this.props.node);
-  }
-
   render() {
     let node = this.props.node;
     return (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onMouseOver={this.onMouseOver}>
+      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="icon">
           <img src={node.type === 'dir' ? serviceUrl + '/media/img/folder-192.png' : serviceUrl + '/media/img/file/192/txt.png'} alt='icon'></img>
         </td>
         <td className="name a-simulate" onClick={this.onMainNodeClick}>{node.name}</td>
-        {
-          this.props.needOperationGroup &&
-          <td>
-            {
-              this.state.isOperationShow && 
-              <OperationGroup 
-                item={node} 
-                onItemMenuShow={this.onItemMenuShow}
-                onItemMenuHide={this.onItemMenuHide}
-                onDownload={this.onDownload}
-                onDelete={this.onDelete}
-              />
-            }
-          </td>
-        }
         <td>{node.size}</td>
         <td title={node.last_update_time}>{node.last_update_time}</td>
       </tr>

frontend/src/components/tree-dir-view/tree-dir-view.js

@@ -1,88 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext, repoID } from '../../utils/constants';
-import editorUtilities from '../../utils/editor-utilties';
-import URLDecorator from '../../utils/url-decorator';
-import ZipDownloadDialog from '../dialog/zip-download-dialog';
+import { gettext } from '../../utils/constants';
 import TreeDirList from './tree-dir-list';
 
 const propTypes = {
-  needOperationGroup: PropTypes.bool.isRequired,
   node: PropTypes.object.isRequired,
   onMainNodeClick: PropTypes.func.isRequired,
-  onDeleteItem: PropTypes.func.isRequired,
 };
 
 class TreeDirView extends React.Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      isProgressDialogShow: false,
-      progress: '0%',
-      isItemFreezed: false
-    };
-    this.zip_token = null;
-    this.interval = null;
-  }
-
-  onDownload = (item) => {
-    if (item.isDir()) {
-      this.setState({isProgressDialogShow: true, progress: '0%'});
-      editorUtilities.zipDownload(item.parent_path, item.name).then(res => {
-        this.zip_token = res.data['zip_token'];
-        this.addDownloadAnimation();
-        this.interval = setInterval(this.addDownloadAnimation, 1000);
-      });
-    } else {
-      let url = URLDecorator.getUrl({type:'download_file_url', repoID: repoID, filePath: item.path});
-      location.href = url;
-    }
-  }
-
-  addDownloadAnimation = () => {
-    let _this = this;
-    let token = this.zip_token;
-    editorUtilities.queryZipProgress(token).then(res => {
-      let data = res.data;
-      let progress = data.total === 0 ? '100%' : (data.zipped / data.total * 100).toFixed(0) + '%';
-      this.setState({progress: 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;
-    editorUtilities.cancelZipTask(zip_token).then(res => {
-      this.setState({
-        isProgressDialogShow: false,
-      });
-    });
-  }
-
-  onItemMenuShow = () => {
-    this.setState({
-      isItemFreezed: true,
-    });
-  }
-
-  onItemMenuHide = () => {
-    this.setState({
-      isItemFreezed: false,
-    });
-  }
-
   render() {
     let node = this.props.node;
     let children = node.hasChildren() ? node.children : null;
@@ -91,45 +18,21 @@ class TreeDirView extends React.Component {
       <div className="table-container">
         <table>
           <thead>
-            {this.props.needOperationGroup ? 
-              <tr>
-                <th style={{width: '4%'}}></th>
-                <th style={{width: '46%'}}>{gettext('Name')}</th>
-                <th style={{width: '20%'}}></th>
-                <th style={{width: '15%'}}>{gettext('Size')}</th>
-                <th style={{width: '15%'}}>{gettext('Last Update')}</th>
-              </tr>
-              :
-              <tr>
-                <th style={{width: '4%'}}></th>
-                <th style={{width: '66%'}}>{gettext('Name')}</th>
-                <th style={{width: '15%'}}>{gettext('Size')}</th>
-                <th style={{width: '15%'}}>{gettext('Last Update')}</th>
-              </tr>
-            }
+            <tr>
+              <th style={{width: '4%'}}></th>
+              <th style={{width: '66%'}}>{gettext('Name')}</th>
+              <th style={{width: '15%'}}>{gettext('Size')}</th>
+              <th style={{width: '15%'}}>{gettext('Last Update')}</th>
+            </tr>
           </thead>
           <tbody>
             {children && children.map((node, index) => {
               return (
-                <TreeDirList 
-                  key={index} 
-                  node={node} 
-                  isItemFreezed={this.state.isItemFreezed}
-                  onMainNodeClick={this.props.onMainNodeClick}
-                  onItemMenuShow={this.onItemMenuShow}
-                  onItemMenuHide={this.onItemMenuHide}
-                  onDownload={this.onDownload}
-                  onDelete={this.props.onDeleteItem}
-                  needOperationGroup={this.props.needOperationGroup}
-                />
+                <TreeDirList key={index} node={node} onMainNodeClick={this.props.onMainNodeClick}/>
               );
             })}
           </tbody>
         </table>
-        {
-          this.state.isProgressDialogShow && 
-          <ZipDownloadDialog progress={this.state.progress} onCancleDownload={this.onCancelDownload}/>
-        }
       </div>
     );
   }