109 lines
3.6 KiB
JavaScript
109 lines
3.6 KiB
JavaScript
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";
|
|
import { hasOwn } from "../../utils";
|
|
|
|
const isVisibleByInclusion = ({
|
|
parentField,
|
|
form,
|
|
formProps,
|
|
parentFieldShowOnValue
|
|
}) =>
|
|
parentField != false &&
|
|
!_.isEmpty(formProps[form]) &&
|
|
hasOwn(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}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|