All files / ts/components/precomposed input-with-prefix-suffix.tsx

100% Statements 21/21
100% Branches 4/4
100% Functions 2/2
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 8032x 32x   32x 32x                                                                             32x       32x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x     5x                               32x   32x  
import * as React from 'react';
import { PureComponent } from 'react';
import { ComponentProps } from '../../types';
import InputGroup from '../forms/input-group';
import InputGroupAddon from '../forms/input-group-addon';
 
export interface PrefixSuffixProps extends ComponentProps {
  /**
   * Content to display to the left of the input.
   */
  prefix?: React.ReactChild;
  /**
   * Content to display to the right of the input.
   */
  suffix?: React.ReactChild;
  /**
   * Set the style `display: block;` so the input group fills its parent.
   */
  block?: boolean;
  /**
   * Class name to apply to the input.
   */
  inputClassName?: string;
  /**
   * Class name to apply to the prefix.
   */
  prefixClassName?: string;
  /**
   * Class name to apply to the suffix.
   */
  suffixClassName?: string;
  value?: string | string[] | number; // Adds compatibility with React 15 and 16 types
}
 
export type InputWithPrefixSuffixProps = React.HTMLAttributes<
  HTMLInputElement
> &
  PrefixSuffixProps;
 
/**
 * A precomposed Input containing an optional prefix (InputGroupAddon), an input,
 * and an optional suffix (InputGroupAddon).
 */
export class InputWithPrefixSuffix extends PureComponent<
  InputWithPrefixSuffixProps,
  {}
> {
  public render() {
    const {
      prefix,
      suffix,
      block,
      className,
      inputClassName,
      prefixClassName,
      suffixClassName,
      component,
      ...remainingProps
    } = this.props;
 
    return (
      <InputGroup component={component} block={block} className={className}>
        {typeof prefix !== 'undefined' && (
          <InputGroupAddon className={prefixClassName}>
            {prefix}
          </InputGroupAddon>
        )}
        <input className={inputClassName} {...remainingProps} />
        {typeof suffix !== 'undefined' && (
          <InputGroupAddon className={suffixClassName}>
            {suffix}
          </InputGroupAddon>
        )}
      </InputGroup>
    );
  }
}
 
export default InputWithPrefixSuffix;