Last active
May 11, 2017 14:11
-
-
Save djadriano/e6350565b16617791f817b5a40e6cf90 to your computer and use it in GitHub Desktop.
Form In React
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { connect } from "react-redux" | |
import store from "../store" | |
import { submitForm } from '../actions/additional-data-actions' | |
import { setGrayScreenMode } from '../actions/core-actions' | |
import BasicPage from '../helpers/basic-page'; | |
import { Link } from 'react-router' | |
import InlineSVG from 'svg-inline-react'; | |
import Step from '../helpers/steps' | |
import lockerIcon from '../../assets/img/icons/locker.svg?inline' | |
import fakeIcon from '../../assets/img/fake-gift.png' | |
const stringRegex = /([^\s])/; | |
const emailRegex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; | |
const cepRegex = /^([0-9]){5}([0-9]){3}$/; | |
const cpfRegex = /^[0-9]{3}.?[0-9]{3}.?[0-9]{3}-?[0-9]{2}/; | |
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | |
@connect(( store ) => { | |
return { | |
isLoading: store.core.isLoading, | |
loggedUser: store.user.loggedUser, | |
prize: store.game.currentPrize | |
}; | |
}) | |
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | |
class AditionalData extends BasicPage { | |
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | |
constructor( props ) { | |
super( props ); | |
this.displayName = 'AditionalData'; | |
} | |
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | |
componentWillMount() { | |
super.componentWillMount(); | |
this.props.dispatch( setGrayScreenMode( true ) ); | |
this.setState( { | |
fields: { | |
name: { | |
valid: false, | |
value: this.props.loggedUser.name || '', | |
validation: 'string' | |
}, | |
email: { | |
valid: false, | |
value: this.props.loggedUser.email || '', | |
validation: 'email' | |
}, | |
mobile: { | |
valid: false, | |
value: this.props.loggedUser.mobile || '', | |
validation: 'phone' | |
}, | |
cpf: { | |
valid: false, | |
value: this.props.loggedUser.cpf || '', | |
validation: 'cpf' | |
}, | |
cep: { | |
valid: false, | |
value: this.props.loggedUser.cep || '', | |
validation: 'cep' | |
}, | |
address: { | |
valid: false, | |
value: this.props.loggedUser.address || '', | |
validation: 'string' | |
}, | |
numb: { | |
valid: false, | |
value: this.props.loggedUser.numb || '', | |
validation: 'string' | |
}, | |
complete: { | |
valid: true, | |
value: this.props.loggedUser.complete || '', | |
validation: null | |
}, | |
neighborhood: { | |
valid: false, | |
value: this.props.loggedUser.neighborhood || '', | |
validation: 'string' | |
}, | |
city: { | |
valid: false, | |
value: this.props.loggedUser.city || '', | |
validation: 'string' | |
}, | |
state: { | |
valid: false, | |
value: this.props.loggedUser.state || '', | |
validation: 'string' | |
}, | |
optin: { | |
valid: false, | |
value: false, | |
validation: 'checkbox' | |
} | |
}, | |
isFormValid: false | |
}); | |
} | |
componentDidMount() { | |
super.componentDidMount(); | |
} | |
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | |
onSubmit( event ) { | |
event.preventDefault(); | |
if ( this.state.isFormValid ) { | |
let fieldsName = Object.keys( this.state.fields ); | |
let fieldsToApi = {}; | |
for( let x in fieldsName ) { | |
fieldsToApi[ fieldsName[ x ] ] = this.state.fields[ fieldsName[ x ] ].value; | |
} | |
this.props.dispatch( submitForm( fieldsToApi ) ); | |
} else { | |
console.log( 'form invalid' ); | |
} | |
} | |
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | |
handleChange( event ) { | |
let currentState = Object.assign( {}, this.state ); | |
let stateField = currentState.fields[ event.target.name ]; | |
switch ( stateField.validation ) { | |
case 'checkbox': | |
stateField.value = ( event.target.checked ? true : false ); | |
break; | |
case 'cpf': | |
case 'cep': | |
let fieldValue = event.target.value.replace( /[\.-]/g, "" ); | |
fieldValue = fieldValue.replace( /[^\d]/g, '' ); | |
stateField.value = fieldValue; | |
break; | |
case 'number': | |
case 'phone': | |
stateField.value = event.target.value.replace( /[^\d]/g, '' ); | |
break; | |
default: | |
stateField.value = event.target.value; | |
break; | |
} | |
this.setState( currentState ); | |
if ( this.isFormValid() ) { | |
currentState.isFormValid = true; | |
this.setState( currentState ); | |
} | |
} | |
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | |
handleBlur( event ) { | |
const currentState = Object.assign( {}, this.state ); | |
let stateField = currentState.fields[ event.target.name ]; | |
stateField.valid = this.validateField( stateField ) ? 'valid' : 'invalid'; | |
this.setState( currentState ); | |
} | |
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | |
validateField( field ) { | |
switch ( field.validation ) { | |
case 'string': | |
if( !stringRegex.test( field.value ) ) return; | |
break; | |
case 'email': | |
if( !emailRegex.test( field.value ) ) return; | |
break; | |
case 'cep': | |
if( !cepRegex.test( field.value ) ) return; | |
break; | |
case 'cpf': | |
if( !this.isValidCPF( field.value ) ) return; | |
break; | |
case 'phone': | |
if( field.value.length < 11 ) return; | |
break; | |
case 'checkbox': | |
if( !field.value ) return; | |
break; | |
} | |
return true; | |
} | |
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | |
isFormValid() { | |
const currentState = Object.keys( this.state.fields ); | |
for ( let field in currentState ) { | |
let fieldCurrentState = this.state.fields[ currentState[ field ] ]; | |
if( !this.validateField( fieldCurrentState ) ) { | |
this.setState({ isFormValid: false }); | |
return; | |
} | |
} | |
return true; | |
} | |
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | |
render() { | |
return ( | |
<section className={'nx-additional-data nx-page'}> | |
<header className="nx-additional-data-header"> | |
<h2 className="nx-additional-data-title nx-title-1-bold">Informações para a entrega</h2> | |
<p className="nx-additional-data-text nx-text-reg-1">Só precisamos de mais uns dados rápidos pra fazer o(a) { this.props.prize ? this.props.prize.name : '' } chegar na sua casa</p> | |
</header> | |
<div className="nx-additional-data-content"> | |
{ | |
this.props.prize ? ( | |
<div className="nx-additional-data-prize"> | |
<img src={ this.props.prize.img } className="nx-form-user-data-icon" /> | |
<div className="nx-form-user-data-prize-info"> | |
<h3 className="nx-form-user-data-prize-title nx-text-bold-1">{ this.props.prize.name }</h3> | |
<ul className="nx-form-user-data-prize-text"> | |
{ | |
this.props.prize.details.map((item, i) => { | |
return <li key={i} className="nx-text-reg-2">{ item }</li> | |
}) | |
} | |
</ul> | |
</div> | |
</div> | |
) : null | |
} | |
<form className="nx-additional-data-form" onSubmit={this.onSubmit.bind( this )}> | |
<fieldset> | |
<p className="nx-additional-data-form-line"> | |
<label className="nx-label">Nome</label> | |
<input | |
type="text" | |
name="name" | |
className={`nx-input ${this.state.fields.name.valid == 'invalid' ? 'nx-input--invalid' : ''}`} | |
placeholder="Insira seu Nome" | |
maxLength="70" | |
value={this.state.fields.name.value} | |
onChange={this.handleChange.bind( this )} | |
onBlur={this.handleBlur.bind( this )} /> | |
</p> | |
<p className="nx-additional-data-form-line"> | |
<label className="nx-label">E-mail</label> | |
<input | |
type="email" | |
name="email" | |
maxLength="50" | |
className={`nx-input ${this.state.fields.email.valid == 'invalid' ? 'nx-input--invalid' : ''}`} | |
placeholder="Insira seu e-mail" | |
value={this.state.fields.email.value} | |
onChange={this.handleChange.bind( this )} | |
onBlur={this.handleBlur.bind( this )} /> | |
</p> | |
<p className="nx-additional-data-form-line"> | |
<label className="nx-label">Telefone</label> | |
<input | |
type="tel" | |
name="mobile" | |
maxLength="11" | |
className={`nx-input ${this.state.fields.mobile.valid == 'invalid' ? 'nx-input--invalid' : ''}`} | |
placeholder="Insira seu Telefone" | |
value={this.state.fields.mobile.value} | |
onChange={this.handleChange.bind( this )} | |
onBlur={this.handleBlur.bind( this )} /> | |
</p> | |
<p className="nx-additional-data-form-line"> | |
<label className="nx-label">CPF</label> | |
<input | |
type="tel" | |
name="cpf" | |
maxLength="11" | |
className={`nx-input ${this.state.fields.cpf.valid == 'invalid' ? 'nx-input--invalid' : ''}`} | |
placeholder="Insira seu CPF" | |
autoComplete="off" | |
value={this.state.fields.cpf.value} | |
onChange={this.handleChange.bind( this )} | |
onBlur={this.handleBlur.bind( this )} /> | |
</p> | |
<p className="nx-additional-data-form-line"> | |
<label className="nx-label">CEP</label> | |
<input | |
type="tel" | |
name="cep" | |
maxLength="8" | |
className={`nx-input ${this.state.fields.cep.valid == 'invalid' ? 'nx-input--invalid' : ''}`} | |
placeholder="Insira seu CEP" | |
autoComplete="off" | |
value={this.state.fields.cep.value} | |
onChange={this.handleChange.bind( this )} | |
onBlur={this.handleBlur.bind( this )} /> | |
</p> | |
<p className="nx-additional-data-form-line"> | |
<label className="nx-label">Endereço</label> | |
<input | |
type="text" | |
name="address" | |
maxLength="100" | |
className={`nx-input ${this.state.fields.address.valid == 'invalid' ? 'nx-input--invalid' : ''}`} | |
placeholder="Insira seu endereço" | |
value={this.state.fields.address.value} | |
onChange={this.handleChange.bind( this )} | |
onBlur={this.handleBlur.bind( this )} /> | |
</p> | |
<div className="nx-additional-data-form-line-address"> | |
<div className="nx-additional-data-form-line"> | |
<label className="nx-label">Número</label> | |
<input | |
type="tel" | |
name="numb" | |
maxLength="10" | |
className={`nx-input ${this.state.fields.numb.valid == 'invalid' ? 'nx-input--invalid' : ''}`} | |
placeholder="Número" | |
value={this.state.fields.numb.value} | |
onChange={this.handleChange.bind( this )} | |
onBlur={this.handleBlur.bind( this )} /> | |
</div> | |
<div className="nx-additional-data-form-line"> | |
<label className="nx-label">Complemento (opcional)</label> | |
<input | |
type="text" | |
name="complete" | |
className="nx-input" | |
maxLength="30" | |
placeholder="Insira seu Complemento" | |
value={this.state.fields.complete.value} | |
onChange={this.handleChange.bind( this )} | |
onBlur={this.handleBlur.bind( this )} /> | |
</div> | |
</div> | |
<p className="nx-additional-data-form-line"> | |
<label className="nx-label">Bairro</label> | |
<input | |
type="text" | |
name="neighborhood" | |
className={`nx-input ${this.state.fields.neighborhood.valid == 'invalid' ? 'nx-input--invalid' : ''}`} | |
placeholder="Insira seu Bairro" | |
maxLength="50" | |
value={this.state.fields.neighborhood.value} | |
onChange={this.handleChange.bind( this )} | |
onBlur={this.handleBlur.bind( this )} /> | |
</p> | |
<p className="nx-additional-data-form-line"> | |
<label className="nx-label">Cidade</label> | |
<input | |
type="text" | |
name="city" | |
className={`nx-input ${this.state.fields.city.valid == 'invalid' ? 'nx-input--invalid' : ''}`} | |
placeholder="Insira sua cidade" | |
maxLength="50" | |
value={this.state.fields.city.value} | |
onChange={this.handleChange.bind( this )} | |
onBlur={this.handleBlur.bind( this )} /> | |
</p> | |
<p className="nx-additional-data-form-line"> | |
<label className="nx-label">Estado</label> | |
<select | |
name="state" | |
className="nx-select" | |
value={this.state.fields.state.value} | |
onChange={this.handleChange.bind( this )}> | |
<option value="">Selecione o seu Estado</option> | |
<option value="sp">São Paulo</option> | |
<option value="rj">Rio de Janeiro</option> | |
</select> | |
</p> | |
<p className="nx-additional-data-form-accept"> | |
<input | |
type="checkbox" | |
name="optin" | |
className="nx-checkbox" | |
value={this.state.fields.optin.value} | |
onChange={this.handleChange.bind( this )} /> | |
<label className="nx-label">Concordo com os <span className="nx-additional-data-form-terms"> <Link to={`/termos-e-condicoes`} target="_blank">termos e condições</Link>.</span></label> | |
</p> | |
<p> | |
<button className={`nx-button ${!this.state.isFormValid ? 'nx-button--disabled' : ''}`}>Confirmar</button> | |
</p> | |
<div className="nx-additional-data-message"> | |
<span><InlineSVG src={lockerIcon} /></span> Suas informações são confidenciais e não serão divulgadas. | |
</div> | |
</fieldset> | |
</form> | |
</div> | |
</section> | |
); | |
} | |
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | |
} | |
export default AditionalData; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment