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

100% Statements 21/21
100% Branches 10/10
100% Functions 5/5
100% Lines 19/19

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
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190

    124x

    124x
    10x

    10x

    10x

    10x

    10x

    117x
    117x
    3x
    3x

    114x

    10x

    117x
    117x

    117x
    117x

    10x

    10x

     import PropTypes from 'prop-types';
    import React from 'react';
    import {
      ControlGroup,
      getAssistiveText,
      PlainText,
    } from 'src/elements/forms/utils';
    import { removeSomeProps } from 'src/utils/componentHelpers';
    import {
      control,
      controlColor,
      controlStyles,
      defaultControlStyles,
      fontFamilyCore,
      fontSizeCore,
      fontStyleCore,
      letterSpacingCore,
      lineHeightCore,
      plaintextPropsToTrim,
      refType,
      spaceProps,
      textAlignCore,
      textDecorationCore,
      typography,
    } from 'src/utils/styledHelpers';
    import styled from 'styled-components';
    import {
      borderRadius,
      fontWeight,
    } from 'styled-system';
    import { TextInputComponent } from './component';

    const controlStylesTextField = props => (!props.validationError ? controlStyles(props)
      : controlStyles({ ...props, activeColor: 'brandDanger', borderColor: 'brandDanger' }));
    const multilineStyles = props => (props.multiline ? 'resize: none;' : '');
    export const TextFieldComponent = styled(TextInputComponent)`
      ${controlColor}
      ${controlStylesTextField}
      ${fontFamilyCore}
      ${fontSizeCore}
      ${fontStyleCore}
      ${fontWeight}
      ${letterSpacingCore}
      ${lineHeightCore}
      ${multilineStyles}
      ${textAlignCore}
      ${textDecorationCore}
    `;

    TextFieldComponent.propTypes = {
      formStyle: PropTypes.string,
      ...control.propTypes,
      ...typography.propTypes,
    };

    TextFieldComponent.defaultProps = {
      formStyle: '',
      ...defaultControlStyles,
    };

    const propsToTrim = [
      'assistiveText',
      'controlId',
      'controlLabelProps',
      'labelText',
      'validationError',
      ...Object.keys(spaceProps.propTypes),
    ];

    const renderValueOrComponent = propsFromComponent => {
      const {
        plainText,
      } = propsFromComponent;
      if (plainText) {
        const plainTextProps = removeSomeProps(propsFromComponent, plaintextPropsToTrim);
        return <PlainText {...plainTextProps} />;
      }
      return <TextFieldComponent {...propsFromComponent} />;
    };
    export const TextField = props => {
      const {
        activeColor,
        assistiveTextProps,
        bg,
        controlGroupProps,
        controlId,
        controlLabelProps,
        formStyle,
        isRequired,
        labelText,
        name,
        validationError,
        ...otherProps
      } = props;
      const childProps = {
        activeColor,
        bg,
        formStyle,
        id: controlId || name,
        isRequired,
        labelText,
        name,
        validationError,
        ...removeSomeProps(otherProps, propsToTrim),
      };
      const newlabel = !isRequired ? labelText : `${labelText}*`;
      return (
        <ControlGroup
          activeColor={activeColor}
          assistiveText={getAssistiveText(props)}
          assistiveTextProps={assistiveTextProps}
          bg={defaultControlStyles.bg}
          controlId={controlId}
          controlLabelProps={controlLabelProps}
          labelText={newlabel}
          name={name}
          validationError={validationError}
          {...controlGroupProps}
        >
          {renderValueOrComponent({ ...childProps })}
        </ControlGroup>
      );
    };

    TextField.propTypes = {
      /** Defines the color for the label and border color when the focus is in the control. */
      activeColor: PropTypes.string,
      /** Provides helper text for the control.  When provided with no `assistiveText`, `isRequired` will add a default '*Required` helper text.  When provided with `validationError`, `assistiveText`'s value will not be displayed on the UI. */
      assistiveText: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.string,
      ]),
      /** Allows for custom props to be passed down to the `AsssistiveText` component. */
      assistiveTextProps: PropTypes.object,
      /** Defines the background color for the control. */
      bg: PropTypes.string,
      /** Allows for custom props to be passed down to the `ControlGroup` component. */
      controlGroupProps: PropTypes.object,
      /** Will pass its value to the control's `id` as well as the label's `htmlFor`.
       * @deprecated Do not use! Use `name` instead!
      */
      controlId: PropTypes.string,
      /** Allows for custom props to be passed down to the `ControlLabel` component. */
      controlLabelProps: PropTypes.object,
      /** Basic HTML attribute, needed for styling. */
      disabled: PropTypes.bool,
      /** Allows for custom font family to be passed down to the control. */
      fontFamily: PropTypes.string,
      /**
      * Use 'filled' or 'outlined'
      * @see See [Material Design](https://material.io/components/text-fields/#usage) for options */
      formStyle: PropTypes.string,
      /** Allows for a ref to be defined to the DOM input.
      * @see See [React-Select/Replacing Components](https://react-select.com/props#replacing-components) for more */
      inputRef: refType,
      /** This will add an asterisk (*) to the `labelText` and provided `assistiveText` if none is provided. */
      isRequired: PropTypes.bool,
      /** The string value displayed on top of the control in the `ControlLabel` component. */
      labelText: PropTypes.string,
      /** Should be used on each form control.  When no `id` or `controlId` are provided, `name` will populate both fields. */
      name: PropTypes.string,
      /** Used to render a dropdown control as a `PlainText` element. */
      plainText: PropTypes.bool,
      /** Error text that will appear below the control when validation fires. */
      validationError: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.string,
      ]),
      ...borderRadius.propTypes,
    };

    TextField.defaultProps = {
      activeColor: defaultControlStyles.activeColor,
      assistiveText: '',
      assistiveTextProps: {},
      bg: null,
      controlGroupProps: {},
      controlId: '',
      controlLabelProps: {},
      disabled: false,
      fontFamily: defaultControlStyles.fontFamily,
      formStyle: '',
      inputRef: () => {},
      isRequired: false,
      labelText: '',
      name: '',
      plainText: false,
      validationError: '',
    };