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