Wiki mutiple chioce (#2559)

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -1,27 +1,25 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext, repoID } from '../../utils/constants';
-import URLDecorator from '../../utils/url-decorator';
-import editorUtilities from '../../utils/editor-utilties';
+import { gettext } from '../../utils/constants';
 import Loading from '../loading';
 import DirentListItem from './dirent-list-item';
-import ZipDownloadDialog from '../dialog/zip-download-dialog';
-import MoveDirentDialog from '../dialog/move-dirent-dialog';
-import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
   direntList: PropTypes.array.isRequired,
   onItemDelete: PropTypes.func.isRequired,
+  onAllItemSelected: PropTypes.func.isRequired,
+  onItemSelected: PropTypes.func.isRequired,
   onItemRename: PropTypes.func.isRequired,
   onItemClick: PropTypes.func.isRequired,
-  onItemMove: PropTypes.func.isRequired,
-  onItemCopy: PropTypes.func.isRequired,
+  onItemMoveToggle: PropTypes.func.isRequired,
+  onItemCopyToggle: PropTypes.func.isRequired,
   onItemDetails: PropTypes.func.isRequired,
   updateDirent: PropTypes.func.isRequired,
   isDirentListLoading: PropTypes.bool.isRequired,
   isRepoOwner: PropTypes.bool,
   currentRepo: PropTypes.object,
+  isAllItemSelected: PropTypes.bool.isRequired,
 };
 
 class DirentListView extends React.Component {
@@ -29,13 +27,7 @@ class DirentListView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      progress: 0,
       isItemFreezed: false,
-      isProgressDialogShow: false,
-      isMoveDialogShow: false,
-      isCopyDialogShow: false,
-      currentDirent: false,
-      direntPath: '',
     };
   }
 
@@ -47,91 +39,14 @@ class DirentListView extends React.Component {
     this.setState({isItemFreezed: false});
   }
 
-  onRenameMenuItemClick = () => {
+  onItemRenameToggle = () => {
     this.onFreezedItem();
   }
 
-  onDirentItemMove = (dirent, direntPath) => {
-    this.setState({
-      isMoveDialogShow: true,
-      currentDirent: dirent,
-      direntPath: direntPath
-    });
-  }
-
-  onDirentItemCopy = (dirent, direntPath) => {
-    this.setState({
-      isCopyDialogShow: true,
-      currentDirent: dirent,
-      direntPath: direntPath
-    });
-  }
-
-  onItemMove = (repo, direntPath, moveToDirentPath) => {
-    this.props.onItemMove(repo, direntPath, moveToDirentPath);
-  }
-
-  onCancelMove = () => {
-    this.setState({isMoveDialogShow: false});
-  }
-
-  onItemCopy = (repo, direntPath, copyToDirentPath) => {
-    this.props.onItemCopy(repo, direntPath, copyToDirentPath);
-  }
-
-  onCancelCopy = () => {
-    this.setState({isCopyDialogShow: false});
-  }
-
   onItemDetails = (dirent, direntPath) => {
     this.props.onItemDetails(dirent, direntPath);
   }
 
-  onItemDownload = (dirent, direntPath) => {
-    if (dirent.type === 'dir') {
-      this.setState({isProgressDialogShow: true, progress: 0});
-      editorUtilities.zipDownload(this.props.path, dirent.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: direntPath});
-      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: 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;
-    editorUtilities.cancelZipTask(zip_token).then(res => {
-      this.setState({
-        isProgressDialogShow: false,
-      });
-    });
-  }
-
   render() {
     const { direntList } = this.props;
 
@@ -140,69 +55,50 @@ class DirentListView extends React.Component {
     }
 
     return (
-      <Fragment>
-        <table>
-          <thead>
-            <tr>
-              <th width="3%" className="select"><input type="checkbox" className="vam" /></th>
-              <th width="3%"></th>
-              <th width="5%"></th>
-              <th width="35%">{gettext('Name')}</th>
-              <th width="10%"></th>
-              <th width="20%"></th>
-              <th width="11%">{gettext('Size')}</th>
-              <th width="13%">{gettext('Last Update')}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {
-              direntList.length !== 0 && direntList.map((dirent, index) => {
-                return (
-                  <DirentListItem
-                    key={index}
-                    dirent={dirent}
-                    path={this.props.path}
-                    currentRepo={this.props.currentRepo}
-                    isRepoOwner={this.props.isRepoOwner}
-                    onItemClick={this.props.onItemClick}
-                    onRenameMenuItemClick={this.onRenameMenuItemClick}
-                    onItemDelete={this.props.onItemDelete}
-                    onItemRename={this.props.onItemRename}
-                    isItemFreezed={this.state.isItemFreezed}
-                    onFreezedItem={this.onFreezedItem}
-                    onUnfreezedItem={this.onUnfreezedItem}
-                    onItemDownload={this.onItemDownload}
-                    onDirentItemMove={this.onDirentItemMove}
-                    onDirentItemCopy={this.onDirentItemCopy}
-                    onItemDetails={this.onItemDetails}
-                    updateDirent={this.props.updateDirent}
-                  />
-                );
-              })
-            }
-          </tbody>
-        </table>
-        {this.state.isProgressDialogShow &&
-          <ZipDownloadDialog progress={this.state.progress} onCancelDownload={this.onCancelDownload}
-          />
-        }
-        {this.state.isMoveDialogShow &&
-          <MoveDirentDialog
-            dirent={this.state.currentDirent}
-            direntPath={this.state.direntPath}
-            onItemMove={this.props.onItemMove}
-            onCancelMove={this.onCancelMove}
-          />
-        }
-        {this.state.isCopyDialogShow &&
-          <CopyDirentDialog
-            dirent={this.state.currentDirent}
-            direntPath={this.state.direntPath}
-            onItemCopy={this.props.onItemCopy}
-            onCancelCopy={this.onCancelCopy}
-          />
-        }
-      </Fragment>
+      <table>
+        <thead>
+          <tr>
+            <th width="3%" className="select">
+              <input type="checkbox" className="vam" onChange={this.props.onAllItemSelected} checked={this.props.isAllItemSelected}/>
+            </th>
+            <th width="3%"></th>
+            <th width="5%"></th>
+            <th width="35%">{gettext('Name')}</th>
+            <th width="10%"></th>
+            <th width="20%"></th>
+            <th width="11%">{gettext('Size')}</th>
+            <th width="13%">{gettext('Last Update')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {
+            direntList.length !== 0 && direntList.map((dirent, index) => {
+              return (
+                <DirentListItem
+                  key={index}
+                  dirent={dirent}
+                  path={this.props.path}
+                  currentRepo={this.props.currentRepo}
+                  isRepoOwner={this.props.isRepoOwner}
+                  onItemClick={this.props.onItemClick}
+                  onItemRenameToggle={this.onItemRenameToggle}
+                  onItemSelected={this.props.onItemSelected}
+                  onItemDelete={this.props.onItemDelete}
+                  onItemRename={this.props.onItemRename}
+                  onItemMoveToggle={this.props.onItemMoveToggle}
+                  onItemCopyToggle={this.props.onItemCopyToggle}
+                  onItemDownload={this.props.onItemDownload}
+                  updateDirent={this.props.updateDirent}
+                  isItemFreezed={this.state.isItemFreezed}
+                  onFreezedItem={this.onFreezedItem}
+                  onUnfreezedItem={this.onUnfreezedItem}
+                  onItemDetails={this.onItemDetails}
+                />
+              );
+            })
+          }
+        </tbody>
+      </table>
     );
   }
 }