feat(web/input): textarea row

web/src/features/dialog/InputDialog.tsx

@@ -12,6 +12,7 @@ import {
   IColorInput,
   OptionValue,
   IDateInput,
+  ITextarea,
 } from '../../interfaces/dialog';
 import InputField from './components/fields/input';
 import CheckboxField from './components/fields/checkbox';
@@ -21,10 +22,11 @@ import SliderField from './components/fields/slider';
 import { useFieldArray, useForm } from 'react-hook-form';
 import ColorField from './components/fields/color';
 import DateField from './components/fields/date';
+import TextareaField from './components/fields/textarea';
 
 export interface InputProps {
   heading: string;
-  rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider | IColorInput | IDateInput>;
+  rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider | IColorInput | IDateInput | ITextarea>;
   options?: {
     allowCancel?: boolean;
   };
@@ -145,6 +147,13 @@ const InputDialog: React.FC = () => {
                   {row.type === 'date' || row.type === 'date-range' ? (
                     <DateField control={form.control} row={row} index={index} />
                   ) : null}
+                  {row.type === 'textarea' && (
+                    <TextareaField
+                      register={form.register(`test.${index}.value`, { required: row.required })}
+                      row={row}
+                      index={index}
+                    />
+                  )}
                 </React.Fragment>
               );
             })}

web/src/features/dialog/components/fields/textarea.tsx

@@ -0,0 +1,31 @@
+import { Textarea } from '@mantine/core';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { ITextarea } from '../../../../interfaces/dialog';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+
+interface Props {
+  register: UseFormRegisterReturn;
+  row: ITextarea;
+  index: number;
+}
+
+const TextareaField: React.FC<Props> = (props) => {
+  return (
+    <Textarea
+      {...props.register}
+      defaultValue={props.row.default}
+      label={props.row.label}
+      description={props.row.description}
+      icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+      placeholder={props.row.placeholder}
+      disabled={props.row.disabled}
+      withAsterisk={props.row.required}
+      autosize={props.row.autosize}
+      minRows={props.row.min}
+      maxRows={props.row.max}
+    />
+  );
+};
+
+export default TextareaField;

web/src/interfaces/dialog.ts

@@ -81,3 +81,17 @@ export interface IDateInput {
   max?: string;
   icon?: IconProp;
 }
+
+export interface ITextarea {
+  type: 'textarea';
+  label: string;
+  default?: string;
+  disabled?: boolean;
+  description?: string;
+  required?: boolean;
+  placeholder?: string;
+  icon?: IconProp;
+  autosize?: boolean;
+  min?: number;
+  max?: number;
+}