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 { formatTimestamp } from '../utils'; |
3 import { formatTimestamp } from '../utils'; |
4 import SlateEditor from './SlateEditor'; |
4 import SlateEditor from './SlateEditor'; |
|
5 import './Note.css'; |
5 |
6 |
6 class Note extends Component { |
7 class Note extends Component { |
7 |
8 |
8 onClickDelete = (e) => { |
9 onClickDelete = (e) => { |
9 e.preventDefault(); |
10 e.preventDefault(); |
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(); |
21 const marginComment = this.marginComment.value; |
22 // const marginComment = this.marginComment.value; |
22 |
23 |
23 const data = { |
24 const data = { |
24 plain, |
25 plain, |
25 raw, |
26 raw, |
26 html, |
27 html, |
27 categories, |
28 categories, |
28 marginComment |
29 // marginComment |
29 } |
30 } |
30 |
31 |
31 this.props.onSave(this.props.note, data); |
32 this.props.onSave(this.props.note, data); |
32 } |
33 } |
33 |
34 |
39 } |
40 } |
40 |
41 |
41 renderNoteContent() { |
42 renderNoteContent() { |
42 if (this.props.isEditing) { |
43 if (this.props.isEditing) { |
43 return ( |
44 return ( |
44 <div className="note-content"> |
45 <div className="note-content w-100 pl-2 pt-2"> |
45 <SlateEditor ref="editor" |
46 <SlateEditor ref="editor" |
46 onButtonClick={ this.onClickButton } |
47 onButtonClick={ this.onClickButton } |
47 note={ this.props.note } |
48 note={ this.props.note } |
48 annotationCategories={ this.props.annotationCategories } /> |
49 annotationCategories={ this.props.annotationCategories } /> |
49 </div> |
50 </div> |
50 ) |
51 ) |
51 } |
52 } |
52 |
53 |
53 return ( |
54 return ( |
54 <div className="note-content" dangerouslySetInnerHTML={{ __html: this.props.note.html }} /> |
55 <div className="note-content w-100 pl-2 pt-2" dangerouslySetInnerHTML={{ __html: this.props.note.html }} /> |
55 ) |
56 ) |
56 } |
57 } |
57 |
58 |
58 renderNoteMarginComment() { |
59 // renderNoteMarginComment() { |
59 if (this.props.isEditing) { |
60 // if (this.props.isEditing) { |
60 return ( |
61 // return ( |
61 <div className="note-margin-comment"> |
62 // <div className="row"> |
62 <input type="text" className="form-control" |
63 // <div className="note-margin-comment w-25 mt-3"> |
63 name="margin" |
64 // <input type="text" className="form-control" |
64 componentClass="textarea" |
65 // name="margin" |
65 placeholder="Enter a margin comment for your note" |
66 // componentClass="textarea" |
66 defaultValue={ this.props.note.marginComment } |
67 // placeholder="Espace pour un commentaire de marge" |
67 // inputRef={ ref => { this.marginComment = ref; } } /> |
68 // defaultValue={ this.props.note.marginComment } |
68 ref={(marginComment) => { this.marginComment = marginComment; }} /> |
69 // // inputRef={ ref => { this.marginComment = ref; } } /> |
69 </div> |
70 // ref={(marginComment) => { this.marginComment = marginComment; }} /> |
70 ) |
71 // </div> |
71 } |
72 // </div> |
|
73 // ) |
|
74 // } |
72 |
75 |
73 return ( |
76 // return ( |
74 <div className="note-margin-comment"> |
77 // <div className="note-margin-comment w-25 mt-5"> |
75 <small className="text-muted">{ this.props.note.marginComment }</small> |
78 // <small className="text-muted">{ this.props.note.marginComment }</small> |
76 </div> |
79 // </div> |
77 ) |
80 // ) |
78 } |
81 // } |
79 |
82 |
80 renderNoteRight() { |
83 renderNoteRight() { |
81 if (this.props.isEditing) { |
84 if (this.props.isEditing) { |
82 return ( |
85 return ( |
83 <a onClick={this.onClickClose}> |
86 <a onClick={this.onClickClose}> |
93 ) |
96 ) |
94 } |
97 } |
95 |
98 |
96 render() { |
99 render() { |
97 return ( |
100 return ( |
98 <div id={"note-" + this.props.note._id} className="note" onClick={ this.props.onClick }> |
101 <div id={"note-" + this.props.note._id} className="note text-sm mr-5 pt-1" onClick={ this.props.onClick }> |
99 <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span> |
102 <div className="mr-5"> |
100 <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span> |
103 <small className="start text-warning pt-2">{ formatTimestamp(this.props.note.startedAt) }</small> |
|
104 <small className="finish text-warning pb-2">{ formatTimestamp(this.props.note.finishedAt) }</small> |
|
105 </div> |
101 { this.renderNoteContent() } |
106 { this.renderNoteContent() } |
102 { this.renderNoteMarginComment() } |
107 {/* { this.renderNoteMarginComment() } */} |
|
108 <div className="float-right"> |
103 { this.renderNoteRight() } |
109 { this.renderNoteRight() } |
104 </div> |
110 </div> |
|
111 </div> |
105 ); |
112 ); |
106 }; |
113 }; |
107 } |
114 } |
108 |
115 |
109 Note.propTypes = { |
116 Note.propTypes = { |