Update options

unosquare · Jun 4, 2024 · 279ba48 · 279ba48
1 parent 8b1e542
commit 279ba48
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/sample/index.tsx b/sample/index.tsx
@@ -106,6 +106,12 @@ type onlineDto = {
     body: string;
 };
 
+const selectOptions = [
+    { label: 'USA', value: 'USA' },
+    { label: 'Canada', value: 'Canada' },
+    { label: 'Mexico', value: 'Mexico' },
+];
+
 const fields = [
     {
         label: 'Name',
@@ -120,11 +126,14 @@ const fields = [
         label: 'Country',
         name: 'country',
         type: FormFieldTypes.VirtualSelect,
-        options: [
-            { label: 'USA', value: 'USA' },
-            { label: 'Canada', value: 'Canada' },
-            { label: 'Mexico', value: 'Mexico' },
-        ]
+        options: selectOptions
+    },
+    {
+        label: 'Birth Country',
+        name: 'birthCountry',
+        type: FormFieldTypes.Select,
+        options: selectOptions,
+        notRequired: true,
     },
     {
         label: 'Can Drive?',
@@ -135,6 +144,8 @@ const fields = [
         label: 'License Date',
         name: 'licenseDate',
         type: FormFieldTypes.Date,
+        value: '2021-01-01',
+        notRequired: true,
     },
 ];
 

diff --git a/src/Form/index.tsx b/src/Form/index.tsx
@@ -55,7 +55,7 @@ export const Form = <T, TData>({ initialData, onSave, onCancel, columns = 3 }: F
                                             control={control}
                                             render={({ field }) => (
                                                 <DatePicker
-                                                    value={new Date(String(field.value))}
+                                                    value={new Date(field.value as string)}
                                                     onValueChange={field.onChange}
                                                     disabled={disable || updatedField.disabled}
                                                     enableClear={false}
@@ -73,11 +73,9 @@ export const Form = <T, TData>({ initialData, onSave, onCancel, columns = 3 }: F
                                             control={control}
                                             render={({ field }) => (
                                                 <VirtualSelect
-                                                    value={
-                                                        initialData[index].options?.find(
-                                                            (c) => c.value.toString() === field.value,
-                                                        )?.value
-                                                    }
+                                                    value={initialData[index].options
+                                                        ?.find((c) => c.value.toString() === field.value)
+                                                        ?.value?.toString()}
                                                     onValueChange={(e) =>
                                                         onSelectChange(e, field.onChange, item.onChange)
                                                     }
@@ -98,11 +96,9 @@ export const Form = <T, TData>({ initialData, onSave, onCancel, columns = 3 }: F
                                             render={({ field }) => (
                                                 <Select
                                                     enableClear={false}
-                                                    value={
-                                                        initialData[index].options?.find(
-                                                            (c) => c.value.toString() === field.value,
-                                                        )?.value
-                                                    }
+                                                    value={initialData[index].options
+                                                        ?.find((c) => c.value.toString() === field.value)
+                                                        ?.value?.toString()}
                                                     onValueChange={(e) =>
                                                         onSelectChange(e, field.onChange, item.onChange)
                                                     }
@@ -111,7 +107,7 @@ export const Form = <T, TData>({ initialData, onSave, onCancel, columns = 3 }: F
                                                     ref={field.ref}
                                                 >
                                                     {(initialData[index].options ?? []).map((u) => (
-                                                        <SelectItem key={u.value} value={u.value}>
+                                                        <SelectItem key={u.value} value={u.value.toString()}>
                                                             {u.label}
                                                         </SelectItem>
                                                     ))}

diff --git a/src/constants.ts b/src/constants.ts
@@ -92,7 +92,7 @@ export interface FormField<T> {
     label: string;
     value?: T;
     type?: FormFieldTypes;
-    options?: ReactSelectOption<string>[];
+    options?: ReactSelectOption<string | number>[] | undefined;
     onChange?: (e: string) => void;
     disabled?: boolean;
     notRequired?: boolean;