This repository has been archived by the owner on Apr 22, 2023. It is now read-only.
/
index.js
73 lines (63 loc) · 1.49 KB
/
index.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
63
64
65
66
67
68
69
70
71
72
73
// @flow
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { css, StyleSheet } from 'aphrodite';
const styles = StyleSheet.create({
form: {
padding: '0px 10px 10px 10px',
background: '#fff',
},
input: {
borderWidth: '2px',
borderColor: 'rgb(214,214,214)',
},
button: {
color: 'rgb(80,80,80)',
background: 'rgb(214,214,214)',
borderWidth: '2px',
borderColor: 'rgb(214,214,214)',
},
});
type Props = {
onSubmit: () => void,
handleSubmit: () => void,
submitting: boolean,
}
class MessageForm extends Component {
props: Props
handleSubmit = data => this.props.onSubmit(data);
render() {
const { handleSubmit, submitting } = this.props;
return (
<form onSubmit={handleSubmit(this.handleSubmit)} className={css(styles.form)}>
<div className="input-group">
<Field
name="text"
type="text"
component="input"
className={`form-control ${css(styles.input)}`}
/>
<div className="input-group-btn">
<button
disabled={submitting}
className={`btn ${css(styles.button)}`}
>
Send
</button>
</div>
</div>
</form>
);
}
}
const validate = (values) => {
const errors = {};
if (!values.text) {
errors.text = 'Required';
}
return errors;
};
export default reduxForm({
form: 'newMessage',
validate,
})(MessageForm);