10 |
10 |
11 state = { |
11 state = { |
12 edit: false |
12 edit: false |
13 } |
13 } |
14 |
14 |
15 toggleEditMode = () => { |
15 enterEditMode = () => { |
16 const { edit } = this.state; |
16 const { edit } = this.state; |
17 this.setState({ edit: !edit }) |
17 if (edit) return; |
|
18 this.setState({ edit: true }) |
18 } |
19 } |
19 |
20 |
20 onClickDelete = (e) => { |
21 onClickDelete = (e) => { |
21 e.preventDefault(); |
22 e.preventDefault(); |
22 e.stopPropagation(); |
23 e.stopPropagation(); |
23 |
24 |
24 this.props.notesActions.deleteNote(this.props.note); |
25 this.props.notesActions.deleteNote(this.props.note); |
25 } |
26 } |
26 |
27 |
|
28 onClickButton = (e) => { |
|
29 |
|
30 const plain = this.refs.editor.asPlain(); |
|
31 const raw = this.refs.editor.asRaw(); |
|
32 const html = this.refs.editor.asHtml(); |
|
33 const categories = this.refs.editor.asCategories(); |
|
34 |
|
35 this.props.notesActions.updateNote(this.props.note, { |
|
36 plain, |
|
37 raw, |
|
38 html, |
|
39 categories |
|
40 }); |
|
41 |
|
42 this.setState({ edit: false }) |
|
43 } |
|
44 |
27 renderNoteContent() { |
45 renderNoteContent() { |
28 if (this.state.edit) { |
46 if (this.state.edit) { |
29 return ( |
47 return ( |
30 <div className="note-content"> |
48 <div className="note-content"> |
31 <SlateEditor ref="editor" |
49 <SlateEditor ref="editor" |
32 onChange={this.onEditorChange} |
50 onButtonClick={ this.onClickButton } |
33 onEnterKeyDown={this.onAddNoteClick} |
51 note={ this.props.note } /> |
34 onButtonClick={this.onAddNoteClick} |
|
35 onCheckboxChange={this.onCheckboxChange} |
|
36 isChecked={this.props.autoSubmit} |
|
37 isButtonDisabled={this.state.buttonDisabled} |
|
38 withButtons={false} |
|
39 note={this.props.note} /> |
|
40 </div> |
52 </div> |
41 ) |
53 ) |
42 } |
54 } |
43 |
55 |
44 return ( |
56 return ( |
46 ) |
58 ) |
47 } |
59 } |
48 |
60 |
49 render() { |
61 render() { |
50 return ( |
62 return ( |
51 <div id={"note-" + this.props.note._id} className="note" onClick={ this.toggleEditMode }> |
63 <div id={"note-" + this.props.note._id} className="note" onClick={ this.enterEditMode }> |
52 <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span> |
64 <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span> |
53 <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span> |
65 <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span> |
54 { this.renderNoteContent() } |
66 { this.renderNoteContent() } |
55 <div className="note-margin-comment"> |
67 <div className="note-margin-comment"> |
56 <small className="text-muted">{ this.props.note.marginComment }</small> |
68 <small className="text-muted">{ this.props.note.marginComment }</small> |