refactor(web/input): separate date and time fields

web/src/features/dialog/InputDialog.tsx

@@ -13,6 +13,7 @@ import {
   OptionValue,
   IDateInput,
   ITextarea,
+  ITimeInput,
 } from '../../interfaces/dialog';
 import InputField from './components/fields/input';
 import CheckboxField from './components/fields/checkbox';
@@ -23,10 +24,11 @@ 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';
+import TimeField from './components/fields/time';
 
 export interface InputProps {
   heading: string;
-  rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider | IColorInput | IDateInput | ITextarea>;
+  rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider | IColorInput | IDateInput | ITextarea | ITimeInput>;
   options?: {
     allowCancel?: boolean;
   };
@@ -146,7 +148,8 @@ const InputDialog: React.FC = () => {
                   {row.type === 'number' && <NumberField control={form.control} row={row} index={index} />}
                   {row.type === 'slider' && <SliderField control={form.control} row={row} index={index} />}
                   {row.type === 'color' && <ColorField control={form.control} row={row} index={index} />}
-                  {row.type === 'date' || row.type === 'date-range' || row.type === 'time' ? (
+                  {row.type === 'time' && <TimeField control={form.control} row={row} index={index} />}
+                  {row.type === 'date' || row.type === 'date-range' ? (
                     <DateField control={form.control} row={row} index={index} />
                   ) : null}
                   {row.type === 'textarea' && (

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

@@ -40,50 +40,32 @@ const DateField: React.FC<Props> = (props) => {
         />
       )}
       {props.row.type === 'date-range' && (
-          <DateRangePicker
+        <DateRangePicker
-            value={
+          value={
-              controller.field.value
+            controller.field.value
-                ? controller.field.value[0]
+              ? controller.field.value[0]
-                  ? controller.field.value.map((date: Date) => new Date(date))
+                ? controller.field.value.map((date: Date) => new Date(date))
-                  : controller.field.value
                 : controller.field.value
-            }
+              : controller.field.value
-            name={controller.field.name}
+          }
-            ref={controller.field.ref}
+          name={controller.field.name}
-            onBlur={controller.field.onBlur}
+          ref={controller.field.ref}
-            onChange={(dates) =>
+          onBlur={controller.field.onBlur}
-              controller.field.onChange(dates.map((date: Date | null) => (date ? date.getTime() : null)))
+          onChange={(dates) =>
-            }
+            controller.field.onChange(dates.map((date: Date | null) => (date ? date.getTime() : null)))
-            label={props.row.label}
+          }
-            description={props.row.description}
+          label={props.row.label}
-            placeholder={props.row.placeholder}
+          description={props.row.description}
-            disabled={props.row.disabled}
+          placeholder={props.row.placeholder}
-            inputFormat="DD/MM/YYYY"
+          disabled={props.row.disabled}
-            withAsterisk={props.row.required}
+          inputFormat="DD/MM/YYYY"
-            clearable={props.row.clearable}
+          withAsterisk={props.row.required}
-            icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
+          clearable={props.row.clearable}
-            minDate={props.row.min ? new Date(props.row.min) : undefined}
+          icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
-            maxDate={props.row.max ? new Date(props.row.max) : undefined}
+          minDate={props.row.min ? new Date(props.row.min) : undefined}
-          />
+          maxDate={props.row.max ? new Date(props.row.max) : undefined}
-        )}
+        />
-
+      )}
-        {props.row.type === 'time' && (
-          <TimeInput 
-            value={controller.field.value ? new Date(controller.field.value) : controller.field.value}
-            name={controller.field.name}
-            ref={controller.field.ref}
-            onBlur={controller.field.onBlur}
-            onChange={(date) => controller.field.onChange(date ? date.getTime() : null)}
-            label={props.row.label}
-            description={props.row.description}
-            placeholder={props.row.placeholder}
-            disabled={props.row.disabled}
-            format={props.row.format || "12"}
-            withAsterisk={props.row.required}
-            clearable={props.row.clearable}
-            icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
-          />
-        )}
     </>
   );
 };

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

@@ -0,0 +1,38 @@
+import { TimeInput } from '@mantine/dates';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Control, useController } from 'react-hook-form';
+import { ITimeInput } from '../../../../interfaces/dialog';
+import { FormValues } from '../../InputDialog';
+
+interface Props {
+  row: ITimeInput;
+  index: number;
+  control: Control<FormValues>;
+}
+
+const TimeField: React.FC<Props> = (props) => {
+  const controller = useController({
+    name: `test.${props.index}.value`,
+    control: props.control,
+    rules: { required: props.row.required },
+  });
+
+  return (
+    <TimeInput
+      value={controller.field.value ? new Date(controller.field.value) : controller.field.value}
+      name={controller.field.name}
+      ref={controller.field.ref}
+      onBlur={controller.field.onBlur}
+      onChange={(date) => controller.field.onChange(date ? date.getTime() : null)}
+      label={props.row.label}
+      description={props.row.description}
+      disabled={props.row.disabled}
+      format={props.row.format || '12'}
+      withAsterisk={props.row.required}
+      clearable={props.row.clearable}
+      icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
+    />
+  );
+};
+
+export default TimeField;

web/src/interfaces/dialog.ts

@@ -70,7 +70,7 @@ export interface IColorInput {
 }
 
 export interface IDateInput {
-  type: 'date' | 'date-range' | 'time';
+  type: 'date' | 'date-range';
   label: string;
   default?: string | [string, string] | true;
   disabled?: boolean;
@@ -84,6 +84,19 @@ export interface IDateInput {
   icon?: IconProp;
 }
 
+export interface ITimeInput {
+  type: 'time';
+  label: string;
+  default?: string;
+  disabled?: boolean;
+  description?: string;
+  format?: '12' | '24';
+  required?: boolean;
+  clearable?: boolean;
+  placeholder?: string;
+  icon?: IconProp;
+}
+
 export interface ITextarea {
   type: 'textarea';
   label: string;