100 lines
3.3 KiB
JavaScript
100 lines
3.3 KiB
JavaScript
import React from "react";
|
|
import _ from "lodash";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import { Field } from "redux-form";
|
|
import { RenderDatePicker } from "./renderDatePicker";
|
|
import { validateField } from "../validationUtils";
|
|
|
|
const dateDiffInDays = (a, b) => {
|
|
const _MS_PER_DAY = 1000 * 60 * 60 * 24;
|
|
const utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
|
|
const utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
|
|
|
|
return Math.floor((utc2 - utc1) / _MS_PER_DAY);
|
|
};
|
|
|
|
export function DateFieldPicker(props) {
|
|
const {
|
|
name,
|
|
label,
|
|
parentField,
|
|
form,
|
|
formProps,
|
|
parentFieldShowOnValue,
|
|
validation
|
|
} = props;
|
|
|
|
let dateStart = props.dateStart;
|
|
let dateEnd = props.dateEnd;
|
|
let { t } = useTranslation();
|
|
|
|
const showIfHasParentShowValue =
|
|
parentField != false &&
|
|
!_.isEmpty(formProps[form]) &&
|
|
_.has(formProps[form].values, parentField) &&
|
|
formProps[form].values[parentField] == parentFieldShowOnValue;
|
|
|
|
const requiredMessage = t("newappeal:is-required-label");
|
|
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
|
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
|
|
|
dateStart =
|
|
showIfHasParentShowValue && name == "pinswg_dateoflpadecision"
|
|
? "-" +
|
|
(dateDiffInDays(
|
|
new Date(formProps[form].values["pinswg_dateofapplication"]),
|
|
new Date()
|
|
) -
|
|
1) +
|
|
"d"
|
|
: dateStart;
|
|
|
|
return (
|
|
<div className="govuk-form-group">
|
|
{parentField != false ? (
|
|
showIfHasParentShowValue && (
|
|
<Field
|
|
name={name}
|
|
id={name}
|
|
label={label}
|
|
component={RenderDatePicker}
|
|
validate={(value) =>
|
|
validateField(
|
|
value,
|
|
validation,
|
|
requiredMessage,
|
|
emojiNotAllowedMessage,
|
|
invalidPostcodeMessage
|
|
)
|
|
}
|
|
errorMsg={t("newappeal:select-a-date-label")}
|
|
dateStart={dateStart}
|
|
dateEnd={dateEnd}
|
|
hint={props.hint}
|
|
/>
|
|
)
|
|
) : (
|
|
<Field
|
|
name={name}
|
|
id={name}
|
|
label={label}
|
|
component={RenderDatePicker}
|
|
validate={(value) =>
|
|
validateField(
|
|
value,
|
|
validation,
|
|
requiredMessage,
|
|
emojiNotAllowedMessage,
|
|
invalidPostcodeMessage
|
|
)
|
|
}
|
|
errorMsg={t("newappeal:select-a-date-label")}
|
|
dateStart={dateStart}
|
|
dateEnd={dateEnd}
|
|
hint={props.hint}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|