react-life-design/src/Input/Input.tsx

import * as React from 'react';

import InputStyle from './Input.styled';
import { Icons } from '../index';

export interface IProps {
  feedback?: string|Object;
  placeholder: string;
  type: string;
  isInvalid?: boolean|string;
  isWarning?: boolean|string;
  comment?: string;
  label?: string;
  css?: string|Object;
  passwordType?: boolean;
  onChange?: ({ target }: any) => void|any;
  onBlur?: ({ target }: any) => void|any;
  onFocus?: ({ target }: any) => void|any;
  value?: string|number;
  minLength?: number;
  maxLength?: number;
  name?: string;
  min?: string;
  max?: string;
  disabled?: boolean;
}

interface IState {
  valid?: boolean;
  passwordType?: boolean;
}

export default class Input extends React.PureComponent<IProps, IState> {
  state = {
    passwordType: false,
  };

  togglePassword = (passwordType: any) => this.setState(({ passwordType }));

  renderIcon = (type: string) => {
    switch (type) {
    case 'password': {
      return (
        <Icons.Eye onClick={passwordType => this.togglePassword(passwordType)} />
      );
    }
    case 'search': {
      return (
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.414 18.414' className='search-icon'>
          <g fill='none' stroke='#08a5d3' strokeLinecap='square' strokeWidth='2'>
          <path d='M11.685 1a5.73 5.73 0 1 1-5.73 5.73A5.73 5.73 0 0 1 11.685 1z'/>
          <path strokeMiterlimit='10' d='M7.63 10.784L1.414 17'/>
        </g>
      </svg>
      );
    }
    default:
      return null;
    }
  }

  render () {
    const { feedback, comment, label, type, placeholder, isInvalid, isWarning } = this.props;
    const { passwordType } = this.state;
    const password = passwordType && { type: 'text' };
    const moreInformationInInput = feedback || comment || isInvalid || isWarning;

    return (
      <InputStyle.GroupInput>
        <InputStyle.Input {...this.props} passwordType={passwordType} {...password} />
        <label>{label || placeholder}</label>
        <span className='bar' />
        {(moreInformationInInput) && <span className='feedback'>{moreInformationInInput}</span>}
        {this.renderIcon(type)}
      </InputStyle.GroupInput>
    );
  }
}