ModalValidatingInput.js
3.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import React, { Component } from 'react';
import greenCheck from '../../img/outlineGreenCheck.svg'
import alertError from '../../img/alert_error.svg'
import * as SelectActionCreators from '../actions/profilationSelect'
import {connect} from 'react-redux';
class ModalValidatingInput extends Component{
constructor(props){
super(props)
this.state={
focus:false,
}
this.handleChange=this.handleChange.bind(this)
this.setFocus=this.setFocus.bind(this)
}
setFocus(val){
this.setState({
...this.state,
focus:val
})
}
handleChange(e){
if((this.props.modal==='activationSaveModal' || this.props.modal==='furnitureModal' || this.props.modal==='trainerModal' || this.props.modal==='contactModal') && !this.props.modalPrivacy.visible){
this.props.updateStoreValue('modalPrivacy',{
value:false,
visible:true
})
}
if((this.props.modal==='activationSaveModal' || this.props.modal==='furnitureModal' || this.props.modal==='trainerModal' || this.props.modal==='contactModal') && !this.props.adAccepted.visible){
this.props.updateStoreValue('adAccepted',{
value:false,
visible:true
})
}
this.props.updateModalValues(this.props.modal,this.props.name,{
...this.props.modalContacts[this.props.modal][this.props.name],
value:e.target.value,
valid:e.target.validity.valid&&e.target.value!==''})
}
render(){
const className='wrapper-input '+this.props.className
const value=this.props.modalContacts[this.props.modal][this.props.name].value
const valid=this.props.modalContacts[this.props.modal][this.props.name].valid
return(<div className={className}>
<label htmlFor="">{this.props.label}</label>
{typeof this.props.subLabel !== 'undefined' &&
<p className='wrapper-input_subLabel'>
{this.props.subLabel}
</p>
}
<div className="input_validation">
<input
type={(typeof this.props.type==='undefined')? 'text': this.props.type}
pattern={this.props.pattern}
onChange={this.handleChange}
className=''
name={this.props.name}
value={value}
placeholder={this.props.placeholder}
onFocus={() => this.setFocus(true)}
onBlur={() => this.setFocus(false)}
/>
<div className="validationIcon">
{valid && value!=='' &&<img src={greenCheck} alt=""/>}
{(!valid && value!=='' && !this.state.focus)&&
<img src={alertError} alt=""/>
}
</div>
</div>
</div>)
}
}
const mapStateToProps = state => {
return {
modalContacts: state.ProfilationSelectReducer.modalContacts,
activationSteps: state.ProfilationSelectReducer.activationSteps,
adAccepted: state.ProfilationSelectReducer.adAccepted,
modalPrivacy: state.ProfilationSelectReducer.modalPrivacy,
}
};
const mapDispatchToProps = dispatch => ({
updateActivation: (index,prop,value) => dispatch(SelectActionCreators.updateActivation(index,prop,value)),
updateStoreValue: (prop,value) =>
dispatch(SelectActionCreators.changeProp(prop,value)),
updatePropValue: (steps, activeStep) => dispatch(SelectActionCreators.changeValue(steps, activeStep)),
updateModalValues: (modal,field,value) => dispatch(SelectActionCreators.updateModalValues(modal,field,value)),
});
export default connect(mapStateToProps, mapDispatchToProps)(ModalValidatingInput);