import React, { Component } from 'react';
import FormValidator from './FormValidator'
import Popup from './Popup'
class Formulario extends Component {
constructor(props) {
super(props)
this.validador = new FormValidator([
{
campo: "nome",
metodo: "isEmpty",
validoQuando:false,
mensagem
:"Entre com um Nome"
},
{
campo: "livro",
metodo: "isEmpty",
validoQuando:false,
mensagem:"Entre com um Livro"
},
{
campo: "preco",
metodo: "isInt",
args:[{min:0, max:99999}],
validoQuando:true,
mensagem:"Entre com um Numerico"
}
]);
this.stateInicial = {
nome: '',
livro: '',
preco: '',
validacao: this.validador.valido()
}
this.state = this.stateInicial;
}
escutadordeInput = event => {
const { name, value } = event.target;
this.setState({
[name]: value
})
}
submitFormulario = () => {
const validacao = this.validador.valida(this.state);
if (validacao.isValid) {
this.props.escutadorDeSubmit(this.state)
this.setState(this.stateInicial);
} else {
const{ nome, livro, preco } = validacao
const campos = [nome, livro, preco];
const camposIvalidos = campos.filter(elem =>{
return elem.isInvalid;
})
camposIvalidos.forEach(campo => {
Popup.exibeMensagem('error', campo.mensagem)
});
}
}
render() {
const { nome, livro, preco } = this.state;
return (
<form>
<div className="row">
<div className="input-field col s4">
<label className="input-field" htmlFor="nome">Nome</label>
<input className="validate" id="nome" type="text" name="nome" value={nome} onChange={this.escutadordeInput} />
</div>
<div className="input-field col s4">
<label className="input-field" htmlFor="livro">Livro</label>
<input className="validate" id="livro" type="text" name="livro" value={livro} onChange={this.escutadordeInput} />
</div>
<div className="input-field col s4">
<label className="input-field" htmlFor="preco">Preço</label>
<input className="validate" id="preco" type="text" name="preco" value={preco} onChange={this.escutadordeInput} />
</div>
</div>
<button className="waves-effect waves-light btn" onClick={this.submitFormulario} type="button">Salvar</button>
</form>
);
}
}
export default Formulario;