Refactor elements renderers into dedicated field components
This commit is contained in:
@@ -6,7 +6,6 @@ import useTranslation from "next-translate/useTranslation";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import DatePicker from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import Dropzone from "react-dropzone";
|
||||
import { Field, FieldArray, change } from "redux-form";
|
||||
@@ -22,15 +21,6 @@ import pickListLookup from "../../data/picklistLookups.json";
|
||||
import { bytesToSize, getThumbnailIconByExtension } from "../utils";
|
||||
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 { useStore as store, useSelector } from "react-redux";
|
||||
@@ -48,6 +38,9 @@ import {
|
||||
import { RenderRichMultiline } from "./fields/renderRichMultiline";
|
||||
import { RenderTextfield } from "./fields/renderTextfield";
|
||||
import { RenderMultiline } from "./fields/renderMultiline";
|
||||
import { RenderDatePicker } from "./fields/renderDatePicker";
|
||||
import { RenderYesNo } from "./fields/renderYesNo";
|
||||
import { RenderRadio } from "./fields/renderRadio";
|
||||
|
||||
export function Textfield(props) {
|
||||
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) {
|
||||
const {
|
||||
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) {
|
||||
const router = useRouter();
|
||||
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) {
|
||||
const {
|
||||
name,
|
||||
|
||||
Reference in New Issue
Block a user