equal
deleted
inserted
replaced
1 import React, { Component } from 'react'; |
1 import React, { Component } from 'react'; |
2 import PropTypes from 'prop-types'; |
2 import PropTypes from 'prop-types'; |
|
3 import { FormControl } from 'react-bootstrap'; |
3 import { formatTimestamp } from '../utils'; |
4 import { formatTimestamp } from '../utils'; |
4 import SlateEditor from './SlateEditor'; |
5 import SlateEditor from './SlateEditor'; |
5 |
6 |
6 class Note extends Component { |
7 class Note extends Component { |
7 |
8 |
16 |
17 |
17 const plain = this.refs.editor.asPlain(); |
18 const plain = this.refs.editor.asPlain(); |
18 const raw = this.refs.editor.asRaw(); |
19 const raw = this.refs.editor.asRaw(); |
19 const html = this.refs.editor.asHtml(); |
20 const html = this.refs.editor.asHtml(); |
20 const categories = this.refs.editor.asCategories(); |
21 const categories = this.refs.editor.asCategories(); |
|
22 const marginComment = this.marginComment.value; |
21 |
23 |
22 const data = { |
24 const data = { |
23 plain, |
25 plain, |
24 raw, |
26 raw, |
25 html, |
27 html, |
26 categories |
28 categories, |
|
29 marginComment |
27 } |
30 } |
28 |
31 |
29 this.props.onSave(this.props.note, data); |
32 this.props.onSave(this.props.note, data); |
30 } |
33 } |
31 |
34 |
50 return ( |
53 return ( |
51 <div className="note-content" dangerouslySetInnerHTML={{ __html: this.props.note.html }} /> |
54 <div className="note-content" dangerouslySetInnerHTML={{ __html: this.props.note.html }} /> |
52 ) |
55 ) |
53 } |
56 } |
54 |
57 |
|
58 renderNoteMarginComment() { |
|
59 if (this.props.isEditing) { |
|
60 return ( |
|
61 <div className="note-margin-comment"> |
|
62 <FormControl |
|
63 name="margin" |
|
64 componentClass="textarea" |
|
65 placeholder="Enter a margin comment for your note" |
|
66 defaultValue={ this.props.note.marginComment } |
|
67 inputRef={ ref => { this.marginComment = ref; } } /> |
|
68 </div> |
|
69 ) |
|
70 } |
|
71 |
|
72 return ( |
|
73 <div className="note-margin-comment"> |
|
74 <small className="text-muted">{ this.props.note.marginComment }</small> |
|
75 </div> |
|
76 ) |
|
77 } |
|
78 |
55 renderNoteRight() { |
79 renderNoteRight() { |
56 if (this.props.isEditing) { |
80 if (this.props.isEditing) { |
57 return ( |
81 return ( |
58 <a onClick={this.onClickClose}> |
82 <a onClick={this.onClickClose}> |
59 <span className="material-icons">close</span> |
83 <span className="material-icons">close</span> |
72 return ( |
96 return ( |
73 <div id={"note-" + this.props.note._id} className="note" onClick={ this.props.onClick }> |
97 <div id={"note-" + this.props.note._id} className="note" onClick={ this.props.onClick }> |
74 <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span> |
98 <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span> |
75 <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span> |
99 <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span> |
76 { this.renderNoteContent() } |
100 { this.renderNoteContent() } |
77 <div className="note-margin-comment"> |
101 { this.renderNoteMarginComment() } |
78 <small className="text-muted">{ this.props.note.marginComment }</small> |
|
79 </div> |
|
80 { this.renderNoteRight() } |
102 { this.renderNoteRight() } |
81 </div> |
103 </div> |
82 ); |
104 ); |
83 }; |
105 }; |
84 } |
106 } |