UNPKG

@hbsis.uikit/react

Version:
96 lines (85 loc) 1.94 kB
import React, { Component } from 'react' import css from 'classnames' import PropTypes from 'prop-types' import InputMask from 'react-input-mask'; import { SmallSuccess, SmallAlert, SmallBlocked, SmallError } from 'icons' import InputContainer from 'utils/input-container' import StyledInput from './styled-input' class Input extends Component { renderStatusIcon () { switch (this.props.type) { case 'success': return <SmallSuccess /> case 'alert': return <SmallAlert /> case 'blocked': return <SmallBlocked /> case 'error': return <SmallError /> default: return null } } render () { const { htmlType, inputStyle = {}, mask, label, type, message, ...rest } = this.props return ( <InputContainer label={label} type={type} message={message}> <StyledInput> { <div> { mask !== null ? <InputMask {...rest} mask={mask} autoComplete="off" style={inputStyle} /> : <input {...rest} style={inputStyle} type={htmlType} autoComplete="off" /> } </div> } {this.renderStatusIcon()} </StyledInput> </InputContainer> ) } } Input.defaultProps = { message: '' } Input.propTypes = { name: PropTypes.string, label: PropTypes.string, message: PropTypes.string, mask: PropTypes.string, value: PropTypes.string, htmlType: PropTypes.string, onChange: PropTypes.func, onKeyUp: PropTypes.func, type: PropTypes.oneOf([ 'success', 'error', 'alert' ]) } export { Input } export { InputGroup } from './input-group'