Refactor elements renderers into dedicated field components
This commit is contained in:
@@ -0,0 +1,162 @@
|
|||||||
|
import React from "react";
|
||||||
|
import DatePicker from "react-datepicker";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import useTranslation from "next-translate/useTranslation";
|
||||||
|
import {
|
||||||
|
addDays,
|
||||||
|
addMonths,
|
||||||
|
addYears,
|
||||||
|
parseISO,
|
||||||
|
subDays,
|
||||||
|
subMonths,
|
||||||
|
subYears
|
||||||
|
} from "date-fns";
|
||||||
|
import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
|
||||||
|
import { getFieldTranslation } from "../helpers/translationHelpers";
|
||||||
|
|
||||||
|
export const RenderDatePicker = ({
|
||||||
|
datafieldname,
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
id,
|
||||||
|
errorMsg,
|
||||||
|
input: { onChange, value },
|
||||||
|
meta: { touched, error },
|
||||||
|
...custom
|
||||||
|
}) => {
|
||||||
|
const router = useRouter();
|
||||||
|
let { t } = useTranslation();
|
||||||
|
const { locale } = router;
|
||||||
|
const { appealtypes } = router.query;
|
||||||
|
|
||||||
|
const translatedLabel = getFieldTranslation({
|
||||||
|
label,
|
||||||
|
locale,
|
||||||
|
appealtypes,
|
||||||
|
fieldLookup
|
||||||
|
});
|
||||||
|
|
||||||
|
function dateFromOffset(offsetStr) {
|
||||||
|
const today = new Date();
|
||||||
|
|
||||||
|
if (!offsetStr || offsetStr === "0") {
|
||||||
|
return today;
|
||||||
|
}
|
||||||
|
|
||||||
|
const match = offsetStr.match(/^([+-])(\d+)([dmy])$/i);
|
||||||
|
|
||||||
|
if (!match) {
|
||||||
|
console.warn("Invalid offset format:", offsetStr);
|
||||||
|
return today;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [, sign, numberStr, unitRaw] = match;
|
||||||
|
const amount = parseInt(numberStr, 10);
|
||||||
|
const unit = unitRaw.toLowerCase();
|
||||||
|
const isNegative = sign === "-";
|
||||||
|
|
||||||
|
switch (unit) {
|
||||||
|
case "y":
|
||||||
|
return isNegative
|
||||||
|
? subYears(today, amount)
|
||||||
|
: addYears(today, amount);
|
||||||
|
|
||||||
|
case "m":
|
||||||
|
return isNegative
|
||||||
|
? subMonths(today, amount)
|
||||||
|
: addMonths(today, amount);
|
||||||
|
|
||||||
|
case "d":
|
||||||
|
return isNegative
|
||||||
|
? subDays(today, amount)
|
||||||
|
: addDays(today, amount);
|
||||||
|
|
||||||
|
default:
|
||||||
|
return today;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const minDate = dateFromOffset(custom.dateStart);
|
||||||
|
const maxDate = dateFromOffset(custom.dateEnd);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
touched && error
|
||||||
|
? "govuk-form-group govuk-form-group--error"
|
||||||
|
: "govuk-form-group "
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<fieldset
|
||||||
|
className="govuk-fieldset"
|
||||||
|
role="group"
|
||||||
|
aria-describedby={id + "_label"}
|
||||||
|
>
|
||||||
|
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
|
||||||
|
<label
|
||||||
|
className="govuk-fieldset__heading"
|
||||||
|
id={id + "_label"}
|
||||||
|
htmlFor={id}
|
||||||
|
>
|
||||||
|
{translatedLabel}
|
||||||
|
</label>
|
||||||
|
{custom.hasOwnProperty("hint") && (
|
||||||
|
<div className="govuk-hint govuk-!-font-size-14">
|
||||||
|
{t(custom.hint)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</legend>
|
||||||
|
{!custom.hasOwnProperty("showErrorBottom")
|
||||||
|
? touched &&
|
||||||
|
error && (
|
||||||
|
<span
|
||||||
|
id={id + "-error"}
|
||||||
|
className="govuk-error-message"
|
||||||
|
>
|
||||||
|
<span className="govuk-visually-hidden">
|
||||||
|
Error:
|
||||||
|
</span>{" "}
|
||||||
|
{errorMsg}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
: ""}
|
||||||
|
|
||||||
|
<DatePicker
|
||||||
|
{...custom}
|
||||||
|
locale={router.locale}
|
||||||
|
autoOk={true}
|
||||||
|
id={id}
|
||||||
|
dateFormat="dd/MM/yyyy"
|
||||||
|
onChange={onChange}
|
||||||
|
selected={
|
||||||
|
value
|
||||||
|
? typeof value != "object"
|
||||||
|
? parseISO(value)
|
||||||
|
: value
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
className="govuk-input govuk-input--width-10"
|
||||||
|
minDate={minDate}
|
||||||
|
maxDate={maxDate}
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
{custom.hasOwnProperty("showErrorBottom")
|
||||||
|
? touched &&
|
||||||
|
error && (
|
||||||
|
<span
|
||||||
|
id={id + "-error"}
|
||||||
|
className="govuk-error-message"
|
||||||
|
>
|
||||||
|
<span className="govuk-visually-hidden">
|
||||||
|
Error:
|
||||||
|
</span>{" "}
|
||||||
|
{error}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
: ""}
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,129 @@
|
|||||||
|
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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,135 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import { Field } from "redux-form";
|
||||||
|
import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
|
||||||
|
import { getFieldTranslation } from "../helpers/translationHelpers";
|
||||||
|
|
||||||
|
export const RenderYesNo = ({
|
||||||
|
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={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"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{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] == "Yes" ||
|
||||||
|
options[key] == "Ydw"
|
||||||
|
? true
|
||||||
|
: false
|
||||||
|
}
|
||||||
|
checked={
|
||||||
|
typeof value != "undefined" &&
|
||||||
|
value ==
|
||||||
|
(options[key] == "Yes" ||
|
||||||
|
options[key] == "Ydw"
|
||||||
|
? "true"
|
||||||
|
: "false")
|
||||||
|
}
|
||||||
|
onChange={(e) => {
|
||||||
|
let docListObj = custom.documentList;
|
||||||
|
if (
|
||||||
|
custom.requiredDocumentValue ==
|
||||||
|
"Yes" ||
|
||||||
|
custom.requiredDocumentValue ==
|
||||||
|
"Ydw" ||
|
||||||
|
custom.requiredDocumentValue ==
|
||||||
|
"true"
|
||||||
|
) {
|
||||||
|
e.target.value == "Ydw" ||
|
||||||
|
e.target.value == "Yes" ||
|
||||||
|
e.target.value == "true"
|
||||||
|
? (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}
|
||||||
|
>
|
||||||
|
{options[key]}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -6,7 +6,6 @@ import useTranslation from "next-translate/useTranslation";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import React, { useMemo, useState } from "react";
|
import React, { useMemo, useState } from "react";
|
||||||
import DatePicker from "react-datepicker";
|
|
||||||
import "react-datepicker/dist/react-datepicker.css";
|
import "react-datepicker/dist/react-datepicker.css";
|
||||||
import Dropzone from "react-dropzone";
|
import Dropzone from "react-dropzone";
|
||||||
import { Field, FieldArray, change } from "redux-form";
|
import { Field, FieldArray, change } from "redux-form";
|
||||||
@@ -22,15 +21,6 @@ import pickListLookup from "../../data/picklistLookups.json";
|
|||||||
import { bytesToSize, getThumbnailIconByExtension } from "../utils";
|
import { bytesToSize, getThumbnailIconByExtension } from "../utils";
|
||||||
import { setFileCount } from "../../store/appealType/action";
|
import { setFileCount } from "../../store/appealType/action";
|
||||||
|
|
||||||
import {
|
|
||||||
addDays,
|
|
||||||
addMonths,
|
|
||||||
addYears,
|
|
||||||
parseISO,
|
|
||||||
subDays,
|
|
||||||
subMonths,
|
|
||||||
subYears
|
|
||||||
} from "date-fns";
|
|
||||||
import "react-quill-new/dist/quill.snow.css";
|
import "react-quill-new/dist/quill.snow.css";
|
||||||
|
|
||||||
import { useStore as store, useSelector } from "react-redux";
|
import { useStore as store, useSelector } from "react-redux";
|
||||||
@@ -48,6 +38,9 @@ import {
|
|||||||
import { RenderRichMultiline } from "./fields/renderRichMultiline";
|
import { RenderRichMultiline } from "./fields/renderRichMultiline";
|
||||||
import { RenderTextfield } from "./fields/renderTextfield";
|
import { RenderTextfield } from "./fields/renderTextfield";
|
||||||
import { RenderMultiline } from "./fields/renderMultiline";
|
import { RenderMultiline } from "./fields/renderMultiline";
|
||||||
|
import { RenderDatePicker } from "./fields/renderDatePicker";
|
||||||
|
import { RenderYesNo } from "./fields/renderYesNo";
|
||||||
|
import { RenderRadio } from "./fields/renderRadio";
|
||||||
|
|
||||||
export function Textfield(props) {
|
export function Textfield(props) {
|
||||||
const {
|
const {
|
||||||
@@ -450,152 +443,6 @@ export function RichMultiLinefield(props) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const RenderDatePicker = ({
|
|
||||||
datafieldname,
|
|
||||||
name,
|
|
||||||
label,
|
|
||||||
id,
|
|
||||||
errorMsg,
|
|
||||||
input: { onChange, value },
|
|
||||||
meta: { touched, error },
|
|
||||||
...custom
|
|
||||||
}) => {
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
let { t } = useTranslation();
|
|
||||||
|
|
||||||
function dateFromOffset(offsetStr) {
|
|
||||||
const today = new Date();
|
|
||||||
|
|
||||||
// "0" means today
|
|
||||||
if (!offsetStr || offsetStr === "0") {
|
|
||||||
return today;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Expect formats like: -5d, +18m, -10y
|
|
||||||
const match = offsetStr.match(/^([+-])(\d+)([dmy])$/i);
|
|
||||||
|
|
||||||
if (!match) {
|
|
||||||
console.warn("Invalid offset format:", offsetStr);
|
|
||||||
return today; // fallback
|
|
||||||
}
|
|
||||||
|
|
||||||
const [, sign, numberStr, unitRaw] = match;
|
|
||||||
const amount = parseInt(numberStr, 10);
|
|
||||||
const unit = unitRaw.toLowerCase();
|
|
||||||
const isNegative = sign === "-";
|
|
||||||
|
|
||||||
switch (unit) {
|
|
||||||
case "y":
|
|
||||||
return isNegative
|
|
||||||
? subYears(today, amount)
|
|
||||||
: addYears(today, amount);
|
|
||||||
|
|
||||||
case "m":
|
|
||||||
return isNegative
|
|
||||||
? subMonths(today, amount)
|
|
||||||
: addMonths(today, amount);
|
|
||||||
|
|
||||||
case "d":
|
|
||||||
return isNegative
|
|
||||||
? subDays(today, amount)
|
|
||||||
: addDays(today, amount);
|
|
||||||
|
|
||||||
default:
|
|
||||||
return today;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const minDate = dateFromOffset(custom.dateStart);
|
|
||||||
const maxDate = dateFromOffset(custom.dateEnd);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
touched && error
|
|
||||||
? "govuk-form-group govuk-form-group--error"
|
|
||||||
: "govuk-form-group "
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<fieldset
|
|
||||||
className="govuk-fieldset"
|
|
||||||
role="group"
|
|
||||||
aria-describedby={id + "_label"}
|
|
||||||
>
|
|
||||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
|
|
||||||
<label
|
|
||||||
className="govuk-fieldset__heading"
|
|
||||||
id={id + "_label"}
|
|
||||||
htmlFor={id}
|
|
||||||
>
|
|
||||||
{FieldsTranslations(label)}
|
|
||||||
</label>
|
|
||||||
{custom.hasOwnProperty("hint") && (
|
|
||||||
<div className="govuk-hint govuk-!-font-size-14">
|
|
||||||
{t(custom.hint)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</legend>
|
|
||||||
{!custom.hasOwnProperty("showErrorBottom")
|
|
||||||
? touched &&
|
|
||||||
error && (
|
|
||||||
<span
|
|
||||||
id={id + "-error"}
|
|
||||||
className="govuk-error-message"
|
|
||||||
>
|
|
||||||
<span className="govuk-visually-hidden">
|
|
||||||
Error:
|
|
||||||
</span>{" "}
|
|
||||||
{errorMsg}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
: ""}
|
|
||||||
|
|
||||||
{/* {value}
|
|
||||||
<br />
|
|
||||||
{moment(value).format("DD/MM/YY")}
|
|
||||||
<br /> */}
|
|
||||||
|
|
||||||
<DatePicker
|
|
||||||
{...custom}
|
|
||||||
locale={router.locale}
|
|
||||||
autoOk={true}
|
|
||||||
id={id}
|
|
||||||
dateFormat="dd/MM/yyyy"
|
|
||||||
onChange={onChange}
|
|
||||||
selected={
|
|
||||||
value
|
|
||||||
? typeof value != "object"
|
|
||||||
? parseISO(value)
|
|
||||||
: value
|
|
||||||
: null
|
|
||||||
} //{parseISO(value) || null}
|
|
||||||
className="govuk-input govuk-input--width-10"
|
|
||||||
minDate={minDate}
|
|
||||||
maxDate={maxDate}
|
|
||||||
autoComplete="off"
|
|
||||||
//value={!value ? null : moment(value, "DD/MM/yyyy")}
|
|
||||||
/>
|
|
||||||
{custom.hasOwnProperty("showErrorBottom")
|
|
||||||
? touched &&
|
|
||||||
error && (
|
|
||||||
<span
|
|
||||||
id={id + "-error"}
|
|
||||||
className="govuk-error-message"
|
|
||||||
>
|
|
||||||
<span className="govuk-visually-hidden">
|
|
||||||
Error:
|
|
||||||
</span>{" "}
|
|
||||||
{error}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
: ""}
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export function DateFieldPicker(props) {
|
export function DateFieldPicker(props) {
|
||||||
const {
|
const {
|
||||||
name,
|
name,
|
||||||
@@ -769,127 +616,6 @@ export function DateField(props) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const RenderYesNo = ({
|
|
||||||
datafieldname,
|
|
||||||
name,
|
|
||||||
label,
|
|
||||||
id,
|
|
||||||
errorMsg,
|
|
||||||
options,
|
|
||||||
input: { onChange, value },
|
|
||||||
meta: { touched, error },
|
|
||||||
...custom
|
|
||||||
}) => {
|
|
||||||
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"}
|
|
||||||
>
|
|
||||||
{FieldsTranslations(label)}
|
|
||||||
</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"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{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] == "Yes" ||
|
|
||||||
options[key] == "Ydw"
|
|
||||||
? true
|
|
||||||
: false
|
|
||||||
}
|
|
||||||
//checked={value == options[key]}
|
|
||||||
|
|
||||||
checked={
|
|
||||||
typeof value != "undefined" &&
|
|
||||||
value ==
|
|
||||||
(options[key] == "Yes" ||
|
|
||||||
options[key] == "Ydw"
|
|
||||||
? "true"
|
|
||||||
: "false")
|
|
||||||
}
|
|
||||||
onChange={(e) => {
|
|
||||||
let docListObj = custom.documentList;
|
|
||||||
if (
|
|
||||||
custom.requiredDocumentValue ==
|
|
||||||
"Yes" ||
|
|
||||||
custom.requiredDocumentValue ==
|
|
||||||
"Ydw" ||
|
|
||||||
custom.requiredDocumentValue ==
|
|
||||||
"true"
|
|
||||||
) {
|
|
||||||
e.target.value == "Ydw" ||
|
|
||||||
e.target.value == "Yes" ||
|
|
||||||
e.target.value == "true"
|
|
||||||
? (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}
|
|
||||||
>
|
|
||||||
{options[key]}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export function YesNofield(props) {
|
export function YesNofield(props) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
let { t } = useTranslation();
|
let { t } = useTranslation();
|
||||||
@@ -961,118 +687,6 @@ export function YesNofield(props) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const RenderRadio = ({
|
|
||||||
datafieldname,
|
|
||||||
name,
|
|
||||||
label,
|
|
||||||
id,
|
|
||||||
errorMsg,
|
|
||||||
options,
|
|
||||||
input: { onChange, value },
|
|
||||||
meta: { touched, error },
|
|
||||||
...custom
|
|
||||||
}) => {
|
|
||||||
let { t } = useTranslation();
|
|
||||||
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"}
|
|
||||||
>
|
|
||||||
{FieldsTranslations(label)}
|
|
||||||
</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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export function Radiofield(props) {
|
export function Radiofield(props) {
|
||||||
const {
|
const {
|
||||||
name,
|
name,
|
||||||
|
|||||||
Reference in New Issue
Block a user