feat(web/input): date input

web/src/features/dialog/InputDialog.tsx

@@ -1,9 +1,18 @@
-import { Group, Modal, Button, Stack, SelectItem } from '@mantine/core';
-import React, { FormEvent, useRef } from 'react';
+import { Group, Modal, Button, Stack } from '@mantine/core';
+import React from 'react';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { useLocales } from '../../providers/LocaleProvider';
 import { fetchNui } from '../../utils/fetchNui';
-import { IInput, ICheckbox, ISelect, INumber, ISlider, IColorInput, OptionValue } from '../../interfaces/dialog';
+import {
+  IInput,
+  ICheckbox,
+  ISelect,
+  INumber,
+  ISlider,
+  IColorInput,
+  OptionValue,
+  IDateInput,
+} from '../../interfaces/dialog';
 import InputField from './components/fields/input';
 import CheckboxField from './components/fields/checkbox';
 import SelectField from './components/fields/select';
@@ -11,10 +20,11 @@ import NumberField from './components/fields/number';
 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';
 
 export interface InputProps {
   heading: string;
-  rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider | IColorInput>;
+  rows: Array<IInput | ICheckbox | ISelect | INumber | ISlider | IColorInput | IDateInput>;
   options?: {
     allowCancel?: boolean;
   };
@@ -44,7 +54,17 @@ const InputDialog: React.FC = () => {
     setFields(data);
     setVisible(true);
     data.rows.forEach((row, index) => {
-      fieldForm.insert(index, { value: row.type !== 'checkbox' ? row.default : row.checked } || { value: null });
+      fieldForm.insert(
+        index,
+        {
+          value:
+            row.type !== 'checkbox'
+              ? row.type === 'date' && row.default
+                ? new Date(row.default)
+                : row.default
+              : row.checked,
+        } || { value: null }
+      );
       // Backwards compat with new Select data type
       if (row.type === 'select') {
         row.options = row.options.map((option) =>
@@ -117,6 +137,7 @@ 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' && <DateField control={form.control} row={row} index={index} />}
                 </React.Fragment>
               );
             })}

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

@@ -0,0 +1,38 @@
+import { IDateInput } from '../../../../interfaces/dialog';
+import { Control, useController } from 'react-hook-form';
+import { FormValues } from '../../InputDialog';
+import { DatePicker } from '@mantine/dates';
+
+interface Props {
+  row: IDateInput;
+  index: number;
+  control: Control<FormValues>;
+}
+
+const DateField: React.FC<Props> = (props) => {
+  const controller = useController({
+    name: `test.${props.index}.value`,
+    control: props.control,
+    defaultValue: props.row.default && new Date(props.row.default),
+    rules: { required: props.row.required },
+  });
+
+  return (
+    <DatePicker
+      value={controller.field.value}
+      name={controller.field.name}
+      ref={controller.field.ref}
+      onBlur={controller.field.onBlur}
+      onChange={controller.field.onChange}
+      label={props.row.label}
+      description={props.row.description}
+      placeholder={props.row.placeholder}
+      disabled={props.row.disabled}
+      inputFormat="DD/MM/YYYY"
+      withAsterisk={props.row.required}
+      clearable={props.row.clearable}
+    />
+  );
+};
+
+export default DateField;