From 7bb2eb2ea7a48c73bc7cbe24f2187d3fdb988f1f Mon Sep 17 00:00:00 2001 From: Luke <39926192+LukeWasTakenn@users.noreply.github.com> Date: Tue, 14 Feb 2023 10:54:53 +0100 Subject: [PATCH] refactor(web/input): separate date and time fields --- web/src/features/dialog/InputDialog.tsx | 7 +- .../dialog/components/fields/date.tsx | 70 +++++++------------ .../dialog/components/fields/time.tsx | 38 ++++++++++ web/src/interfaces/dialog.ts | 15 +++- 4 files changed, 83 insertions(+), 47 deletions(-) create mode 100644 web/src/features/dialog/components/fields/time.tsx diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx index d10d544..dc563cc 100644 --- a/web/src/features/dialog/InputDialog.tsx +++ b/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; + rows: Array; options?: { allowCancel?: boolean; }; @@ -146,7 +148,8 @@ const InputDialog: React.FC = () => { {row.type === 'number' && } {row.type === 'slider' && } {row.type === 'color' && } - {row.type === 'date' || row.type === 'date-range' || row.type === 'time' ? ( + {row.type === 'time' && } + {row.type === 'date' || row.type === 'date-range' ? ( ) : null} {row.type === 'textarea' && ( diff --git a/web/src/features/dialog/components/fields/date.tsx b/web/src/features/dialog/components/fields/date.tsx index 5152d84..09ff6c0 100644 --- a/web/src/features/dialog/components/fields/date.tsx +++ b/web/src/features/dialog/components/fields/date.tsx @@ -38,52 +38,34 @@ const DateField: React.FC = (props) => { minDate={props.row.min ? new Date(props.row.min) : undefined} maxDate={props.row.max ? new Date(props.row.max) : undefined} /> - )} + )} {props.row.type === 'date-range' && ( - new Date(date)) - : controller.field.value + new Date(date)) : controller.field.value - } - name={controller.field.name} - ref={controller.field.ref} - onBlur={controller.field.onBlur} - onChange={(dates) => - controller.field.onChange(dates.map((date: Date | null) => (date ? date.getTime() : null))) - } - 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} - icon={props.row.icon && } - minDate={props.row.min ? new Date(props.row.min) : undefined} - maxDate={props.row.max ? new Date(props.row.max) : undefined} - /> - )} - - {props.row.type === 'time' && ( - 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 && } - /> - )} + : controller.field.value + } + name={controller.field.name} + ref={controller.field.ref} + onBlur={controller.field.onBlur} + onChange={(dates) => + controller.field.onChange(dates.map((date: Date | null) => (date ? date.getTime() : null))) + } + 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} + icon={props.row.icon && } + minDate={props.row.min ? new Date(props.row.min) : undefined} + maxDate={props.row.max ? new Date(props.row.max) : undefined} + /> + )} ); }; diff --git a/web/src/features/dialog/components/fields/time.tsx b/web/src/features/dialog/components/fields/time.tsx new file mode 100644 index 0000000..4b92965 --- /dev/null +++ b/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; +} + +const TimeField: React.FC = (props) => { + const controller = useController({ + name: `test.${props.index}.value`, + control: props.control, + rules: { required: props.row.required }, + }); + + return ( + 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 && } + /> + ); +}; + +export default TimeField; diff --git a/web/src/interfaces/dialog.ts b/web/src/interfaces/dialog.ts index 6b8ff9a..0dddda1 100644 --- a/web/src/interfaces/dialog.ts +++ b/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;