robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract visibility and validation helpers in elements index

Browse Source
This commit is contained in:
robbond
2026-04-07 15:44:02 +01:00
parent eccb87e4a1
commit 30bd8c49da
2 changed files with 126 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/elements/index.js
+96 -73
View File
@@ -29,6 +29,37 @@ import { RenderFileUpload } from "./fields/renderFileUpload";
export { RenderSubFields } from "./fields/renderSubFields"; export { RenderSubFields } from "./fields/renderSubFields";
export { FieldArrayForm } from "./fields/fieldArrayForm"; 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) { export function Textfield(props) {
const { const {
name, name,
@@ -128,19 +159,22 @@ export function Textfield(props) {
</> </>
); );
} else { } else {
var showIfHasParentShowValue = var showIfHasParentShowValue = isVisibleByEquality({
(parentField != false && parentField,
!_.isEmpty(formProps[form]) && form,
_.has(formProps[form].values, parentField) && formProps,
formProps[form].values[parentField]) == parentFieldShowOnValue; parentFieldShowOnValue
});
// console.log(parentField, showIfHasParentShowValue); // console.log(parentField, showIfHasParentShowValue);
// console.log(parentField, formProps, form); // console.log(parentField, formProps, form);
//console.log("validation props:", validation); //console.log("validation props:", validation);
const requiredMessage = t("newappeal:is-required-label"); const {
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label"); requiredMessage,
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label"); emojiNotAllowedMessage,
invalidPostcodeMessage
} = getValidationMessages(t);
return ( return (
<div className="govuk-form-group"> <div className="govuk-form-group">
{parentField != false ? ( {parentField != false ? (
@@ -222,13 +256,12 @@ export function MultiLinefield(props) {
return errors; return errors;
}; };
var showIfHasParentShowValue = var showIfHasParentShowValue = isVisibleByInclusion({
parentField != false && parentField,
!_.isEmpty(formProps[form]) && form,
_.has(formProps[form].values, parentField) && formProps,
parentFieldShowOnValue.indexOf( parentFieldShowOnValue
formProps[form].values[parentField].toString() });
) > -1;
(showIfHasParentShowValue == parentField) != false && (showIfHasParentShowValue == parentField) != false &&
showIfHasParentShowValue; showIfHasParentShowValue;
@@ -237,9 +270,8 @@ export function MultiLinefield(props) {
let { t } = useTranslation(); let { t } = useTranslation();
const translatedLabel = FieldsTranslations(props.label); const translatedLabel = FieldsTranslations(props.label);
const requiredMessage = t("newappeal:is-required-label"); const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label"); getValidationMessages(t);
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
return ( return (
<> <>
{parentField != false ? ( {parentField != false ? (
@@ -335,22 +367,20 @@ export function RichMultiLinefield(props) {
const required = (value) => const required = (value) =>
value ? undefined : t("newappeal:is-required-label"); value ? undefined : t("newappeal:is-required-label");
var showIfHasParentShowValue = var showIfHasParentShowValue = isVisibleByInclusion({
parentField != false && parentField,
!_.isEmpty(formProps[form]) && form,
_.has(formProps[form].values, parentField) && formProps,
parentFieldShowOnValue.indexOf( parentFieldShowOnValue
formProps[form].values[parentField].toString() });
) > -1;
(showIfHasParentShowValue == parentField) != false && (showIfHasParentShowValue == parentField) != false &&
showIfHasParentShowValue; showIfHasParentShowValue;
//console.log(showIfHasParentShowValue, formProps[form].values[parentField]); //console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
let { t } = useTranslation(); let { t } = useTranslation();
const requiredMessage = t("newappeal:is-required-label"); const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label"); getValidationMessages(t);
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
return ( return (
<> <>
{parentField != false ? ( {parentField != false ? (
@@ -445,15 +475,15 @@ export function DateFieldPicker(props) {
let dateEnd = props.dateEnd; let dateEnd = props.dateEnd;
let { t } = useTranslation(); let { t } = useTranslation();
const required = (value) => (value ? undefined : "Required"); const required = (value) => (value ? undefined : "Required");
var showIfHasParentShowValue = var showIfHasParentShowValue = isVisibleByEquality({
(parentField != false && parentField,
!_.isEmpty(formProps[form]) && form,
_.has(formProps[form].values, parentField) && formProps,
formProps[form].values[parentField]) == parentFieldShowOnValue; parentFieldShowOnValue
});
const requiredMessage = t("newappeal:is-required-label"); const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label"); getValidationMessages(t);
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
// a and b are javascript Date objects // a and b are javascript Date objects
function dateDiffInDays(a, b) { function dateDiffInDays(a, b) {
@@ -621,13 +651,12 @@ export function YesNofield(props) {
const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"]; const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
const required = (value) => (value ? undefined : "Required"); const required = (value) => (value ? undefined : "Required");
var showIfHasParentShowValue = var showIfHasParentShowValue = isVisibleByInclusion({
parentField != false && parentField,
!_.isEmpty(formProps[form]) && form,
_.has(formProps[form].values, parentField) && formProps,
parentFieldShowOnValue.indexOf( parentFieldShowOnValue
formProps[form].values[parentField].toString() });
) > -1;
(showIfHasParentShowValue == parentField) != false && (showIfHasParentShowValue == parentField) != false &&
showIfHasParentShowValue; showIfHasParentShowValue;
@@ -697,20 +726,18 @@ export function Radiofield(props) {
.split(","); .split(",");
//parentFieldShowOnValue //parentFieldShowOnValue
var showIfHasParentShowValue = var showIfHasParentShowValue = isVisibleByInclusion({
parentField != false && parentField,
!_.isEmpty(formProps[form]) && form,
_.has(formProps[form].values, parentField) && formProps,
parentFieldShowOnValue.indexOf( parentFieldShowOnValue
formProps[form].values[parentField].toString() });
) > -1;
(showIfHasParentShowValue == parentField) != false && (showIfHasParentShowValue == parentField) != false &&
showIfHasParentShowValue; showIfHasParentShowValue;
const requiredMessage = t("newappeal:is-required-label"); const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label"); getValidationMessages(t);
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
return ( return (
<> <>
{parentField != false ? ( {parentField != false ? (
@@ -849,21 +876,19 @@ export function NumericField(props) {
: undefined; : undefined;
//parentFieldShowOnValue //parentFieldShowOnValue
var showIfHasParentShowValue = var showIfHasParentShowValue = isVisibleByInclusion({
parentField != false && parentField,
!_.isEmpty(formProps[form]) && form,
_.has(formProps[form].values, parentField) && formProps,
parentFieldShowOnValue.indexOf( parentFieldShowOnValue
formProps[form].values[parentField].toString() });
) > -1;
(showIfHasParentShowValue == parentField) != false && (showIfHasParentShowValue == parentField) != false &&
showIfHasParentShowValue; showIfHasParentShowValue;
//console.log("parentField:", parentField, showIfHasParentShowValue); //console.log("parentField:", parentField, showIfHasParentShowValue);
const requiredMessage = t("newappeal:is-required-label"); const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label"); getValidationMessages(t);
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
return ( return (
<> <>
{parentField != false ? ( {parentField != false ? (
@@ -968,13 +993,12 @@ export function DecimalField(props) {
: undefined; : undefined;
//parentFieldShowOnValue //parentFieldShowOnValue
var showIfHasParentShowValue = var showIfHasParentShowValue = isVisibleByInclusion({
parentField != false && parentField,
!_.isEmpty(formProps[form]) && form,
_.has(formProps[form].values, parentField) && formProps,
parentFieldShowOnValue.indexOf( parentFieldShowOnValue
formProps[form].values[parentField].toString() });
) > -1;
(showIfHasParentShowValue == parentField) != false && (showIfHasParentShowValue == parentField) != false &&
showIfHasParentShowValue; showIfHasParentShowValue;
@@ -999,9 +1023,8 @@ export function DecimalField(props) {
return undefined; return undefined;
}; };
const requiredMessage = t("newappeal:is-required-label"); const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label"); getValidationMessages(t);
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
return ( return (
<> <>
{parentField != false ? ( {parentField != false ? (
memory-bank/change-log.md
+30
View File
@@ -3555,3 +3555,33 @@ Validation:
Follow-ups: Follow-ups:
- Continue Phase 2 with bounded renderer/module extractions from `components/elements/index.js` (one cohesive bundle per commit). - Continue Phase 2 with bounded renderer/module extractions from `components/elements/index.js` (one cohesive bundle per commit).
---
### CL-100: 22500 `components/elements/index.js` helper normalization (validation messages + visibility checks)
date: 2026-04-07
author: Cline
scope: `components/elements/index.js`
type: change
rationale: Apply the requested next bounded refactor slice by consolidating repeated validation message setup and parent-field visibility logic into shared local helpers.
impact: No intended behavior change; EN/CY and accessibility behavior preserved while reducing repeated logic and future drift risk.
status: completed
Summary:
- Added `getValidationMessages(t)` helper for repeated `required/emoji/postcode` message retrieval.
- Added visibility helpers:
- `hasParentFieldValue(...)`
- `isVisibleByEquality(...)`
- `isVisibleByInclusion(...)`
- Replaced repeated inline visibility and validation-message setup across field wrappers with helper usage (Textfield, MultiLinefield, RichMultiLinefield, DateFieldPicker, YesNofield, Radiofield, NumericField, DecimalField).
- Kept existing field render paths, conditions, and validation calls intact.
Validation:
- `npx eslint components/elements/index.js` -> pass
Follow-ups:
- Continue bounded no-behavior-change slices by removing dead locals/comments and extracting one additional low-risk field wrapper at a time.