78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
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 { useRecoverFile } from "../-hooks/useRecoverFile";
|
||
import { FileType } from "@/apis/file";
|
||
|
||
type RecoverConfirmDialogProps = {
|
||
open: boolean;
|
||
setOpen: (open: boolean) => void;
|
||
data?: any;
|
||
refetch?: () => void;
|
||
};
|
||
|
||
export function RecoverConfirmDialog({
|
||
open,
|
||
setOpen,
|
||
data,
|
||
refetch,
|
||
}: RecoverConfirmDialogProps) {
|
||
const { recover, recoverIsPending } = useRecoverFile({
|
||
onSuccess() {
|
||
refetch?.();
|
||
setOpen(false);
|
||
},
|
||
});
|
||
|
||
const onSubmit = () => {
|
||
recover(data?.id);
|
||
};
|
||
|
||
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" disabled={recoverIsPending} onClick={onSubmit}>
|
||
{recoverIsPending && <Spinner />}确定
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|