From 9007a39139751b6f7c4527bb26f17d722e43e17e Mon Sep 17 00:00:00 2001
From: Oscar Gonzalez <oscarf.gonzalezq@gmail.com>
Date: Sat, 30 Nov 2024 02:48:42 -0400
Subject: [PATCH] Add new FormFieldTypes

---
 src/Form/index.tsx | 67 +++++++++++++++++++++++++++++++++++++++++++---
 src/Form/styled.ts | 37 +++++++++++++++++++++++--
 src/Form/utils.ts  |  9 +++++++
 src/constants.ts   |  2 ++
 4 files changed, 109 insertions(+), 6 deletions(-)

diff --git a/src/Form/index.tsx b/src/Form/index.tsx
index 04cbcaf..a7da955 100644
--- a/src/Form/index.tsx
+++ b/src/Form/index.tsx
@@ -1,12 +1,24 @@
-import { Button, DatePicker, Flex, NumberInput, Select, SelectItem, Text, TextInput } from '@tremor/react';
-import React, { useState } from 'react';
+import {
+    Button,
+    DatePicker,
+    Flex,
+    MultiSelect,
+    MultiSelectItem,
+    NumberInput,
+    Select,
+    SelectItem,
+    Text,
+    TextInput,
+    Textarea,
+} from '@tremor/react';
+import { useState } from 'react';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { VirtualSelect } from '../VirtualSelect';
 import { FormFieldTypes } from '../constants';
 import { StyledFieldGroup, StyledFormContainer } from '../styled';
 import type { FormSettings } from './formSettings';
-import { StyledCheckbox } from './styled';
-import { extractData, getFieldBaseProps, onSelectChange } from './utils';
+import { StyledCheckbox, StyledFileInput } from './styled';
+import { extractData, getFieldBaseProps, onMultiSelectChange, onSelectChange } from './utils';
 
 export const Form = <T, TData>({ initialData, onSave, onCancel, saveLabel, columns = 3 }: FormSettings<T, TData>) => {
     const {
@@ -122,10 +134,57 @@ export const Form = <T, TData>({ initialData, onSave, onCancel, saveLabel, colum
                                             )}
                                         />
                                     );
+                                case FormFieldTypes.MultiSelect:
+                                    return (
+                                        <Controller
+                                            name={`table.${index}.value`}
+                                            rules={{
+                                                required: !updatedField.notRequired,
+                                            }}
+                                            control={control}
+                                            render={({ field }) => (
+                                                <MultiSelect
+                                                    value={
+                                                        initialData[index].options
+                                                            ?.filter((c) =>
+                                                                field.value && (field.value as string[]).length > 0
+                                                                    ? (field.value as string[]).includes(
+                                                                          c.value.toString(),
+                                                                      )
+                                                                    : undefined,
+                                                            )
+                                                            ?.map((c) => String(c.value)) ?? []
+                                                    }
+                                                    onValueChange={(e) => onMultiSelectChange(e, field.onChange)}
+                                                    disabled={disable || updatedField.disabled}
+                                                    className='my-1'
+                                                    ref={field.ref}
+                                                >
+                                                    {(initialData[index].options ?? []).map((u) => (
+                                                        <MultiSelectItem key={u.value} value={u.value.toString()}>
+                                                            {u.label}
+                                                        </MultiSelectItem>
+                                                    ))}
+                                                </MultiSelect>
+                                            )}
+                                        />
+                                    );
                                 case FormFieldTypes.Checkbox:
                                     return <StyledCheckbox {...fieldProps} />;
                                 case FormFieldTypes.Number:
                                     return <NumberInput {...fieldProps} />;
+                                case FormFieldTypes.TextArea:
+                                    return <Textarea {...fieldProps} className='max-w-full' />;
+                                case FormFieldTypes.File:
+                                    return (
+                                        <StyledFileInput
+                                            id='file'
+                                            name='file'
+                                            type='file'
+                                            className='mt-1'
+                                            accept='.pdf'
+                                        />
+                                    );
                                 default:
                                     return <TextInput {...fieldProps} type='text' />;
                             }
diff --git a/src/Form/styled.ts b/src/Form/styled.ts
index 2b10167..4ae8df3 100644
--- a/src/Form/styled.ts
+++ b/src/Form/styled.ts
@@ -11,9 +11,9 @@ const InputBase = tw.input`
     focus:bg-gray-200
     disabled:text-[#999999]
     focus:outline-none
-    text-tremor-content 
+    text-tremor-content
     dark:text-dark-tremor-content
-    bg-tremor-background 
+    bg-tremor-background
     dark:bg-dark-tremor-background
     text-xs
 `;
@@ -25,3 +25,36 @@ export const StyledCheckbox = tw(InputBase)`
     mr-4
     ml-3
 `;
+
+export const StyledFileInput = tw(InputBase)`
+    text-sm
+    rounded-lg
+    file:-my-1.5
+    file:-ml-2.5
+    file:h-[34px]
+    file:cursor-pointer
+    file:rounded-l-tremor-small
+    file:rounded-r-none
+    file:border-0
+    file:px-3
+    file:py-1.5
+    file:text-tremor-default
+    file:outline-none
+    file:border-solid
+    file:border-tremor-border
+    file:bg-tremor-background-muted
+    file:text-tremor-content
+    hover:file:bg-tremor-background-subtle/80
+    file:dark:border-dark-tremor-border
+    file:dark:bg-dark-tremor-background-muted
+    hover:file:dark:bg-dark-tremor-background-subtle/30
+    file:[border-inline-end-width:1px]
+    file:[margin-inline-end:0.75rem]
+    focus:outline-none
+    disabled:pointer-events-none
+    file:disabled:pointer-events-none
+    file:disabled:bg-tremor-background-subtle
+    file:disabled:text-tremor-content
+    file:disabled:dark:border-gray-700
+    file:disabled:dark:bg-dark-tremor-background-subtle
+`;
diff --git a/src/Form/utils.ts b/src/Form/utils.ts
index a2c10b3..1a3ebfe 100644
--- a/src/Form/utils.ts
+++ b/src/Form/utils.ts
@@ -28,3 +28,12 @@ export const onSelectChange = (event: string, callback: (x: string) => void, def
     callback(event);
     if (defaultCallback) defaultCallback(event);
 };
+
+export const onMultiSelectChange = (
+    event: string[],
+    callback: (x: string[]) => void,
+    defaultCallback?: (x: string[]) => void,
+) => {
+    callback(event);
+    if (defaultCallback) defaultCallback(event);
+};
diff --git a/src/constants.ts b/src/constants.ts
index 90c8bbd..20b9caa 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -37,6 +37,8 @@ export enum FormFieldTypes {
     VirtualSelect = 'virtualselect',
     Checkbox = 'checkbox',
     TextArea = 'textarea',
+    MultiSelect = 'multiselect',
+    File = 'file',
 }
 
 export type ClassNameComponent = {