|
1
|
1 |
import React, {Component} from 'react'; |
|
|
2 |
|
|
8
|
3 |
import { Form, FormGroup, Button } from 'react-bootstrap'; |
|
2
|
4 |
|
|
1
|
5 |
import PropTypes from 'prop-types'; |
|
5
|
6 |
import SlateEditor from './SlateEditor'; |
|
1
|
7 |
|
|
|
8 |
class NoteInput extends Component { |
|
|
9 |
constructor(props) { |
|
|
10 |
super(props); |
|
|
11 |
|
|
|
12 |
this.state = {value: ''}; |
|
|
13 |
|
|
|
14 |
this.onAddNoteClick = this.onAddNoteClick.bind(this); |
|
|
15 |
this.handleChange = this.handleChange.bind(this); |
|
|
16 |
} |
|
|
17 |
|
|
|
18 |
handleChange(event) { |
|
|
19 |
this.setState({value : event.target.value}); |
|
|
20 |
} |
|
|
21 |
|
|
|
22 |
onAddNoteClick(event) { |
|
8
|
23 |
//const text = this.refs.editor.asPlain(); |
|
|
24 |
if(this.state.value && this.state.value.length > 0) { |
|
|
25 |
this.props.addNote(this.state.value); |
|
|
26 |
this.refs.editor.clear(); |
|
|
27 |
} |
|
1
|
28 |
} |
|
|
29 |
|
|
|
30 |
render() { |
|
|
31 |
return ( |
|
2
|
32 |
<Form> |
|
|
33 |
<FormGroup> |
|
8
|
34 |
<SlateEditor ref="editor" onChange={this.handleChange} /> |
|
2
|
35 |
</FormGroup> |
|
|
36 |
<Button type="button" onClick={this.onAddNoteClick}>Add Note</Button> |
|
|
37 |
</Form> |
|
1
|
38 |
); |
|
|
39 |
} |
|
|
40 |
} |
|
|
41 |
|
|
|
42 |
NoteInput.propTypes = { |
|
|
43 |
addNote: PropTypes.func.isRequired |
|
|
44 |
}; |
|
|
45 |
|
|
|
46 |
export default NoteInput; |