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

refactor(web/input): use date timestamp instead of object

Browse Source
This commit is contained in:
Luke
2023-01-14 19:02:25 +01:00
parent f21b79786a
commit b671181402
2 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,10 +62,10 @@ const InputDialog: React.FC = () => {
? row.type === 'date' || row.type === 'date-range' ? row.type === 'date' || row.type === 'date-range'
? // Set date to current one if default is set to true ? // Set date to current one if default is set to true
row.default === true row.default === true
? new Date() ? new Date().getTime()
: Array.isArray(row.default) : Array.isArray(row.default)
? row.default.map((date) => new Date(date)) ? row.default.map((date) => new Date(date).getTime())
: row.default && new Date(row.default) : row.default && new Date(row.default).getTime()
: row.default : row.default
: row.checked, : row.checked,
} || { value: null } } || { value: null }
@@ -142,8 +142,9 @@ const InputDialog: React.FC = () => {
{row.type === 'number' && <NumberField control={form.control} row={row} index={index} />} {row.type === 'number' && <NumberField control={form.control} row={row} index={index} />}
{row.type === 'slider' && <SliderField 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 === 'color' && <ColorField control={form.control} row={row} index={index} />}
{row.type === 'date' || {row.type === 'date' || row.type === 'date-range' ? (
(row.type === 'date-range' && <DateField control={form.control} row={row} index={index} />)} <DateField control={form.control} row={row} index={index} />
) : null}
</React.Fragment> </React.Fragment>
); );
})} })}

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

@@ -14,12 +14,6 @@ const DateField: React.FC<Props> = (props) => {
const controller = useController({ const controller = useController({
name: `test.${props.index}.value`, name: `test.${props.index}.value`,
control: props.control, control: props.control,
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 }, rules: { required: props.row.required },
}); });
@@ -27,11 +21,12 @@ const DateField: React.FC<Props> = (props) => {
<> <>
{props.row.type === 'date' ? ( {props.row.type === 'date' ? (
<DatePicker <DatePicker
value={controller.field.value} value={controller.field.value ? new Date(controller.field.value) : controller.field.value}
name={controller.field.name} name={controller.field.name}
ref={controller.field.ref} ref={controller.field.ref}
onBlur={controller.field.onBlur} onBlur={controller.field.onBlur}
onChange={controller.field.onChange} // Workaround to use timestamp instead of Date object in values
onChange={(date) => controller.field.onChange(date ? date.getTime() : null)}
label={props.row.label} label={props.row.label}
description={props.row.description} description={props.row.description}
placeholder={props.row.placeholder} placeholder={props.row.placeholder}
@@ -44,23 +39,33 @@ const DateField: React.FC<Props> = (props) => {
maxDate={props.row.max ? new Date(props.row.max) : undefined} maxDate={props.row.max ? new Date(props.row.max) : undefined}
/> />
) : ( ) : (
<DateRangePicker props.row.type === 'date-range' && (
value={controller.field.value} <DateRangePicker
name={controller.field.name} value={
ref={controller.field.ref} controller.field.value
onBlur={controller.field.onBlur} ? controller.field.value[0]
onChange={controller.field.onChange} ? controller.field.value.map((date: Date) => new Date(date))
label={props.row.label} : controller.field.value
description={props.row.description} : controller.field.value
placeholder={props.row.placeholder} }
disabled={props.row.disabled} name={controller.field.name}
inputFormat="DD/MM/YYYY" ref={controller.field.ref}
withAsterisk={props.row.required} onBlur={controller.field.onBlur}
clearable={props.row.clearable} onChange={(dates) =>
icon={props.row.icon && <FontAwesomeIcon fixedWidth icon={props.row.icon} />} controller.field.onChange(dates.map((date: Date | null) => (date ? date.getTime() : null)))
minDate={props.row.min ? new Date(props.row.min) : undefined} }
maxDate={props.row.max ? new Date(props.row.max) : undefined} 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}
/>
)
)} )}
</> </>
); );