90 lines
3.1 KiB
JavaScript
90 lines
3.1 KiB
JavaScript
import React from "react";
|
|
import { Field } from "redux-form";
|
|
import { useRouter } from "next/router";
|
|
import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
|
|
import { getFieldTranslation } from "../helpers/translationHelpers";
|
|
|
|
export const RenderCheckBox = ({
|
|
datafieldname,
|
|
name,
|
|
label,
|
|
id,
|
|
errorMsg,
|
|
options,
|
|
input: { onChange, value },
|
|
meta: { touched, error },
|
|
...custom
|
|
}) => {
|
|
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={name + "-hint"}
|
|
>
|
|
<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="govuk-checkboxes ">
|
|
{Object.keys(options).map((key, index) => (
|
|
<div
|
|
className="govuk-checkboxes__item"
|
|
data-children-count={key}
|
|
key={key}
|
|
>
|
|
<Field
|
|
id={id + "_" + index}
|
|
name={id + "_" + index}
|
|
component="input"
|
|
type="checkbox"
|
|
className="govuk-checkboxes__input"
|
|
value={options[key]}
|
|
/>
|
|
<label
|
|
className="govuk-label govuk-checkboxes__label"
|
|
htmlFor={id + "_" + index}
|
|
>
|
|
{options[key]}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|