administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-05 13:07:44 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Simplify dialog

Browse Source
This commit is contained in:
Nicolas Mowen 2025-03-17 09:42:17 -06:00
parent 1d72516296
commit 1fbdbd05c1
2 changed files with 24 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
web/src/components/overlay/dialog/TextEntryDialog.tsx
View File

@ -1,3 +1,4 @@
import TextEntry from "@/components/input/TextEntry";
import { Button } from "@/components/ui/button";
import {
Dialog,
@ -7,15 +8,8 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { zodResolver } from "@hookform/resolvers/zod";
import { useCallback, useEffect } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { z } from "zod";
type TextEntryDialogProps = {
open: boolean;
title: string;
@ -35,36 +29,8 @@ export default function TextEntryDialog({
defaultValue = "",
allowEmpty = false,
}: TextEntryDialogProps) {
const formSchema = z.object({
text: z.string(),
});
const { t } = useTranslation("components/dialog");
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: { text: defaultValue },
});
const fileRef = form.register("text");
// upload handler
const onSubmit = useCallback(
(data: z.infer<typeof formSchema>) => {
if (!allowEmpty && !data["text"]) {
return;
}
onSave(data["text"]);
},
[onSave, allowEmpty],
);
useEffect(() => {
if (open) {
form.reset({ text: defaultValue });
}
}, [open, defaultValue, form]);
return (
<Dialog open={open} defaultOpen={false} onOpenChange={setOpen}>
<DialogContent>
@ -72,33 +38,20 @@ export default function TextEntryDialog({
<DialogTitle>{title}</DialogTitle>
{description && <DialogDescription>{description}</DialogDescription>}
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<FormField
control={form.control}
name="text"
render={() => (
<FormItem>
<FormControl>
<Input
className="aspect-video h-8 w-full"
type="text"
{...fileRef}
/>
</FormControl>
</FormItem>
)}
/>
<DialogFooter className="pt-4">
<Button type="button" onClick={() => setOpen(false)}>
{t("button.cancel", { ns: "common" })}
</Button>
<Button variant="select" type="submit">
{t("button.save", { ns: "common" })}
</Button>
</DialogFooter>
</form>
</Form>
<TextEntry
defaultValue={defaultValue}
allowEmpty={allowEmpty}
onSave={onSave}
>
<DialogFooter className="pt-4">
<Button type="button" onClick={() => setOpen(false)}>
{t("button.cancel", { ns: "common" })}
</Button>
<Button variant="select" type="submit">
{t("button.save", { ns: "common" })}
</Button>
</DialogFooter>
</TextEntry>
</DialogContent>
</Dialog>
);

62
web/src/components/overlay/dialog/UploadImageDialog.tsx
View File

@ -1,3 +1,4 @@
import ImageEntry from "@/components/input/ImageEntry";
import { Button } from "@/components/ui/button";
import {
Dialog,
@ -7,12 +8,6 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { zodResolver } from "@hookform/resolvers/zod";
import { useCallback } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
type UploadImageDialogProps = {
open: boolean;
@ -28,28 +23,6 @@ export default function UploadImageDialog({
setOpen,
onSave,
}: UploadImageDialogProps) {
const formSchema = z.object({
file: z.instanceof(FileList, { message: "Please select an image file." }),
});
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
});
const fileRef = form.register("file");
// upload handler
const onSubmit = useCallback(
(data: z.infer<typeof formSchema>) => {
if (!data["file"] || Object.keys(data.file).length == 0) {
return;
}
onSave(data["file"]["0"]);
},
[onSave],
);
return (
<Dialog open={open} defaultOpen={false} onOpenChange={setOpen}>
<DialogContent>
@ -57,31 +30,14 @@ export default function UploadImageDialog({
<DialogTitle>{title}</DialogTitle>
{description && <DialogDescription>{description}</DialogDescription>}
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<FormField
control={form.control}
name="file"
render={() => (
<FormItem>
<FormControl>
<Input
className="aspect-video h-40 w-full"
type="file"
{...fileRef}
/>
</FormControl>
</FormItem>
)}
/>
<DialogFooter className="pt-4">
<Button onClick={() => setOpen(false)}>Cancel</Button>
<Button variant="select" type="submit">
Save
</Button>
</DialogFooter>
</form>
</Form>
<ImageEntry onSave={onSave}>
<DialogFooter className="pt-4">
<Button onClick={() => setOpen(false)}>Cancel</Button>
<Button variant="select" type="submit">
Save
</Button>
</DialogFooter>
</ImageEntry>
</DialogContent>
</Dialog>
);