Skip to content

Commit e8c6c78

Browse files
author
Daniel Ehrlich
committed
ContactComponent 95%
1 parent eb344ea commit e8c6c78

File tree

1 file changed

+157
-71
lines changed
  • samples/react-redux-patient-demographics-example/src/routes/Patient/Demographics/Contact

1 file changed

+157
-71
lines changed

‎samples/react-redux-patient-demographics-example/src/routes/Patient/Demographics/Contact/ContactComponent.js‎

Lines changed: 157 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
import React, {Component} from 'react'
2-
import MaskedInput from 'react-text-mask'
2+
import MaskedInput from 'react-text-mask' // Delete?
3+
import Formsy from 'formsy-react'
4+
import { FormsyInput } from '../../../../common/FormsyInput'
5+
import { FormsyDatePicker } from '../../../../common/FormsyDatePicker'
6+
import { FormsyMaskedInput } from '../../../../common/FormsyMaskedInput'
7+
import { wireUpCustomFormsyValidators } from '../../../../common/CustomValidators'
38
import {telephoneFormat} from '../../../../common/Formatters'
49

5-
/***
6-
* @TODO console.log statements
7-
* @TODO change the name of Matt's function to setPropsToLocalState
8-
* @TODO change Matt's function to use 'event' instead of 'e'
9-
* @TODO test email masking with HTML5 and test :)
10-
*/
10+
1111
class Contact extends Component {
1212
constructor() {
1313
super()
14-
this.state = {showForm: false}
14+
this.state = {
15+
showForm: false,
16+
cachedForm: {}
17+
}
1518

1619
this.handleCancel = this.handleCancel.bind(this)
1720
this.handleEdit = this.handleEdit.bind(this)
1821
this.handleInputChange = this.handleInputChange.bind(this)
22+
wireUpCustomFormsyValidators()
1923
}
2024

2125
handleCancel() {
2226
console.log('handleCancel')
27+
this.setState(this.state.cachedForm)
28+
this.setState({ cachedForm: {} })
2329
this.setState({showForm: false})
2430
}
2531

@@ -29,28 +35,50 @@ class Contact extends Component {
2935

3036
handleEdit() {
3137
console.log('handleEdit')
32-
console.log(this.state)
3338
this.setPropsToLocalState()
3439
this.setState({showForm: true})
40+
this.setState({ cachedForm: this.props.contact })
3541
}
3642

3743
handleInputChange(event) {
3844
console.log('handleInputChange')
45+
let value
46+
if(event.target.name === 'phone') {
47+
value = this.sanitizeToJustNumbers(event.target.value.toString())
48+
} else {
49+
value = event.target.value
50+
}
3951
this.setState({
40-
[event.target.name]: event.target.value
52+
[event.target.name]: value
4153
})
4254
}
4355

44-
handleSubmit(event) {
56+
handleSubmit(formValues) {
4557
console.log('handleSubmit')
46-
event.preventDefault()
58+
this.props.updatePatientData(formValues)
59+
this.setState({ showForm: false })
4760
}
61+
62+
sanitizeToJustNumbers(value) {
63+
if (!value) {
64+
return value
65+
}
4866

67+
return value.replace(/[^0-9.]/g, '')
68+
}
69+
4970
setPropsToLocalState() {
5071
const keys = ['name', 'relation', 'address', 'phone', 'city', 'postal', 'state', 'country', 'email']
5172

5273
keys.forEach((keyName) => {
53-
let value = this.props.contact[keyName]
74+
let value
75+
76+
if (keyName === 'phone'){
77+
value = this.sanitizeToJustNumbers(this.props.contact[keyName].toString())
78+
} else {
79+
value = this.props.contact[keyName]
80+
}
81+
5482
this.setState({
5583
[keyName]: value
5684
})
@@ -93,81 +121,139 @@ class Contact extends Component {
93121
)
94122
} else if (this.props.contact && this.state.showForm === true) {
95123
return (
96-
<div>
97-
<form name='edit-contact-info' className='contact-info-form' onSubmit={this.handleSubmit}>
124+
125+
<Formsy.Form onValidSubmit={this.handleSubmit.bind(this)}
126+
name='contactInfoForm'
127+
className='container contact-info-form'
128+
noValidate>
98129
<table className='table'>
99130
<tr>
100-
<td><strong>Name:</strong> <input
101-
type='text'
102-
name='name'
103-
value={this.state.name}
104-
onChange={this.handleInputChange}
105-
required/>
131+
<td><strong>Name:</strong>
132+
<FormsyInput value={this.state.name}
133+
onChange={this.handleInputChange}
134+
name='name'
135+
label='Name'
136+
validations={{
137+
maxLength: 30,
138+
minLength: 2
139+
}}
140+
validationErrors={{
141+
isDefaultRequiredValue: 'Valid name is required',
142+
maxLength: 'You must not enter more than 30 characters',
143+
minLength: 'You must enter at least 2 characters'
144+
}}
145+
required />
146+
</td>
147+
<td><strong>Relation:</strong>
148+
<FormsyInput value={this.state.relation}
149+
onChange={this.handleInputChange}
150+
name='relationship'
151+
label='Relationship'
152+
validations={{
153+
maxLength: 25,
154+
minLength: 1
155+
}}
156+
validationErrors={{
157+
isDefaultRequiredValue: 'Valid relationship is required',
158+
maxLength: 'You must not enter more than 25 characters',
159+
minLength: 'You must enter at least 1 character'
160+
}}
161+
required />
106162
</td>
107-
<td><strong>Relation:</strong> <input
108-
type='text'
109-
name='relation'
110-
value={this.state.relation}
111-
onChange={this.handleInputChange}
112-
required/></td>
113163
</tr>
114164
<tr>
115-
<td><strong>Address:</strong> <input
116-
type='text'
117-
name='address'
118-
value={this.state.address}
119-
onChange={this.handleInputChange}
120-
required/></td>
121-
<td><strong>Phone:</strong> <MaskedInput
122-
mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
123-
type='text'
124-
value={this.state.phone}
125-
onChange={this.handleInputChange}
126-
name='phone'/></td>
165+
<td><strong>Address:</strong>
166+
<FormsyInput value={this.state.address}
167+
onChange={this.handleInputChange}
168+
name='address'
169+
label='Address'
170+
validations={{
171+
maxLength: 20,
172+
minLength: 2
173+
}}
174+
validationErrors={{
175+
isDefaultRequiredValue: 'Valid address is required',
176+
maxLength: 'You must not enter more than 20 characters',
177+
minLength: 'You must enter at least 2 characters'
178+
}}
179+
required /></td>
180+
<td><strong>Phone:</strong>
181+
<FormsyMaskedInput mask={['(',/[1-9]/,/\d/,/\d/,')',' ',/\d/,/\d/,/\d/,'-',/\d/,/\d/,/\d/,/\d/]}
182+
value={this.state.phone}
183+
onChange={this.handleInputChange}
184+
validations={{
185+
isLength: 10
186+
}}
187+
sanitizationFunction={this.sanitizeToJustNumbers}
188+
validationErrors={{
189+
isDefaultRequiredValue: 'Valid phone is required',
190+
isLength: 'Valid phone is required'
191+
}}
192+
name='phone'
193+
label='Phone'
194+
required /></td>
127195
</tr>
128196
<tr>
129-
<td><strong>City:</strong> <input
130-
type='text'
131-
name='city'
132-
value={this.state.city}
133-
onChange={this.handleInputChange}
134-
required/></td>
135-
<td><strong>Postal:</strong> <input
136-
type='text'
137-
name='postal'
138-
value={this.state.postal}
139-
onChange={this.handleInputChange}
140-
required/></td>
197+
<td><strong>City:</strong>
198+
<FormsyInput value={this.state.city}
199+
onChange={this.handleInputChange}
200+
name='city'
201+
label='City'
202+
validations={{
203+
maxLength: 30,
204+
minLength: 2
205+
}}
206+
validationErrors={{
207+
isDefaultRequiredValue: 'Valid city is required',
208+
maxLength: 'You must not enter more than 30 characters',
209+
minLength: 'You must enter at least 2 characters'
210+
}}
211+
required />
212+
</td>
141213
</tr>
142214
<tr>
143-
<td><strong>State:</strong> <input
144-
type='text'
145-
name='state'
146-
value={this.state.state}
147-
onChange={this.handleInputChange}
148-
required/></td>
149-
<td><strong>Country:</strong> <input
150-
type='text'
151-
name='country'
152-
value={this.state.country}
153-
onChange={this.handleInputChange}
154-
required/></td>
215+
<td><strong>State:</strong>
216+
<FormsyInput value={this.state.state}
217+
onChange={this.handleInputChange}
218+
name='state'
219+
label='State'
220+
validations={{
221+
maxLength: 20,
222+
minLength: 2
223+
}}
224+
validationErrors={{
225+
isDefaultRequiredValue: 'Valid state is required',
226+
maxLength: 'You must not enter more than 20 characters',
227+
minLength: 'You must enter at least 2 characters'
228+
}}
229+
required />
230+
</td>
155231
</tr>
156232
<tr>
157-
<td><strong>Email:</strong> <input
158-
type='email'
159-
name='email'
160-
value={this.state.email}
161-
onChange={this.handleInputChange}
162-
required/></td>
233+
<td><strong>Email:</strong>
234+
<FormsyInput value={this.state.email}
235+
onChange={this.handleInputChange}
236+
name='email'
237+
label='Email'
238+
validations={{
239+
maxLength: 20,
240+
isEmail: true
241+
}}
242+
validationErrors={{
243+
isDefaultRequiredValue: 'Valid email is required',
244+
isEmail: 'Valid email is required',
245+
maxLength: 'You must not enter more than 20 characters'
246+
}}
247+
required />
248+
</td>
163249
</tr>
164250
</table>
165251

166252
<button className='btn btn-default btn-sm' type='submit'>SAVE</button>
167253
<button type='button' className='btn btn-default btn-sm' onClick={this.handleCancel}>CANCEL</button>
168254

169-
</form>
170-
</div>
255+
</Formsy.Form>
256+
171257
)
172258
}
173259
}

0 commit comments

Comments
 (0)