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/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}}>