fix: form not correctly updating based on values (#572)
* fix: form not correctly updating based on values Closes #549 * chore: pr review
This commit is contained in:
parent
cb92d36c95
commit
b916df7736
6 changed files with 23 additions and 22 deletions
|
|
@ -111,7 +111,7 @@ export const CreateNotificationForm = ({ onSubmit, mode = "create", initialValue
|
|||
name: "",
|
||||
},
|
||||
resetOptions: {
|
||||
keepDefaultValues: true,
|
||||
keepDefaultValues: false,
|
||||
keepDirtyValues: false,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import type { UseFormReturn } from "react-hook-form";
|
||||
import { useWatch, type UseFormReturn } from "react-hook-form";
|
||||
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
|
||||
import { Input } from "~/client/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
|
||||
|
|
@ -49,7 +49,8 @@ ${body}`;
|
|||
};
|
||||
|
||||
export const GenericForm = ({ form }: Props) => {
|
||||
const watchedValues = form.watch();
|
||||
const watchedValues = useWatch({ control: form.control });
|
||||
const useJson = useWatch({ control: form.control, name: "useJson" });
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -126,7 +127,7 @@ export const GenericForm = ({ form }: Props) => {
|
|||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center space-x-3">
|
||||
<FormControl>
|
||||
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
||||
<Checkbox checked={field.value} onCheckedChange={(checked) => field.onChange(checked)} />
|
||||
</FormControl>
|
||||
<div className="space-y-1 leading-none">
|
||||
<FormLabel>Use JSON Template</FormLabel>
|
||||
|
|
@ -135,7 +136,7 @@ export const GenericForm = ({ form }: Props) => {
|
|||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{form.watch("useJson") && (
|
||||
{useJson && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import type { UseFormReturn } from "react-hook-form";
|
||||
import { useWatch, type UseFormReturn } from "react-hook-form";
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
|
|
@ -22,10 +22,10 @@ type Props = {
|
|||
};
|
||||
|
||||
export const AdvancedForm = ({ form }: Props) => {
|
||||
const insecureTls = form.watch("insecureTls");
|
||||
const cacert = form.watch("cacert");
|
||||
const uploadLimitEnabled = form.watch("uploadLimit.enabled");
|
||||
const downloadLimitEnabled = form.watch("downloadLimit.enabled");
|
||||
const insecureTls = useWatch({ control: form.control, name: "insecureTls" });
|
||||
const cacert = useWatch({ control: form.control, name: "cacert" });
|
||||
const uploadLimitEnabled = useWatch({ control: form.control, name: "uploadLimit.enabled" });
|
||||
const downloadLimitEnabled = useWatch({ control: form.control, name: "downloadLimit.enabled" });
|
||||
|
||||
return (
|
||||
<Collapsible>
|
||||
|
|
@ -164,6 +164,7 @@ export const AdvancedForm = ({ form }: Props) => {
|
|||
onValueChange={field.onChange}
|
||||
defaultValue={field.value || "Mbps"}
|
||||
value={field.value || "Mbps"}
|
||||
disabled={!downloadLimitEnabled}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger className="text-xs">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import type { UseFormReturn } from "react-hook-form";
|
||||
import { useWatch, type UseFormReturn } from "react-hook-form";
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
|
|
@ -17,6 +17,8 @@ type Props = {
|
|||
};
|
||||
|
||||
export const SftpRepositoryForm = ({ form }: Props) => {
|
||||
const skipHostKeyCheck = useWatch({ control: form.control, name: "skipHostKeyCheck" });
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormField
|
||||
|
|
@ -114,7 +116,7 @@ export const SftpRepositoryForm = ({ form }: Props) => {
|
|||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{!form.watch("skipHostKeyCheck") && (
|
||||
{!skipHostKeyCheck && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="knownHosts"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import type { UseFormReturn } from "react-hook-form";
|
||||
import { useWatch, type UseFormReturn } from "react-hook-form";
|
||||
import type { FormValues } from "../create-volume-form";
|
||||
import {
|
||||
FormControl,
|
||||
|
|
@ -18,6 +18,8 @@ type Props = {
|
|||
};
|
||||
|
||||
export const SFTPForm = ({ form }: Props) => {
|
||||
const skipHostKeyCheck = useWatch({ control: form.control, name: "skipHostKeyCheck" });
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormField
|
||||
|
|
@ -132,7 +134,7 @@ export const SFTPForm = ({ form }: Props) => {
|
|||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{!form.watch("skipHostKeyCheck") && (
|
||||
{!skipHostKeyCheck && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="knownHosts"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import type { UseFormReturn } from "react-hook-form";
|
||||
import { useWatch, type UseFormReturn } from "react-hook-form";
|
||||
import type { FormValues } from "../create-volume-form";
|
||||
import {
|
||||
FormControl,
|
||||
|
|
@ -17,7 +17,7 @@ type Props = {
|
|||
};
|
||||
|
||||
export const SMBForm = ({ form }: Props) => {
|
||||
const guest = form.watch("guest");
|
||||
const guest = useWatch({ control: form.control, name: "guest" });
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -83,12 +83,7 @@ export const SMBForm = ({ form }: Props) => {
|
|||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="admin"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
disabled={guest}
|
||||
/>
|
||||
<Input placeholder="admin" value={field.value} onChange={field.onChange} disabled={guest} />
|
||||
</FormControl>
|
||||
<FormDescription>Username for SMB authentication.</FormDescription>
|
||||
<FormMessage />
|
||||
|
|
|
|||
Loading…
Reference in a new issue