Feat: 复制模态框

src/actions/index.js

@@ -165,6 +165,12 @@ export const openGetSourceDialog = () => {
     };
 };
 
+export const openCopyDialog = () => {
+    return {
+        type: "OPEN_COPY_DIALOG"
+    };
+};
+
 export const closeAllModals = () => {
     return {
         type: "CLOSE_ALL_MODALS"

src/component/FileManager/ContextMenu.js

@@ -16,6 +16,7 @@ import {
     openRemoteDownloadDialog,
     openTorrentDownloadDialog,
     openGetSourceDialog,
+    openCopyDialog
  } from "../../actions/index"
 import {isPreviewable,isTorrent} from "../../config"
 import {allowSharePreview} from "../../untils/index"
@@ -23,6 +24,7 @@ import UploadIcon from '@material-ui/icons/CloudUpload'
 import DownloadIcon from '@material-ui/icons/CloudDownload'
 import NewFolderIcon from '@material-ui/icons/CreateNewFolder'
 import OpenFolderIcon from '@material-ui/icons/FolderOpen'
+import FileCopyIcon from '@material-ui/icons/FileCopy';
 import ShareIcon from '@material-ui/icons/Share'
 import RenameIcon from '@material-ui/icons/BorderColor'
 import MoveIcon from '@material-ui/icons/Input'
@@ -97,6 +99,9 @@ const mapDispatchToProps = dispatch => {
         },
         openGetSourceDialog:()=>{
             dispatch(openGetSourceDialog())
+        },
+        openCopyDialog:()=>{
+            dispatch(openCopyDialog())
         }
     }
 }
