103 lines
3.5 KiB
TypeScript
103 lines
3.5 KiB
TypeScript
import { X, Circle, Check } from "react-feather";
|
|
import { FieldValues, useFormContext } from "react-hook-form";
|
|
|
|
// TODO: Refactor import once V1 migration has happened
|
|
import { Icon } from "../../../Icon";
|
|
|
|
export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
|
|
hintErrors?: string[];
|
|
fieldName: string;
|
|
t: (key: string) => string;
|
|
}) {
|
|
const methods = useFormContext() as ReturnType<typeof useFormContext> | null;
|
|
/* If there's no methods it means we're using these components outside a React Hook Form context */
|
|
if (!methods) return null;
|
|
const { formState } = methods;
|
|
const { hintErrors, fieldName, t } = props;
|
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
const fieldErrors: FieldErrors<T> | undefined = formState.errors[fieldName];
|
|
|
|
if (!hintErrors && fieldErrors && !fieldErrors.message) {
|
|
// no hints passed, field errors exist and they are custom ones
|
|
return (
|
|
<div className="text-gray mt-2 flex items-center text-sm text-gray-700">
|
|
<ul className="ml-2">
|
|
{Object.keys(fieldErrors).map((key: string) => {
|
|
return (
|
|
<li key={key} className="text-blue-700">
|
|
{t(`${fieldName}_hint_${key}`)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (hintErrors && fieldErrors) {
|
|
// hints passed, field errors exist
|
|
return (
|
|
<div className="text-gray mt-2 flex items-center text-sm text-gray-700">
|
|
<ul className="ml-2">
|
|
{hintErrors.map((key: string) => {
|
|
const submitted = formState.isSubmitted;
|
|
const error = fieldErrors[key] || fieldErrors.message;
|
|
return (
|
|
<li
|
|
key={key}
|
|
className={error !== undefined ? (submitted ? "text-red-700" : "") : "text-green-600"}>
|
|
{error !== undefined ? (
|
|
submitted ? (
|
|
<X size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
|
|
) : (
|
|
<Circle fill="currentColor" size="5" className="mr-2 inline-block" />
|
|
)
|
|
) : (
|
|
<Check size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
|
|
)}
|
|
{t(`${fieldName}_hint_${key}`)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// errors exist, not custom ones, just show them as is
|
|
if (fieldErrors) {
|
|
return (
|
|
<div className="text-gray mt-2 flex items-center text-sm text-red-700">
|
|
<Icon.FiInfo className="mr-1 h-3 w-3" />
|
|
<>{fieldErrors.message}</>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!hintErrors) return null;
|
|
|
|
// hints passed, no errors exist, proceed to just show hints
|
|
return (
|
|
<div className="text-gray mt-2 flex items-center text-sm text-gray-700">
|
|
<ul className="ml-2">
|
|
{hintErrors.map((key: string) => {
|
|
// if field was changed, as no error exist, show checked status and color
|
|
const dirty = formState.dirtyFields[fieldName];
|
|
return (
|
|
<li key={key} className={!!dirty ? "text-green-600" : ""}>
|
|
{!!dirty ? (
|
|
<Icon.FiCheck size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
|
|
) : (
|
|
<Icon.FiCircle fill="currentColor" size="5" className="mr-2 inline-block" />
|
|
)}
|
|
{t(`${fieldName}_hint_${key}`)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|