chore: use the same disabled api from switchField

bleu · Mar 14, 2024 · 2c2c68e · 2c2c68e
1 parent 5b87ed7
commit 2c2c68e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 37 deletions.
diff --git a/src/components/FormBuilder/fields/InputField.tsx b/src/components/FormBuilder/fields/InputField.tsx
@@ -34,6 +34,11 @@ export const InputField = withConditional<InputFieldProps>(
       e.stopPropagation();
     };
 
+    const disabled =
+      typeof field.disabled === "function"
+        ? field.disabled(form.getValues())
+        : field.disabled;
+
     return (
       <FormField
         control={form.control}
@@ -56,7 +61,7 @@ export const InputField = withConditional<InputFieldProps>(
               <Input
                 placeholder={field.placeholder}
                 {...formField}
-                disabled={field.disabled ? (field.disabled as boolean) : false}
+                disabled={disabled}
                 type={field.mode}
                 onWheel={(event) =>
                   field.mode === "number" &&

diff --git a/src/components/FormBuilder/fields/selects/SelectField.tsx b/src/components/FormBuilder/fields/selects/SelectField.tsx
@@ -20,41 +20,48 @@ export interface SelectFieldProps extends BaseField {
 }
 
 export const SelectField = withConditional<SelectFieldProps>(
-  ({ form, field }) => (
-    <FormField
-      control={form.control}
-      name={field.name}
-      rules={field.required ? { required: true } : undefined}
-      render={({ field: formField }) => (
-        <FormItem className="w-full">
-          <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
-          <FormDescription>{field.description}</FormDescription>
-          <Select.SelectRoot
-            onValueChange={formField.onChange}
-            defaultValue={String(formField.value)}
-            name={field.name}
-            disabled={field.disabled ? (field.disabled as boolean) : false}
-          >
-            <FormControl>
-              <Select.SelectTrigger className="h-10 w-full rounded-md border dark:border-2 shadow-none">
-                <Select.SelectValue placeholder={field.placeholder} />
-              </Select.SelectTrigger>
-            </FormControl>
-            <Select.SelectContent className="z-[10000]">
-              {field.options.map((option) => (
-                <Select.SelectItem
-                  key={String(option.value)}
-                  value={String(option.value)}
-                >
-                  {option.label}
-                </Select.SelectItem>
-              ))}
-            </Select.SelectContent>
-          </Select.SelectRoot>
+  ({ form, field }) => {
+    const disabled =
+      typeof field.disabled === "function"
+        ? field.disabled(form.getValues())
+        : field.disabled;
 
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-  )
+    return (
+      <FormField
+        control={form.control}
+        name={field.name}
+        rules={field.required ? { required: true } : undefined}
+        render={({ field: formField }) => (
+          <FormItem className="w-full">
+            <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
+            <FormDescription>{field.description}</FormDescription>
+            <Select.SelectRoot
+              onValueChange={formField.onChange}
+              defaultValue={String(formField.value)}
+              name={field.name}
+              disabled={disabled}
+            >
+              <FormControl>
+                <Select.SelectTrigger className="h-10 w-full rounded-md border dark:border-2 shadow-none">
+                  <Select.SelectValue placeholder={field.placeholder} />
+                </Select.SelectTrigger>
+              </FormControl>
+              <Select.SelectContent className="z-[10000]">
+                {field.options.map((option) => (
+                  <Select.SelectItem
+                    key={String(option.value)}
+                    value={String(option.value)}
+                  >
+                    {option.label}
+                  </Select.SelectItem>
+                ))}
+              </Select.SelectContent>
+            </Select.SelectRoot>
+
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    );
+  }
 );