1 import React, { Component } from 'react'; |
1 import React, { Component } from 'react'; |
2 import { connect } from 'react-redux'; |
2 import { connect } from 'react-redux'; |
3 import { bindActionCreators } from 'redux'; |
3 import { bindActionCreators } from 'redux'; |
4 import { Form, FormControl, Button, Label } from 'react-bootstrap'; |
4 import { Form, FormControl, Label } from 'react-bootstrap'; |
5 import moment from 'moment'; |
5 import moment from 'moment'; |
6 |
6 |
7 import PropTypes from 'prop-types'; |
7 import PropTypes from 'prop-types'; |
8 import SlateEditor from './SlateEditor'; |
8 import SlateEditor from './SlateEditor'; |
9 import * as notesActions from '../actions/notesActions'; |
9 import * as notesActions from '../actions/notesActions'; |
|
10 import * as userActions from '../actions/userActions'; |
10 |
11 |
11 class NoteInput extends Component { |
12 class NoteInput extends Component { |
12 |
13 |
13 state = { |
14 state = { |
14 buttonDisabled: false, |
15 buttonDisabled: false, |
23 finishedAt: e.finishedAt |
24 finishedAt: e.finishedAt |
24 }); |
25 }); |
25 } |
26 } |
26 |
27 |
27 onAddNoteClick = () => { |
28 onAddNoteClick = () => { |
|
29 |
28 const plain = this.refs.editor.asPlain(); |
30 const plain = this.refs.editor.asPlain(); |
29 const raw = this.refs.editor.asRaw(); |
31 const raw = this.refs.editor.asRaw(); |
30 const html = this.refs.editor.asHtml(); |
32 const html = this.refs.editor.asHtml(); |
31 const categories = this.refs.editor.asCategories(); |
33 const categories = this.refs.editor.asCategories(); |
32 |
34 |
40 categories: categories, |
42 categories: categories, |
41 }); |
43 }); |
42 |
44 |
43 this.refs.editor.clear(); |
45 this.refs.editor.clear(); |
44 setTimeout(() => this.refs.editor.focus(), 250); |
46 setTimeout(() => this.refs.editor.focus(), 250); |
|
47 } |
|
48 |
|
49 onCheckboxChange = (e) => { |
|
50 this.props.userActions.setAutoSubmit(e.target.checked); |
45 } |
51 } |
46 |
52 |
47 componentDidMount() { |
53 componentDidMount() { |
48 const text = this.refs.editor.asPlain(); |
54 const text = this.refs.editor.asPlain(); |
49 this.setState({ buttonDisabled: text.length === 0 }); |
55 this.setState({ buttonDisabled: text.length === 0 }); |
66 render() { |
72 render() { |
67 return ( |
73 return ( |
68 <Form> |
74 <Form> |
69 <div className="editor"> |
75 <div className="editor"> |
70 <div className="editor-left"> |
76 <div className="editor-left"> |
71 <SlateEditor ref="editor" onChange={this.onEditorChange} onEnterKeyDown={this.onAddNoteClick} /> |
77 <SlateEditor ref="editor" |
|
78 onChange={this.onEditorChange} |
|
79 onEnterKeyDown={this.onAddNoteClick} |
|
80 onButtonClick={this.onAddNoteClick} |
|
81 onCheckboxChange={this.onCheckboxChange} |
|
82 isChecked={this.props.autoSubmit} |
|
83 isButtonDisabled={this.state.buttonDisabled} /> |
72 </div> |
84 </div> |
73 <div className="editor-right"> |
85 <div className="editor-right"> |
74 <FormControl |
86 <FormControl |
75 name="margin" |
87 name="margin" |
76 componentClass="textarea" |
88 componentClass="textarea" |
77 placeholder="Enter a margin comment for your note" |
89 placeholder="Enter a margin comment for your note" |
78 inputRef={ ref => { this.description = ref; } } |
90 inputRef={ ref => { this.description = ref; } } |
79 /> |
91 /> |
80 </div> |
92 </div> |
81 </div> |
93 </div> |
82 <Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button> |
|
83 </Form> |
94 </Form> |
84 ); |
95 ); |
85 } |
96 } |
86 } |
97 } |
87 |
98 |
88 function mapStateToProps(state, props) { |
99 function mapStateToProps(state, props) { |
89 return {}; |
100 return { |
|
101 autoSubmit: state.autoSubmit |
|
102 }; |
90 } |
103 } |
91 |
104 |
92 function mapDispatchToProps(dispatch) { |
105 function mapDispatchToProps(dispatch) { |
93 return { |
106 return { |
94 notesActions: bindActionCreators(notesActions, dispatch), |
107 notesActions: bindActionCreators(notesActions, dispatch), |
|
108 userActions: bindActionCreators(userActions, dispatch), |
95 } |
109 } |
96 } |
110 } |
97 |
111 |
98 NoteInput.propTypes = { |
112 NoteInput.propTypes = { |
99 addNote: PropTypes.func.isRequired |
113 addNote: PropTypes.func.isRequired |