@@ -236,15 +241,18 @@ class ContextMenuCompoment extends Component {
                 {this.props.menuType!=="empty"&&
                     <MenuList>
                         {(!this.props.isMultiple && this.props.withFolder)&&
+                        <>
                             <MenuItem onClick={this.enterFolder}>
                                 <ListItemIcon>
                                     <OpenFolderIcon/>
                                 </ListItemIcon>
                                 <Typography variant="inherit">进入</Typography>
                             </MenuItem>
+                            <Divider/>
+                            </>
                         }
                         {(!this.props.isMultiple&&this.props.withFile&&isPreviewable(this.props.selected[0].name))&&
-                            <div>
+                            <>
                                 <MenuItem onClick={()=>this.openPreview()}>
                                     <ListItemIcon>
                                         <OpenIcon/>
@@ -252,8 +260,9 @@ class ContextMenuCompoment extends Component {
                                     <Typography variant="inherit">打开</Typography>
                                 </MenuItem>
                                 <Divider/>
-                             </div>
+                             </>
                         }
+        
 
                         {(!this.props.isMultiple&&this.props.withFile)&&
                             <MenuItem onClick={()=>this.openDownload()}>
@@ -292,12 +301,20 @@ class ContextMenuCompoment extends Component {
                         }
                         
                         {(!this.props.isMultiple&&pathHelper.isHomePage(this.props.location.pathname))&&
+                            <>
                             <MenuItem onClick={()=>this.props.openRenameDialog() }>
                                 <ListItemIcon>
                                     <RenameIcon/>
                                 </ListItemIcon>
                                 <Typography variant="inherit">重命名</Typography>
                             </MenuItem>
+                            <MenuItem onClick={()=>this.props.openCopyDialog() }>
+                                <ListItemIcon>
+                                    <FileCopyIcon/>
+                                </ListItemIcon>
+                                <Typography variant="inherit">复制</Typography>
+                            </MenuItem>
+                            </>
                         }
                         {pathHelper.isHomePage(this.props.location.pathname)&&<div>
                             <MenuItem onClick={()=>this.props.openMoveDialog() }>

src/component/FileManager/Modals.js

@@ -26,6 +26,7 @@ import {
     FormControlLabel,
 } from '@material-ui/core';
 import Loading from "../Modals/Loading"
+import CopyDialog from "../Modals/Copy"
 
 const styles = theme => ({
     wrapper: {
@@ -537,6 +538,14 @@ class ModalsCompoment extends Component {
                     </DialogActions>
                 
                 </Dialog>
+                <CopyDialog 
+                open={this.props.modalsStatus.copy}
+                onClose={this.onClose}
+                presentPath={this.props.path}
+                selected={this.props.selected} 
+                modalsLoading={this.props.modalsLoading}
+                 />
+                
                 <Dialog
                 open={this.props.modalsStatus.move}
                 onClose={this.onClose}

src/component/Modals/Copy.js

@@ -0,0 +1,145 @@
+import React, { useState, useCallback } from "react";
+import { makeStyles } from "@material-ui/core";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    DialogContentText,
+    CircularProgress
+} from "@material-ui/core";
+import {
+    toggleSnackbar,
+    setModalsLoading,
+    refreshFileList,
+    refreshStorage
+} from "../../actions/index";
+import PathSelector from "../FileManager/PathSelector";
+import { useDispatch } from "react-redux";
+import API from "../../middleware/Api";
+
+const useStyles = makeStyles(theme => ({
+    contentFix: {
+        padding: "10px 24px 0px 24px"
+    },
+    wrapper: {
+        margin: theme.spacing(1),
+        position: "relative"
+    },
+    buttonProgress: {
+        color: theme.palette.secondary.light,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginTop: -12,
+        marginLeft: -12
+    }
+}));
+
+export default function CopyDialog(props) {
+    const [selectedPath, setSelectedPath] = useState("");
+    const [selectedPathName, setSelectedPathName] = useState("");
+
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+    const SetModalsLoading = useCallback(
+        status => {
+            dispatch(setModalsLoading(status));
+        },
+        [dispatch]
+    );
+    const RefreshFileList = useCallback(() => {
+        dispatch(refreshFileList());
+    }, [dispatch]);
+
+    const setMoveTarget = folder => {
+        let path =
+            folder.path === "/"
+                ? folder.path + folder.name
+                : folder.path + "/" + folder.name;
+        setSelectedPath(path);
+        setSelectedPathName(folder.name);
+    };
+
+    const submitMove = e => {
+        if (e != null) {
+            e.preventDefault();
+        }
+        SetModalsLoading(true);
+        let dirs = [],
+            items = [];
+        // eslint-disable-next-line
+
+        if (props.selected[0].type === "dir") {
+            dirs.push(props.selected[0].name);
+        } else {
+            items.push(props.selected[0].name);
+        }
+
+        API.post("/object/copy", {
+            src_dir: props.selected[0].path,
+            src: {
+                dirs: dirs,
+                items: items
+            },
+            dst: selectedPath === "//" ? "/" : selectedPath
+        })
+            .then(response => {
+                props.onClose();
+                RefreshFileList();
+                SetModalsLoading(false);
+            })
+            .catch(error => {
+                ToggleSnackbar("top", "right", error.message, "error");
+                SetModalsLoading(false);
+            });
+    };
+
+    const classes = useStyles();
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={props.onClose}
+            aria-labelledby="form-dialog-title"
+        >
+            <DialogTitle id="form-dialog-title">复制到</DialogTitle>
+            <PathSelector
+                presentPath={props.presentPath}
+                selected={props.selected}
+                onSelect={setMoveTarget}
+            />
+
+            {selectedPath !== "" && (
+                <DialogContent className={classes.contentFix}>
+                    <DialogContentText>
+                        复制到 <strong>{selectedPathName}</strong>
+                    </DialogContentText>
+                </DialogContent>
+            )}
+            <DialogActions>
+                <Button onClick={props.onClose}>取消</Button>
+                <div className={classes.wrapper}>
+                    <Button
+                        onClick={submitMove}
+                        color="primary"
+                        disabled={selectedPath === "" || props.modalsLoading}
+                    >
+                        确定
+                        {props.modalsLoading && (
+                            <CircularProgress
+                                size={24}
+                                className={classes.buttonProgress}
+                            />
+                        )}
+                    </Button>
+                </div>
+            </DialogActions>
+        </Dialog>
+    );
+}

src/index.js

@@ -81,7 +81,8 @@ const defaultStatus = InitSiteConfig({
             remoteDownload: false,
             torrentDownload: false,
             getSource: false,
-            resave: false
+            copy:false,
+            resave: false,
         },
         snackbar: {
             toggle: false,

src/reducers/index.js

@@ -322,6 +322,15 @@ const cloudreveApp = (state = [], action) => {
                     contextOpen:false,
                 }),
             });
+         case 'OPEN_COPY_DIALOG':
+            return Object.assign({}, state, {
+                viewUpdate: Object.assign({}, state.viewUpdate, {
+                    modals: Object.assign({}, state.viewUpdate.modals, {
+                        copy:true,
+                    }),
+                    contextOpen:false,
+                }),
+            });
         case 'CLOSE_ALL_MODALS': 
             return Object.assign({}, state, {
                 viewUpdate: Object.assign({}, state.viewUpdate, {
@@ -336,6 +345,7 @@ const cloudreveApp = (state = [], action) => {
                         torrentDownload:false,
                         getSource:false,
                         resave:false,
+                        copy:false,
                     }),
                 }),
             });