import React, { Component } from 'react'
import PropTypes from 'prop-types'
import StylesInputFileLabel from './styled-input'
import InputContainer from 'utils/input-container'
import { FileCode } from 'icons'
class InputFile extends Component {
constructor (props) {
super(props)
this.state = {
filename: ''
}
}
componentWillReceiveProps (nextProps) {
if (nextProps.filename) {
this.setState({
filename: nextProps.filename
})
}
}
render () {
const { name, ...rest } = this.props
return (
<InputContainer {...rest}>
<StylesInputFileLabel className='InputFile'>
<div className='elementContainer'>
<div className='filename'>
{
this.state.filename
? this.state.filename
: 'Buscar arquivo no computador'
}
</div>
<div className='button-upload'>
<FileCode />
<span className='label-button'>Selecionar</span>
</div>
<input
name={name}
id={name}
type='file'
onChange={this.props.onChange}
accept={this.props.accept}
/>
</div>
</StylesInputFileLabel>
</InputContainer>
)
}
}
InputFile.defaultProps = {
filename: '',
message: '',
accept: '',
type: 'default'
}
InputFile.propTypes = {
name: PropTypes.string,
type: PropTypes.string,
filename: PropTypes.string,
label: PropTypes.string,
message: PropTypes.string,
onChange: PropTypes.func,
accept: PropTypes.string
}
export { InputFile }
|