From f4cacfa040907bec12fe6a8cf244d07accccfaf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=AE=E5=87=89?= Date: Thu, 20 Jan 2022 20:01:58 +0800 Subject: [PATCH] :sparkler: finish move --- src/hooks/useApi.ts | 7 + src/i18n/locales/zh.ts | 10 +- src/pages/list/layout/files/contextmenu.tsx | 13 ++ src/pages/list/layout/files/menus/move.tsx | 153 ++++++++++++++++++++ src/utils/file.ts | 6 +- 5 files changed, 185 insertions(+), 4 deletions(-) create mode 100644 src/pages/list/layout/files/menus/move.tsx diff --git a/src/hooks/useApi.ts b/src/hooks/useApi.ts index 888c9d8..a58c796 100644 --- a/src/hooks/useApi.ts +++ b/src/hooks/useApi.ts @@ -49,6 +49,13 @@ const useApi = () => { const path_ = pathJoin(path, old); return admin.post("rename", { name, path: path_ }); }, + move: (names: string[], dir: string) => { + return admin.post("move",{ + src_dir: path, + dst_dir: dir, + names + }) + } }; }; diff --git a/src/i18n/locales/zh.ts b/src/i18n/locales/zh.ts index 7aaf783..917f03f 100644 --- a/src/i18n/locales/zh.ts +++ b/src/i18n/locales/zh.ts @@ -120,8 +120,8 @@ const zh = { "Leaving the page will interrupt the download": "离开页面会中断下载", "Frontend": "前端", "Backend": "后端", - "Package download {{number}} files": "打包下载{{number}}个文件", - "Copy links of {{number}} files": "复制{{number}}个文件的直链", + "Package download {{number}} files": "打包下载 {{number}} 个文件", + "Copy links of {{number}} files": "复制 {{number}} 个文件的直链", "Upload file": "上传文件", "Uploading": "正在上传", "upload": "上传", @@ -130,13 +130,17 @@ const zh = { "Confirmation!": "确认！", "Are you sure you want to delete \"{{name}}\" ?": "确定要删除“{{name}}”吗？", "Confirm": "确认", - "Delete {{number}} files": "删除{{number}}个文件", + "Delete {{number}} files": "删除 {{number}} 个文件", "Copy": "复制", "Paste": "粘贴", "New folder": "新建文件夹", "Folder name": "文件夹名称", "Rename": "重命名", "New name": "新名称", + "Move": "移动", + "Select folder": "选择文件夹", + "Move {{number}} files": "移动 {{number}} 个文件", + "Please select a folder": "请选择一个文件夹", } export default zh diff --git a/src/pages/list/layout/files/contextmenu.tsx b/src/pages/list/layout/files/contextmenu.tsx index 4553207..eebcd7f 100644 --- a/src/pages/list/layout/files/contextmenu.tsx +++ b/src/pages/list/layout/files/contextmenu.tsx @@ -31,6 +31,7 @@ import { useLocation } from "react-router-dom"; import bus from "../../../../utils/event-bus"; import NewFolder, { NewFolderInput } from "./menus/new-folder"; import Rename, { RenameInput } from "./menus/rename"; +import Move, { MoveSelect } from "./menus/move"; export const MENU_ID = "list-menu"; @@ -74,6 +75,13 @@ const ContextMenu = () => { }} /> )} + {isOpen.move && ( + { + setIsOpen({ ...isOpen, move: false }); + }} + /> + )} { @@ -104,6 +112,11 @@ const ContextMenu = () => { setIsOpen({ ...isOpen, rename: true }); }} /> + { + setIsOpen({ ...isOpen, move: true }); + }} + /> { diff --git a/src/pages/list/layout/files/menus/move.tsx b/src/pages/list/layout/files/menus/move.tsx new file mode 100644 index 0000000..e0259b6 --- /dev/null +++ b/src/pages/list/layout/files/menus/move.tsx @@ -0,0 +1,153 @@ +import { + Icon, + Flex, + useDisclosure, + useToast, + useColorModeValue, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalFooter, + ModalBody, + ModalCloseButton, + Button, +} from "@chakra-ui/react"; +import React, { useContext } from "react"; +import { Item } from "react-contexify"; +import "react-contexify/dist/ReactContexify.css"; +import { useTranslation } from "react-i18next"; +import FolderTree from "../../../../../components/folder-tree"; +import useApi from "../../../../../hooks/useApi"; +import { File, IContext } from "../../../context"; +import { MdDriveFileMove } from "react-icons/md"; +import bus from "../../../../../utils/event-bus"; + +let currentFile: File = { + name: "", + size: 0, + type: 0, + driver: "", + updated_at: "", + thumbnail: "", + url: "", +}; + +const Move = (props: { onOpen: () => void }) => { + const { loggedIn, multiSelect, selectFiles } = useContext(IContext); + const { t } = useTranslation(); + if (!loggedIn) return null; + return ( + { + currentFile = (props as any).propsFromTrigger; + console.log(currentFile); + props.onOpen(); + }} + > + + + {multiSelect + ? t("Move {{number}} files", { + number: selectFiles.length, + }) + : t("Move")} + + + ); +}; + +export const MoveSelect = (props: { onClose: () => void }) => { + const { multiSelect, selectFiles } = useContext(IContext); + const { isOpen, onClose, onOpen } = useDisclosure({ + defaultIsOpen: true, + }); + const toast = useToast(); + const { t } = useTranslation(); + const [dir, setDir] = React.useState(""); + const { move } = useApi(); + const [loading, setLoading] = React.useState(false); + return ( + { + props.onClose(); + onClose(); + }} + > + + + {t("Select folder")} + + + { + setDir(dir); + }} + /> + + + + + + + + ); +}; + +export default Move; diff --git a/src/utils/file.ts b/src/utils/file.ts index ce4c895..d9fc19f 100644 --- a/src/utils/file.ts +++ b/src/utils/file.ts @@ -13,4 +13,8 @@ export function getFileSize(size: number){ if (size < Math.pow(num, 4)) return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T -} \ No newline at end of file +} + +export const pathJoin = (...paths: string[]) => { + return paths.join("/").replace(/\/{2,}/g, "/"); +}; \ No newline at end of file