senmesh-zc/src/routes/(user)/my/-components/ShareDialog.tsx

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  FormField,
  FormItem,
  FormControl,
  FormMessage,
  Form,
} from "@/components/ui/form";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Spinner } from "@/components/ui/spinner";
import { useEffect } from "react";
import { useShareFile } from "../-hooks/useShareFile";
import { Label } from "@/components/ui/label";
import { Folder, File } from "lucide-react";
import { FileType } from "@/apis/file";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const formSchema = z.object({
  validDays: z.number().or(z.string()),
});

type ShareDialogProps = {
  open: boolean;
  setOpen: (open: boolean) => void;
  data?: any;
};

export function ShareDialog({ open, setOpen, data }: ShareDialogProps) {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      validDays: 1,
    },
  });

  const { share, shareIsPending } = useShareFile({
    onSuccess: () => {
      setOpen(false);
    },
  });

  const onSubmit = (values: z.infer<typeof formSchema>) => {
    share({
      userFileId: data.id,
      validDays: values.validDays,
    });
  };

  useEffect(() => {
    if (open) {
      form.reset();
    }
  }, [open, data]);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="w-[400px]">
        <DialogHeader>
          <DialogTitle>分享文件</DialogTitle>
        </DialogHeader>
        <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>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
            <FormField
              control={form.control}
              name="validDays"
              render={({ field }) => (
                <FormItem>
                  <Label>有效期</Label>
                  <FormControl>
                    <Select
                      onValueChange={field.onChange}
                      value={field.value.toString()}
                    >
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="请选择有效期" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectGroup>
                          <SelectItem value="1">1天</SelectItem>
                          <SelectItem value="3">3天</SelectItem>
                          <SelectItem value="5">5天</SelectItem>
                          <SelectItem value="7">7天</SelectItem>
                          <SelectItem value="15">15天</SelectItem>
                        </SelectGroup>
                      </SelectContent>
                    </Select>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <DialogFooter>
              <DialogClose asChild>
                <Button variant="outline">取消</Button>
              </DialogClose>
              <Button type="submit" disabled={shareIsPending}>
                {shareIsPending && <Spinner />}确定
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}