@hbsis.uikit/react
Version:
Biblioteca ReactJS
96 lines (85 loc) • 1.94 kB
JavaScript
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'