MobileConnectInput.js
2.83 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
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 MobileConnectInput 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){
this.props.updateStoreValue('mobileConnectInput',{
value:e.target.value,
valid:e.target.value.toLowerCase()===this.props.mobileConnectCode,
required:this.props.mobileConnectInput.required
})
}
render(){
const className='wrapper-input '+this.props.className
const value=this.props.mobileConnectInput.value
const valid=this.props.mobileConnectInput.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 {
mobileConnectCode: state.ProfilationSelectReducer.mobileConnectCode,
mobileConnectInput: state.ProfilationSelectReducer.mobileConnectInput,
}
};
const mapDispatchToProps = dispatch => ({
updateStoreValue: (prop,value) =>
dispatch(SelectActionCreators.changeProp(prop,value)),
updatePropValue: (steps, activeStep) => dispatch(SelectActionCreators.changeValue(steps, activeStep)),
updateActivation: (index,prop,value) => dispatch(SelectActionCreators.updateActivation(index,prop,value)),
});
export default connect(mapStateToProps, mapDispatchToProps)(MobileConnectInput);