import type { FieldValues } from "react-hook-form"; import { useFormContext } from "react-hook-form"; import { Check, Circle, Info, X } from "../../icon"; type hintsOrErrorsProps = { hintErrors?: string[]; fieldName: string; t: (key: string) => string; }; export function HintsOrErrors({ hintErrors, fieldName, t, }: hintsOrErrorsProps) { const methods = useFormContext() as ReturnType | 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; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore const fieldErrors: FieldErrors | undefined = formState.errors[fieldName]; if (!hintErrors && fieldErrors && !fieldErrors.message) { // no hints passed, field errors exist and they are custom ones return (
    {Object.keys(fieldErrors).map((key: string) => { return (
  • {t(`${fieldName}_hint_${key}`)}
  • ); })}
); } if (hintErrors && fieldErrors) { // hints passed, field errors exist return (
    {hintErrors.map((key: string) => { const submitted = formState.isSubmitted; const error = fieldErrors[key] || fieldErrors.message; return (
  • {error !== undefined ? ( submitted ? ( ) : ( ) ) : ( )} {t(`${fieldName}_hint_${key}`)}
  • ); })}
); } // errors exist, not custom ones, just show them as is if (fieldErrors) { return (

{fieldErrors.message}

); } if (!hintErrors) return null; // hints passed, no errors exist, proceed to just show hints return (
    {hintErrors.map((key: string) => { // if field was changed, as no error exist, show checked status and color const dirty = formState.dirtyFields[fieldName]; return (
  • {!!dirty ? ( ) : ( )} {t(`${fieldName}_hint_${key}`)}
  • ); })}
); }