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

61
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 { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@ -7,15 +8,8 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } 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 { useTranslation } from "react-i18next";
import { z } from "zod";
type TextEntryDialogProps = { type TextEntryDialogProps = {
open: boolean; open: boolean;
title: string; title: string;
@ -35,36 +29,8 @@ export default function TextEntryDialog({
defaultValue = "", defaultValue = "",
allowEmpty = false, allowEmpty = false,
}: TextEntryDialogProps) { }: TextEntryDialogProps) {
const formSchema = z.object({
text: z.string(),
});
const { t } = useTranslation("components/dialog"); 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 ( return (
<Dialog open={open} defaultOpen={false} onOpenChange={setOpen}> <Dialog open={open} defaultOpen={false} onOpenChange={setOpen}>
<DialogContent> <DialogContent>
@ -72,23 +38,11 @@ export default function TextEntryDialog({
<DialogTitle>{title}</DialogTitle> <DialogTitle>{title}</DialogTitle>
{description && <DialogDescription>{description}</DialogDescription>} {description && <DialogDescription>{description}</DialogDescription>}
</DialogHeader> </DialogHeader>
<Form {...form}> <TextEntry
<form onSubmit={form.handleSubmit(onSubmit)}> defaultValue={defaultValue}
<FormField allowEmpty={allowEmpty}
control={form.control} onSave={onSave}
name="text" >
render={() => (
<FormItem>
<FormControl>
<Input
className="aspect-video h-8 w-full"
type="text"
{...fileRef}
/>
</FormControl>
</FormItem>
)}
/>
<DialogFooter className="pt-4"> <DialogFooter className="pt-4">
<Button type="button" onClick={() => setOpen(false)}> <Button type="button" onClick={() => setOpen(false)}>
{t("button.cancel", { ns: "common" })} {t("button.cancel", { ns: "common" })}
@ -97,8 +51,7 @@ export default function TextEntryDialog({
{t("button.save", { ns: "common" })} {t("button.save", { ns: "common" })}
</Button> </Button>
</DialogFooter> </DialogFooter>
</form> </TextEntry>
</Form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );

50
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 { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@ -7,12 +8,6 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } 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 = { type UploadImageDialogProps = {
open: boolean; open: boolean;
@ -28,28 +23,6 @@ export default function UploadImageDialog({
setOpen, setOpen,
onSave, onSave,
}: UploadImageDialogProps) { }: 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 ( return (
<Dialog open={open} defaultOpen={false} onOpenChange={setOpen}> <Dialog open={open} defaultOpen={false} onOpenChange={setOpen}>
<DialogContent> <DialogContent>
@ -57,31 +30,14 @@ export default function UploadImageDialog({
<DialogTitle>{title}</DialogTitle> <DialogTitle>{title}</DialogTitle>
{description && <DialogDescription>{description}</DialogDescription>} {description && <DialogDescription>{description}</DialogDescription>}
</DialogHeader> </DialogHeader>
<Form {...form}> <ImageEntry onSave={onSave}>
<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"> <DialogFooter className="pt-4">
<Button onClick={() => setOpen(false)}>Cancel</Button> <Button onClick={() => setOpen(false)}>Cancel</Button>
<Button variant="select" type="submit"> <Button variant="select" type="submit">
Save Save
</Button> </Button>
</DialogFooter> </DialogFooter>
</form> </ImageEntry>
</Form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );