import * as React from 'react' ; import styled from 'styled-components' ; export interface ICustomProps { error ? : boolean ; touched ? : boolean ; focusInput ? : boolean ; ignoreMediaQuery ? : boolean ; hideBorder ? : boolean ; autocomplete ? : boolean ; isSmallSized ? : boolean ; isDisabled ? : boolean ; inputFieldWidth ? : string ; } export type ITextInputProps = ICustomProps & React . InputHTMLAttributes < HTMLInputElement > ; const StyledInput = styled . input < ITextInputProps > `
  ${ ( { inputFieldWidth } ) => inputFieldWidth ? `width: ${ inputFieldWidth }` : `width: 100%` };
  padding: 8px 10px;
  height: 40px;
  transition: border-color 500ms ease-out;
  box-sizing: border-box;
  outline: none;
  ${ ( { theme } ) => theme . fonts . bodyStyle };
  color: ${ ( { theme } ) => theme . colors . copy };
  background: ${ ( { isDisabled , theme } ) => isDisabled ? theme . colors . lightGrey : theme . colors . background };

  ${ ( { hideBorder , error , touched , isDisabled , theme } ) => hideBorder ? `
      border:none;
      ${ error && touched ? `box-shadow: 0 0 0px 2px ${ theme . colors . error };` : 'box-shadow: none;' }
      &:focus {
        box-shadow: 0 0 0px 2px ${ error && touched ? theme . colors . error : theme . colors . focus };
      }
        ` : `
      border: 2px solid ${ error && touched ? theme . colors . error : isDisabled ? theme . colors . greyGrey : theme . colors . copy };
      &:focus {
        box-shadow: 0 0 0px 3px ${ theme . colors . focus };
      }
      ` }

  &::-webkit-input-placeholder {
    color: ${ ( { theme } ) => theme . colors . placeholder };
  }

  &::-moz-placeholder {
    color: ${ ( { theme } ) => theme . colors . placeholder };
  }

  &:-ms-input-placeholder {
    color: ${ ( { theme } ) => theme . colors . placeholder };
  }

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  &[maxlength='1'] {
    -moz-appearance: textfield;
    display: block;
    float: left;
    padding: 0;
    text-align: center;
  }

  ${ ( { ignoreMediaQuery , isSmallSized , theme , inputFieldWidth } ) => { return ! ignoreMediaQuery && ! inputFieldWidth ? isSmallSized ? `@media (min-width: ${ theme . grid . breakpoints . md }px) {
        width: 234px;
      }` : `@media (min-width: ${ theme . grid . breakpoints . md }px) {
        width: 535px;
      }` : '' ; } }
` ; export interface IRef { focusField : ( ) => void ; } export const TextInput = React . forwardRef < IRef , ITextInputProps > ( ( { focusInput , maxLength = 250 , isDisabled , inputFieldWidth , ... otherProps } , ref ) => { const $element = React . useRef < HTMLInputElement > ( null ) ; function focusField ( ) { setTimeout ( ( ) => { if ( $element . current ) { $element . current . focus ( ) ; } } ) ; } React . useImperativeHandle ( ref , ( ) => ( { focusField } ) ) ; React . useEffect ( ( ) => { if ( focusInput ) { focusField ( ) ; } } , [ focusInput ] ) ; return ( < StyledInput ref = { $element } name = { otherProps . id } { ... otherProps } autoComplete = { process . env . NODE_ENV === 'production' ? 'off' : undefined } maxLength = { maxLength } disabled = { isDisabled } inputFieldWidth = { inputFieldWidth } / > ) ; } ) ; TextInput . displayName = 'TextInput' ;