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,
};