add copy and move effect (#3142)

* add copy and move effect

* Add copy and move effect

* Add move and copy effects

* Add move and copy effects

frontend/src/components/dialog/copy-dirent-dialog.js

@@ -14,7 +14,7 @@ const propTypes = {
   onItemCopy: PropTypes.func,
   onItemsCopy: PropTypes.func,
   onCancelCopy: PropTypes.func.isRequired,
-  repoEncrypted: PropTypes.object.isRequired,
+  repoEncrypted: PropTypes.bool.isRequired,
 };
 
 // need dirent file Path；
@@ -126,7 +126,7 @@ class CopyDirent extends React.Component {
       return;
     }
 
-    this.props.onItemCopy(repo, this.props.dirent, selectedPath);
+    this.props.onItemCopy(repo, this.props.dirent, selectedPath, this.props.path);
     this.toggle();
   }
 

frontend/src/components/dialog/move-dirent-dialog.js

@@ -14,7 +14,7 @@ const propTypes = {
   onItemMove: PropTypes.func,
   onItemsMove: PropTypes.func,
   onCancelMove: PropTypes.func.isRequired,
-  repoEncrypted: PropTypes.object.isRequired,
+  repoEncrypted: PropTypes.bool.isRequired,
 };
 
 // need dirent file Path；
@@ -126,7 +126,7 @@ class MoveDirent extends React.Component {
       return;
     }
 
-    this.props.onItemMove(repo, this.props.dirent, selectedPath);
+    this.props.onItemMove(repo, this.props.dirent, selectedPath, this.props.path);
     this.toggle();
   }
 

frontend/src/components/dir-view-mode/dir-column-nav.js

@@ -5,6 +5,8 @@ import Loading from '../../components/loading';
 import ModalPortal from '../../components/modal-portal';
 import Delete from '../../components/dialog/delete-dialog';
 import Rename from '../../components/dialog/rename-dialog';
+import Copy from '../../components/dialog/copy-dirent-dialog';
+import Move from '../../components/dialog/move-dirent-dialog';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';
 import { siteRoot, gettext, thumbnailSizeForOriginal } from '../../utils/constants';
@@ -45,6 +47,9 @@ class DirColumnNav extends React.Component {
       isNodeImagePopupOpen: false,
       imageNodeItems: [],
       imageIndex: 0,
+      isCopyDialogShow: false,
+      isMoveDialogShow: false,
+      isMutipleOperation:false,
     };
     this.isNodeMenuShow = true;
   }
@@ -77,6 +82,12 @@ class DirColumnNav extends React.Component {
       case 'Delete':
         this.onDeleteToggle();
         break;
+      case 'Copy':
+        this.onCopyToggle();
+        break;
+      case 'Move':
+        this.onMoveToggle();
+        break;
       case 'Open in New Tab':
         this.onOpenFile(node);
         break;
@@ -115,6 +126,14 @@ class DirColumnNav extends React.Component {
     this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
   }
 
+  onCopyToggle =() => {
+    this.setState({isCopyDialogShow: !this.state.isCopyDialogShow})
+  }
+
+  onMoveToggle = () => {
+    this.setState({isMoveDialogShow: !this.state.isMoveDialogShow})
+  }
+
   onAddFolderNode = (dirPath) => {
     this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
     this.props.onAddFolderNode(dirPath);
@@ -295,6 +314,32 @@ class DirColumnNav extends React.Component {
             />
           </ModalPortal>
         )}
+        {this.state.isCopyDialogShow && (
+          <ModalPortal>
+            <Copy
+              path={this.state.opNode.parentNode.path}
+              repoID={this.props.repoID}
+              dirent={this.state.opNode.object}
+              onItemCopy={this.props.onItemCopy}
+              repoEncrypted={this.props.currentRepoInfo.encrypted}
+              onCancelCopy={this.onCopyToggle}
+              isMutipleOperation={this.state.isMutipleOperation}
+            />
+          </ModalPortal>
+        )}
+        {this.state.isMoveDialogShow && (
+          <ModalPortal>
+            <Move
+              path={this.state.opNode.parentNode.path}
+              repoID={this.props.repoID}
+              dirent={this.state.opNode.object}
+              onItemMove={this.props.onItemMove}
+              repoEncrypted={this.props.currentRepoInfo.encrypted}
+              onCancelMove={this.onMoveToggle}
+              isMutipleOperation={this.state.isMutipleOperation}
+            />
+          </ModalPortal>
+        )}
         {this.state.isNodeImagePopupOpen && (
             <Lightbox
               mainSrc={imageNodeItems[imageIndex].src}

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -163,6 +163,8 @@ class DirColumnView extends React.Component {
           navRate={this.state.navRate}
           inResizing={this.state.inResizing}
           currentRepoInfo={this.props.currentRepoInfo}
+          onItemMove={this.props.onItemMove}
+          onItemCopy={this.props.onItemCopy}
         />
         <div className="dir-content-resize" onMouseDown={this.onResizeMouseDown}></div>
         <div className="dir-content-main" style={{userSelect: select, flex: mainFlex}}>

frontend/src/components/tree-view/tree-node-menu.js

@@ -29,9 +29,9 @@ class TreeNodeMenu extends React.Component {
     let { node } = this.props;
     let menuList = [];
     if (node.object.type === 'dir') {
-      menuList = ['New Folder', 'New File', 'Rename', 'Delete'];
+      menuList = ['New Folder', 'New File', 'Copy', 'Move', 'Rename', 'Delete'];
     } else {
-      menuList = ['Rename', 'Delete', 'Open in New Tab'];
+      menuList = ['Rename', 'Delete', 'Copy', 'Move', 'Open in New Tab'];
     }
     return menuList;
   }
@@ -48,6 +48,12 @@ class TreeNodeMenu extends React.Component {
       case 'Rename':
         translateResult = gettext('Rename');
         break;
+      case 'Copy':
+        translateResult = gettext('Copy');
+        break;
+      case 'Move':
+        translateResult = gettext('Move');
+        break;
       case 'Delete':
         translateResult = gettext('Delete');
         break;