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

feat(web/input): date range picker

Browse Source
This commit is contained in:
Luke
2023-01-14 14:15:38 +01:00
parent a23b94ceb1
commit f21b79786a
3 changed files with 53 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,10 +59,12 @@ const InputDialog: React.FC = () => {
{
value:
row.type !== 'checkbox'
? row.type === 'date'
? row.type === 'date' || row.type === 'date-range'
? // Set date to current one if default is set to true
row.default === true
? new Date()
: Array.isArray(row.default)
? row.default.map((date) => new Date(date))
: row.default && new Date(row.default)
: row.default
: row.checked,
@@ -140,7 +142,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' && <DateField control={form.control} row={row} index={index} />}
{row.type === 'date' ||
(row.type === 'date-range' && <DateField control={form.control} row={row} index={index} />)}
</React.Fragment>
);
})}

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

@@ -1,7 +1,7 @@
import { IDateInput } from '../../../../interfaces/dialog';
import { Control, useController } from 'react-hook-form';
import { FormValues } from '../../InputDialog';
import { DatePicker } from '@mantine/dates';
import { DatePicker, DateRangePicker } from '@mantine/dates';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
interface Props {
@@ -14,28 +14,55 @@ const DateField: React.FC<Props> = (props) => {
const controller = useController({
name: `test.${props.index}.value`,
control: props.control,
defaultValue: props.row.default === true ? new Date() : props.row.default ? new Date(props.row.default) : undefined,
defaultValue:
props.row.default === true
? new Date()
: Array.isArray(props.row.default)
? props.row.default.map((date) => new Date(date))
: 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}
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 === 'date' ? (
<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}
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}
/>
) : (
<DateRangePicker
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}
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}
/>
)}
</>
);
};

4
web/src/interfaces/dialog.ts
View File

@@ -69,9 +69,9 @@ export interface IColorInput {
}
export interface IDateInput {
type: 'date';
type: 'date' | 'date-range';
label: string;
default?: string | true;
default?: string | [string, string] | true;
disabled?: boolean;
description?: string;
required?: boolean;