4 import { now } from '../utils'; |
4 import { now } from '../utils'; |
5 import './NoteInput.css'; |
5 import './NoteInput.css'; |
6 |
6 |
7 class NoteInput extends Component { |
7 class NoteInput extends Component { |
8 |
8 |
|
9 constructor(props) { |
|
10 super(props); |
|
11 this.editorInst = React.createRef(); |
|
12 } |
|
13 |
|
14 get editor() { |
|
15 return this.editorInst.current; |
|
16 } |
9 state = { |
17 state = { |
10 buttonDisabled: false, |
18 buttonDisabled: false, |
11 startedAt: null, |
19 startedAt: null, |
12 finishedAt: null, |
20 finishedAt: null, |
13 } |
21 } |
20 }); |
28 }); |
21 } |
29 } |
22 |
30 |
23 onAddNoteClick = () => { |
31 onAddNoteClick = () => { |
24 |
32 |
25 const plain = this.refs.editor.asPlain(); |
33 const plain = this.editor.asPlain(); |
26 const raw = this.refs.editor.asRaw(); |
34 const raw = this.editor.asRaw(); |
27 const html = this.refs.editor.asHtml(); |
35 const html = this.editor.asHtml(); |
28 const categories = this.refs.editor.asCategories(); |
36 const categories = this.editor.asCategories(); |
29 // const marginComment = this.marginComment.value; |
37 // const marginComment = this.marginComment.value; |
30 |
38 |
31 this.props.addNote(this.props.session, { |
39 this.props.addNote(this.props.session, { |
32 plain: plain, |
40 plain: plain, |
33 raw: raw, |
41 raw: raw, |
38 |
46 |
39 // marginComment: marginComment, |
47 // marginComment: marginComment, |
40 }); |
48 }); |
41 |
49 |
42 |
50 |
43 this.refs.editor.clear(); |
51 this.editor.clear(); |
44 setTimeout(() => this.refs.editor.focus(), 250); |
52 setTimeout(() => this.editor.focus(), 250); |
45 } |
53 } |
46 |
54 |
47 onCheckboxChange = (e) => { |
55 onCheckboxChange = (e) => { |
48 this.props.setAutoSubmit(e.target.checked); |
56 this.props.setAutoSubmit(e.target.checked); |
49 } |
57 } |
50 |
58 |
51 componentDidMount() { |
59 componentDidMount() { |
52 const text = this.refs.editor.asPlain(); |
60 if(this.editor) { |
53 this.setState({ buttonDisabled: text.length === 0 }); |
61 const text = this.editor.asPlain(); |
|
62 this.setState({ buttonDisabled: text.length === 0 }); |
|
63 } |
54 } |
64 } |
55 |
65 |
56 render() { |
66 render() { |
57 return ( |
67 return ( |
58 <form> |
68 <form> |
59 <div className="editor mb-3"> |
69 <div className="editor mb-3"> |
60 <div className="editor-left sticky-bottom px-2"> |
70 <div className="editor-left sticky-bottom px-2"> |
61 <SlateEditor ref="editor" |
71 <SlateEditor editorRef={this.editorInst} |
62 onChange={this.onEditorChange} |
72 onChange={this.onEditorChange} |
63 onEnterKeyDown={this.onAddNoteClick} |
73 onEnterKeyDown={this.onAddNoteClick} |
64 onButtonClick={this.onAddNoteClick} |
74 onButtonClick={this.onAddNoteClick} |
65 onCheckboxChange={this.onCheckboxChange} |
75 onCheckboxChange={this.onCheckboxChange} |
66 isChecked={this.props.autoSubmit} |
76 isChecked={this.props.autoSubmit} |