init

src/components/remove-file-dialog.tsx

@@ -0,0 +1,86 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/spinner";
+import { Folder, File } from "lucide-react";
+import { useRemoveFile } from "@/hooks/use-remove-file";
+import { FileStatus, FileType } from "@/apis/file";
+
+type RemoveFileDialogProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  data?: any;
+  refetch?: () => void;
+};
+
+export function RemoveFileDialog({
+  open,
+  setOpen,
+  data,
+  refetch,
+}: RemoveFileDialogProps) {
+  const { remove, removeIsPending } = useRemoveFile({
+    onSuccess() {
+      refetch?.();
+      setOpen(false);
+    },
+  });
+
+  const onSubmit = () => {
+    remove({
+      id: data?.id,
+      oldStatus: data?.fileStatus,
+      newStatus: FileStatus.INVALID,
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="w-[400px]">
+        <DialogHeader>
+          <DialogTitle>
+            您确定要删除该{data?.fileType === FileType.FILE ? "文件" : "目录"}？
+          </DialogTitle>
+          {data?.fileType === FileType.FILE ? (
+            <DialogDescription>
+              删除后文件将被放入到回收站中，可从回收站中恢复
+            </DialogDescription>
+          ) : (
+            <DialogDescription>
+              目录下的文件也会一并被删除，删除的目录将会放入到回收站中，可从回收站中恢复
+            </DialogDescription>
+          )}
+          <div className="mt-1 flex items-center gap-1 text-sm p-2 rounded-md bg-gray-50">
+          {data?.fileType === FileType.FILE ? (
+            <File size={16} className="text-primary flex-none" />
+          ) : (
+            <Folder size={16} className="text-amber-500 flex-none" />
+          )}
+          <span className="break-all">{data?.fileName}</span>
+        </div>
+        </DialogHeader>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">取消</Button>
+          </DialogClose>
+          <Button
+            type="submit"
+            variant="destructive"
+            disabled={removeIsPending}
+            onClick={onSubmit}
+          >
+            {removeIsPending && <Spinner />}确定
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}