FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 15:06:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Luke
2023-02-14 10:54:53 +01:00
parent 14341a0343
commit 7bb2eb2ea7
4 changed files with 83 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/features/dialog/InputDialog.tsx
View File

@@ -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' && (

70
web/src/features/dialog/components/fields/date.tsx
View File

@@ -38,52 +38,34 @@ const DateField: React.FC<Props> = (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' && (
<DateRangePicker
value={
controller.field.value
? controller.field.value[0]
? controller.field.value.map((date: Date) => new Date(date))
: controller.field.value
<DateRangePicker
value={
controller.field.value
? controller.field.value[0]
? controller.field.value.map((date: Date) => 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 && <FontAwesomeIcon fixedWidth 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' && (
<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} />}
/>
)}
: 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 && <FontAwesomeIcon fixedWidth icon={props.row.icon} />}
minDate={props.row.min ? new Date(props.row.min) : undefined}
maxDate={props.row.max ? new Date(props.row.max) : undefined}
/>
)}
</>
);
};

38
web/src/features/dialog/components/fields/time.tsx Normal file
View File

@@ -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;