Extract visibility and validation helpers in elements index
This commit is contained in:
@@ -29,6 +29,37 @@ import { RenderFileUpload } from "./fields/renderFileUpload";
|
||||
export { RenderSubFields } from "./fields/renderSubFields";
|
||||
export { FieldArrayForm } from "./fields/fieldArrayForm";
|
||||
|
||||
const getValidationMessages = (t) => ({
|
||||
requiredMessage: t("newappeal:is-required-label"),
|
||||
emojiNotAllowedMessage: t("newappeal:emojis-not-allowed-label"),
|
||||
invalidPostcodeMessage: t("newappeal:invalid-postcode-label")
|
||||
});
|
||||
|
||||
const hasParentFieldValue = ({ parentField, form, formProps }) =>
|
||||
parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField);
|
||||
|
||||
const isVisibleByEquality = ({
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue
|
||||
}) =>
|
||||
(hasParentFieldValue({ parentField, form, formProps }) &&
|
||||
formProps[form].values[parentField]) == parentFieldShowOnValue;
|
||||
|
||||
const isVisibleByInclusion = ({
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue
|
||||
}) =>
|
||||
hasParentFieldValue({ parentField, form, formProps }) &&
|
||||
parentFieldShowOnValue.indexOf(
|
||||
formProps[form].values[parentField].toString()
|
||||
) > -1;
|
||||
|
||||
export function Textfield(props) {
|
||||
const {
|
||||
name,
|
||||
@@ -128,19 +159,22 @@ export function Textfield(props) {
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
var showIfHasParentShowValue =
|
||||
(parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
formProps[form].values[parentField]) == parentFieldShowOnValue;
|
||||
var showIfHasParentShowValue = isVisibleByEquality({
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue
|
||||
});
|
||||
|
||||
// console.log(parentField, showIfHasParentShowValue);
|
||||
// console.log(parentField, formProps, form);
|
||||
|
||||
//console.log("validation props:", validation);
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
const {
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
} = getValidationMessages(t);
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
{parentField != false ? (
|
||||
@@ -222,13 +256,12 @@ export function MultiLinefield(props) {
|
||||
return errors;
|
||||
};
|
||||
|
||||
var showIfHasParentShowValue =
|
||||
parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
parentFieldShowOnValue.indexOf(
|
||||
formProps[form].values[parentField].toString()
|
||||
) > -1;
|
||||
var showIfHasParentShowValue = isVisibleByInclusion({
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue
|
||||
});
|
||||
|
||||
(showIfHasParentShowValue == parentField) != false &&
|
||||
showIfHasParentShowValue;
|
||||
@@ -237,9 +270,8 @@ export function MultiLinefield(props) {
|
||||
let { t } = useTranslation();
|
||||
const translatedLabel = FieldsTranslations(props.label);
|
||||
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
|
||||
getValidationMessages(t);
|
||||
return (
|
||||
<>
|
||||
{parentField != false ? (
|
||||
@@ -335,22 +367,20 @@ export function RichMultiLinefield(props) {
|
||||
const required = (value) =>
|
||||
value ? undefined : t("newappeal:is-required-label");
|
||||
|
||||
var showIfHasParentShowValue =
|
||||
parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
parentFieldShowOnValue.indexOf(
|
||||
formProps[form].values[parentField].toString()
|
||||
) > -1;
|
||||
var showIfHasParentShowValue = isVisibleByInclusion({
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue
|
||||
});
|
||||
|
||||
(showIfHasParentShowValue == parentField) != false &&
|
||||
showIfHasParentShowValue;
|
||||
|
||||
//console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
|
||||
let { t } = useTranslation();
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
|
||||
getValidationMessages(t);
|
||||
return (
|
||||
<>
|
||||
{parentField != false ? (
|
||||
@@ -445,15 +475,15 @@ export function DateFieldPicker(props) {
|
||||
let dateEnd = props.dateEnd;
|
||||
let { t } = useTranslation();
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
var showIfHasParentShowValue =
|
||||
(parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
formProps[form].values[parentField]) == parentFieldShowOnValue;
|
||||
var showIfHasParentShowValue = isVisibleByEquality({
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue
|
||||
});
|
||||
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
|
||||
getValidationMessages(t);
|
||||
|
||||
// a and b are javascript Date objects
|
||||
function dateDiffInDays(a, b) {
|
||||
@@ -621,13 +651,12 @@ export function YesNofield(props) {
|
||||
const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
var showIfHasParentShowValue =
|
||||
parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
parentFieldShowOnValue.indexOf(
|
||||
formProps[form].values[parentField].toString()
|
||||
) > -1;
|
||||
var showIfHasParentShowValue = isVisibleByInclusion({
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue
|
||||
});
|
||||
|
||||
(showIfHasParentShowValue == parentField) != false &&
|
||||
showIfHasParentShowValue;
|
||||
@@ -697,20 +726,18 @@ export function Radiofield(props) {
|
||||
.split(",");
|
||||
|
||||
//parentFieldShowOnValue
|
||||
var showIfHasParentShowValue =
|
||||
parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
parentFieldShowOnValue.indexOf(
|
||||
formProps[form].values[parentField].toString()
|
||||
) > -1;
|
||||
var showIfHasParentShowValue = isVisibleByInclusion({
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue
|
||||
});
|
||||
|
||||
(showIfHasParentShowValue == parentField) != false &&
|
||||
showIfHasParentShowValue;
|
||||
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
|
||||
getValidationMessages(t);
|
||||
return (
|
||||
<>
|
||||
{parentField != false ? (
|
||||
@@ -849,21 +876,19 @@ export function NumericField(props) {
|
||||
: undefined;
|
||||
|
||||
//parentFieldShowOnValue
|
||||
var showIfHasParentShowValue =
|
||||
parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
parentFieldShowOnValue.indexOf(
|
||||
formProps[form].values[parentField].toString()
|
||||
) > -1;
|
||||
var showIfHasParentShowValue = isVisibleByInclusion({
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue
|
||||
});
|
||||
|
||||
(showIfHasParentShowValue == parentField) != false &&
|
||||
showIfHasParentShowValue;
|
||||
|
||||
//console.log("parentField:", parentField, showIfHasParentShowValue);
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
|
||||
getValidationMessages(t);
|
||||
return (
|
||||
<>
|
||||
{parentField != false ? (
|
||||
@@ -968,13 +993,12 @@ export function DecimalField(props) {
|
||||
: undefined;
|
||||
|
||||
//parentFieldShowOnValue
|
||||
var showIfHasParentShowValue =
|
||||
parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
parentFieldShowOnValue.indexOf(
|
||||
formProps[form].values[parentField].toString()
|
||||
) > -1;
|
||||
var showIfHasParentShowValue = isVisibleByInclusion({
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue
|
||||
});
|
||||
|
||||
(showIfHasParentShowValue == parentField) != false &&
|
||||
showIfHasParentShowValue;
|
||||
@@ -999,9 +1023,8 @@ export function DecimalField(props) {
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
|
||||
getValidationMessages(t);
|
||||
return (
|
||||
<>
|
||||
{parentField != false ? (
|
||||
|
||||
Reference in New Issue
Block a user