sbl-frontend/src/components/InputEntry.tsx at d2a96ea31daafe296cac04feef5fc90cc890c873 · cfpb/sbl-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/* eslint-disable react/require-default-props */
import type { ComponentPropsWithoutRef, ReactNode } from 'react';
import { forwardRef } from 'react';
import { Element } from 'react-scroll';

import InputErrorMessage from 'components/InputErrorMessage';
import LabelOptional from 'components/LabelOptional';
import { TextInput } from 'components/TextInput';
import { Heading } from 'design-system-react';
import type { InputType } from 'design-system-react/dist/components/TextInput/TextInput';
import type { DisplayFieldProperties } from 'pages/Filing/ViewInstitutionProfile/DisplayField';
import { DisplayField } from 'pages/Filing/ViewInstitutionProfile/DisplayField';

interface InputEntryProperties extends ComponentPropsWithoutRef<'input'> {
  id: string;
  label: JSX.Element | string;
  type?: InputType;
  errorMessage?: string | undefined;
  isDisabled?: boolean;
  isLast?: boolean;
  hideInput?: boolean;
  showError?: boolean;
  children?: ReactNode;
  isOptional?: boolean;
  helperText?: string;
}

const InputEntry = forwardRef<
  HTMLInputElement,
  DisplayFieldProperties & InputEntryProperties
>(
  (
    {
      className = '',
      id,
      name = '',
      errorMessage,
      label,
      isDisabled = false,
      hideInput = false,
      isLast = false,
      showError = true,
      children,
      isOptional = false,
      type = 'text',
      helperText,
      fallbackValue,
      ...properties
    },
    reference,
  ) => {
    const handleError = Boolean(showError && errorMessage);
    return (
      <div className={`${isLast ? '' : 'mb-[1.875rem]'} ${className}`}>
        <Element name={id}>
          {hideInput ? null : (
            <>
              <label htmlFor={id}>
                <Heading
                  type='3'
                  className={`h4 ${helperText ? 'mb-0' : 'mb-[0.625rem]'}`}
                >
                  {label}
                  {isOptional ? <LabelOptional /> : null}
                </Heading>
                {helperText ? (
                  <div className='my-[0.625rem] max-w-[41.875rem] text-grayDark'>
                    {helperText}
                  </div>
                ) : null}
              </label>
              {children}
              <TextInput
                isFullWidth
                type={id === 'email' ? 'email' : type}
                id={id}
                name={name}
                status={handleError ? 'error' : undefined}
                aria-invalid={handleError ? 'true' : 'false'}
                disabled={isDisabled}
                {...properties}
                ref={reference}
              />
            </>
          )}
          {hideInput ? (
            <DisplayField
              label={label}
              value={children}
              fallbackValue={fallbackValue}
            />
          ) : null}
          {handleError ? (
            <div>
              <InputErrorMessage>{errorMessage}</InputErrorMessage>
            </div>
          ) : null}
        </Element>
      </div>
    );
  },
);

export default InputEntry;