130 lines
5.3 KiB
JavaScript
130 lines
5.3 KiB
JavaScript
import React from "react";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import { useRouter } from "next/router";
|
|
import { Field } from "redux-form";
|
|
import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
|
|
import { getFieldTranslation } from "../helpers/translationHelpers";
|
|
|
|
export const RenderRadio = ({
|
|
datafieldname,
|
|
name,
|
|
label,
|
|
id,
|
|
errorMsg,
|
|
options,
|
|
input: { onChange, value },
|
|
meta: { touched, error },
|
|
...custom
|
|
}) => {
|
|
let { t } = useTranslation();
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
const { appealtypes } = router.query;
|
|
|
|
const translatedLabel = getFieldTranslation({
|
|
label,
|
|
locale,
|
|
appealtypes,
|
|
fieldLookup
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={
|
|
touched && error
|
|
? "govuk-form-group govuk-form-group--error"
|
|
: "govuk-form-group "
|
|
}
|
|
>
|
|
<fieldset
|
|
className="govuk-fieldset"
|
|
aria-describedby={id + "_label"}
|
|
>
|
|
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
|
|
<label
|
|
className="govuk-fieldset__heading govuk-body-m"
|
|
id={id + "_label"}
|
|
>
|
|
{translatedLabel}
|
|
</label>
|
|
</legend>
|
|
{touched && error && (
|
|
<span
|
|
id={id + "-error"}
|
|
className="govuk-error-message"
|
|
>
|
|
<span className="govuk-visually-hidden">
|
|
Error:
|
|
</span>{" "}
|
|
{errorMsg}
|
|
</span>
|
|
)}
|
|
<div
|
|
className={
|
|
custom.inline == false
|
|
? "govuk-radios govuk-radios--small"
|
|
: "govuk-radios govuk-radios--inline govuk-radios--small"
|
|
}
|
|
>
|
|
{" "}
|
|
{custom.hint != false && (
|
|
<div className="govuk-hint">{t(custom.hint)}</div>
|
|
)}
|
|
{Object.keys(options).map((key, index) => (
|
|
<div
|
|
className="govuk-radios__item"
|
|
data-children-count={key}
|
|
key={key}
|
|
>
|
|
<Field
|
|
id={id + "_" + index}
|
|
name={id}
|
|
component="input"
|
|
type="radio"
|
|
className="govuk-radios__input"
|
|
value={options[key].split("|")[0]}
|
|
checked={
|
|
typeof value != "undefined" &&
|
|
value ==
|
|
parseInt(options[key].split("|")[0])
|
|
? true
|
|
: false
|
|
}
|
|
onChange={(e) => {
|
|
let docListObj = custom.documentList;
|
|
if (
|
|
custom.requiredDocumentValue ==
|
|
"Yes"
|
|
) {
|
|
e.target.value != "846040000"
|
|
? (docListObj = Object.assign(
|
|
docListObj,
|
|
{
|
|
["documentCheckList_" +
|
|
id]:
|
|
custom.requiredDocumentLabel
|
|
}
|
|
))
|
|
: delete docListObj[
|
|
"documentCheckList_" + id
|
|
];
|
|
custom.setDocumentsList(docListObj);
|
|
}
|
|
}}
|
|
/>
|
|
<label
|
|
className="govuk-label govuk-radios__label"
|
|
htmlFor={id + "_" + index}
|
|
>
|
|
{t(options[key].split("|")[1])}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|