# All files / elements/forms/TextField component.js

100% Statements 18/18
90% Branches 9/10
100% Functions 4/4
100% Lines 17/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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

    10x

    10x
    105x
    2x

    103x
    2x

    101x

    124x

    10x

    124x
    124x
    18x

    106x
    1x

    105x

    10x

    10x

     import React from 'react';
    import PropTypes from 'prop-types';
    import { control, typography, refType } from 'src/utils/styledHelpers';
    import { removeSomeProps } from 'src/utils/componentHelpers';
    import Cleave from 'cleave.js/react';
    import CleavePhone from 'cleave.js/dist/addons/cleave-phone.us'; // eslint-disable-line no-unused-vars
    import TextareaAutosize from 'react-textarea-autosize';
    import { cleaveOption, isCleaveInput } from './utils';

    const propsToTrim = [
      'formStyle',
      'labelText',
      'plainText',
      'validationError',
      'currency',
      'email',
      'formatterOptions',
      'inputRef',
      'integer',
      'maxRows',
      'multiline',
      'numeric',
      'password',
      'phone',
      'plainText',
      'postalCode',
      ...Object.keys(control.propTypes),
      ...Object.keys(typography.propTypes),
    ];

    const getInputType = props => {
      if (props.password) {
        return 'password';
      }
      if (props.email) {
        return 'email';
      }
      return 'text';
    };

    const getTabIndex = plainText => (plainText ? '-1' : '0');

    export const TextInputComponent = props => {
      const {
        inputRef, maxRows, multiline, plainText, ...otherProps
      } = props;
      if (isCleaveInput(otherProps)) {
        return (
          <Cleave
            autoComplete="no"
            htmlRef={inputRef}
            options={cleaveOption(otherProps)}
            readOnly={plainText}
            tabIndex={getTabIndex(plainText)}
            {...removeSomeProps(otherProps, propsToTrim)}
          />
        );
      }
      if (multiline) {
        return (
          <>
            <div className="multiline-scroll-shield" />
            <TextareaAutosize
              ref={inputRef}
              maxRows={maxRows}
              readOnly={plainText}
              tabIndex={getTabIndex(plainText)}
              {...removeSomeProps(otherProps, propsToTrim)}
            />
          </>
        );
      }
      return (
        <input
          ref={inputRef}
          readOnly={plainText}
          tabIndex={getTabIndex(plainText)}
          type={getInputType(otherProps)}
          {...removeSomeProps(otherProps, propsToTrim)}
        />
      );
    };

    TextInputComponent.propTypes = {
      email: PropTypes.bool,
      inputRef: refType,
      maxRows: PropTypes.number,
      multiline: PropTypes.bool,
      password: PropTypes.bool,
      plainText: PropTypes.bool,
    };

    TextInputComponent.defaultProps = {
      email: false,
      inputRef: () => {},
      maxRows: 4,
      multiline: false,
      password: false,
      plainText: false,
    };