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

@@ -66,24 +66,6 @@ const DateField: React.FC<Props> = (props) => {
           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;