-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact-form-component.js
62 lines (57 loc) · 1.98 KB
/
contact-form-component.js
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
import React, { PropTypes } from 'react'
import FormComponent from './../../../common/component/form/form-component'
import { Field, reduxForm } from 'redux-form'
import { I18n } from 'react-redux-i18n'
/**
* ContactForm Component
*/
export class ContactFormComponent extends FormComponent {
/**
* Create a new ContactFormComponent
* @param {Object} props The component properties
* @param {Object} context The app context
*/
/* istanbul ignore next */
constructor (props, context) {
super(props, context)
/** @type {I18n}*/
this.i18n = I18n
}
/**
* Render the component
* @return {Object} React component tree
*/
render () {
return (
<form className='luciole-form' onSubmit={this.props.handleSubmit}>
<Field name='mail' type='email'
component={this.formHelper.renderField.bind(this.formHelper)} label={this.i18n.t('application.contact.mail')}
validate={[ this.formHelper.isRequired, this.formHelper.isValidEmail ]}
/>
<Field name='subject' type='text'
component={this.formHelper.renderField.bind(this.formHelper)} label={this.i18n.t('application.contact.subject')}
validate={[ this.formHelper.isRequired, this.formHelper.isLessThanMinLength(5), this.formHelper.isMoreThanMaxLength(100) ]}
warn={this.formHelper.adviceDemo}
/>
<Field name='content' type='text'
component={this.formHelper.renderField.bind(this.formHelper)} label={this.i18n.t('application.contact.content')}
validate={[ this.formHelper.isRequired, this.formHelper.isLessThanMinLength(10), this.formHelper.isMoreThanMaxLength(2000) ]}
/>
<button type='submit'>Submit</button>
</form>
)
}
}
/**
* The component properties' types
* @type {Object}
*/
ContactFormComponent.propTypes = {
handleSubmit: PropTypes.func.isRequired
}
/**
* Export the component
*/
export default reduxForm({
form: 'contact' // a unique name for this form
})(ContactFormComponent)