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

Extract Radio, Numeric and Decimal wrappers

Browse Source
This commit is contained in:
robbond
2026-04-08 10:00:01 +01:00
parent dbebd03cac
commit 5d40fab5c4
5 changed files with 361 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/elements/fields/decimalField.js
+106
View File
@@ -0,0 +1,106 @@
import React from "react";
import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import { Field } from "redux-form";
import { RenderTextfield } from "./renderTextfield";
import { RenderDecimalField } from "./renderDecimalField";
import { validateField } from "../validationUtils";
const isVisibleByInclusion = ({
parentField,
form,
formProps,
parentFieldShowOnValue
}) =>
parentField != false &&
!_.isEmpty(formProps[form]) &&
_.has(formProps[form].values, parentField) &&
parentFieldShowOnValue.indexOf(
formProps[form].values[parentField].toString()
) > -1;
export function DecimalField(props) {
const {
name,
validation,
form,
formProps,
parentFieldShowOnValue,
parentField
} = props;
let { t } = useTranslation();
const showIfHasParentShowValue = isVisibleByInclusion({
parentField,
form,
formProps,
parentFieldShowOnValue
});
const validateDecimal = (value) => {
if (!value) return t("newappeal:is-required-label");
const regex = /^\d{1,6}(\.\d{1,2})?$/;
if (!regex.test(value)) {
return t("newappeal:invalid-decimal-label");
}
return undefined;
};
const requiredMessage = t("newappeal:is-required-label");
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
return (
<>
{parentField != false ? (
showIfHasParentShowValue && (
<div className="govuk-form-group">
<Field
name={props.name}
id={props.name}
type="number"
className="govuk-input govuk-input--width-10"
spellCheck="false"
aria-describedby={name}
pattern="[0-9]*"
inputMode="numeric"
parse={Number}
validate={(value) =>
validateField(
value,
validation,
requiredMessage,
emojiNotAllowedMessage,
invalidPostcodeMessage
)
}
component={RenderTextfield}
label={props.label}
maxFieldLength={props.maxFieldLength}
/>
</div>
)
) : (
<div className="govuk-form-group">
<Field
name={props.name}
id={props.name}
type="text"
className="govuk-input govuk-input--width-10"
spellCheck="false"
aria-describedby={name}
pattern="^\d*\.?\d+$"
validate={[validateDecimal]}
component={RenderDecimalField}
label={props.label}
maxFieldLength={props.maxFieldLength}
/>
</div>
)}
</>
);
}
components/elements/fields/numericField.js
+114
View File
@@ -0,0 +1,114 @@
import React from "react";
import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import { Field } from "redux-form";
import { RenderTextfield } from "./renderTextfield";
import { validateField } from "../validationUtils";
const isVisibleByInclusion = ({
parentField,
form,
formProps,
parentFieldShowOnValue
}) =>
parentField != false &&
!_.isEmpty(formProps[form]) &&
_.has(formProps[form].values, parentField) &&
parentFieldShowOnValue.indexOf(
formProps[form].values[parentField].toString()
) > -1;
export function NumericField(props) {
const {
name,
label,
validation,
form,
formProps,
parentFieldShowOnValue,
parentField
} = props;
let { t } = useTranslation();
const required = (value) => {
return value || value == 0
? undefined
: t("newappeal:is-required-label");
};
const isNumber = (value) => {
const regex = /^\d+$/;
return regex.test(value)
? undefined
: t("newappeal:invalid-number-label");
};
const maxLength = (max) => (value) =>
value && value.length > max
? `Must be ${max} characters or less`
: undefined;
const showIfHasParentShowValue = isVisibleByInclusion({
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");
return (
<>
{parentField != false ? (
showIfHasParentShowValue && (
<div className="govuk-form-group">
<Field
name={props.name}
id={props.name}
type="number"
className="govuk-input govuk-input--width-20"
spellCheck="false"
aria-describedby={name}
pattern="[0-9]*"
inputMode="numeric"
parse={Number}
validate={(value) =>
validateField(
value,
validation,
requiredMessage,
emojiNotAllowedMessage,
invalidPostcodeMessage
)
}
component={RenderTextfield}
label={label}
maxFieldLength={props.maxFieldLength}
/>
</div>
)
) : (
<div className="govuk-form-group">
<Field
name={props.name}
id={props.name}
type="text"
className="govuk-input govuk-input--width-10"
aria-describedby={name}
pattern="[0-9]*"
validate={[
required,
isNumber,
maxLength(props.maxFieldLength)
]}
component={RenderTextfield}
label={props.label}
maxFieldLength={props.maxFieldLength}
/>
</div>
)}
</>
);
}
components/elements/fields/radioField.js
+107
View File
@@ -0,0 +1,107 @@
import React from "react";
import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import { Field } from "redux-form";
import { RenderRadio } from "./renderRadio";
import { validateField } from "../validationUtils";
const isVisibleByInclusion = ({
parentField,
form,
formProps,
parentFieldShowOnValue
}) =>
parentField != false &&
!_.isEmpty(formProps[form]) &&
_.has(formProps[form].values, parentField) &&
parentFieldShowOnValue.indexOf(
formProps[form].values[parentField].toString()
) > -1;
export function Radiofield(props) {
const {
name,
label,
datafieldname,
form,
formProps,
parentFieldShowOnValue,
parentField,
validation
} = props;
let { t } = useTranslation();
const fieldOptions = props.options
.slice(1, props.options.length - 1)
.split(",");
const showIfHasParentShowValue = isVisibleByInclusion({
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");
return (
<>
{parentField != false ? (
showIfHasParentShowValue && (
<Field
name={name}
datafieldname={datafieldname}
label={label}
options={fieldOptions}
id={name}
errorMsg={t("newappeal:select-an-option-label")}
component={RenderRadio}
inline={props.inline}
hint={props.hint}
validate={(value) =>
validateField(
value,
validation,
requiredMessage,
emojiNotAllowedMessage,
invalidPostcodeMessage
)
}
requiredDocumentLabel={props.requiredDocumentLabel}
requiredDocumentValue={props.requiredDocumentValue}
setDocumentsList={props.setDocumentsList}
documentList={props.documentList}
/>
)
) : (
<Field
name={name}
datafieldname={datafieldname}
label={label}
options={fieldOptions}
id={name}
errorMsg={t("newappeal:select-an-option-label")}
component={RenderRadio}
inline={props.inline}
hint={props.hint}
validate={(value) =>
validateField(
value,
validation,
requiredMessage,
emojiNotAllowedMessage,
invalidPostcodeMessage
)
}
requiredDocumentLabel={props.requiredDocumentLabel}
requiredDocumentValue={props.requiredDocumentValue}
setDocumentsList={props.setDocumentsList}
documentList={props.documentList}
/>
)}
</>
);
}