10 super(props); |
10 super(props); |
11 this.state = { |
11 this.state = { |
12 editingNote: null, |
12 editingNote: null, |
13 noteToDelete: null, |
13 noteToDelete: null, |
14 modalIsOpen: false, |
14 modalIsOpen: false, |
15 }; |
15 } |
16 } |
16 } |
|
17 |
|
18 componentDidUpdate(prevProps) { |
|
19 if ((this.props.notes || []).size > (prevProps.notes || []).size) { |
|
20 this.node.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}) |
|
21 } |
|
22 } |
|
23 |
|
24 // componentDidUpdate(prevProps) { |
|
25 // if (this.props.notes.size > prevProps.notes.size) { |
|
26 // this.node.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}) |
|
27 // } |
|
28 // } |
17 |
29 |
18 componentWillMount() { |
30 componentWillMount() { |
19 Modal.setAppElement('body'); |
31 Modal.setAppElement('body'); |
20 } |
32 } |
21 |
33 |
66 } |
78 } |
67 |
79 |
68 render() { |
80 render() { |
69 if (this.props.notes.size === 0) { |
81 if (this.props.notes.size === 0) { |
70 return ( |
82 return ( |
71 <div className="alert alert-warning">Commencez votre première note en écrivant dans le champ texte ci-dessous</div> |
83 <div></div> |
72 ); |
84 ); |
73 } |
85 } |
74 |
86 |
75 return ( |
87 return ( |
76 <div> |
88 <div> |
77 |
89 <div> |
78 {this.props.notes.map((note) => |
90 {this.props.notes.map((note) => |
79 <Note |
91 <Note |
80 note={ note } |
92 note={ note } |
81 key={ note._id } |
93 key={ note._id} |
82 onClick={ this.enterEditMode.bind(this, note) } |
94 onClick={ this.enterEditMode.bind(this, note) } |
83 onClose={ this.closeNote } |
95 onClose={ this.closeNote } |
84 onDelete={ this.confirmDelete.bind(this, note) } |
96 onDelete={ this.confirmDelete.bind(this, note) } |
85 onSave={ this.updateNote } |
97 onSave={ this.updateNote } |
86 isEditing={ this.state.editingNote && note === this.state.editingNote } |
98 isEditing={ this.state.editingNote && note === this.state.editingNote } |
87 annotationCategories={this.props.annotationCategories} /> |
99 annotationCategories={this.props.annotationCategories} /> |
88 )} |
100 )} |
|
101 <div className="dummy-div" ref={node => this.node = node}/> |
|
102 </div> |
89 |
103 |
90 <Modal |
104 <Modal |
91 className="Modal__Bootstrap modal-dialog mt-5 pt-5 justify-content-lg-center" |
105 className="Modal__Bootstrap modal-dialog modal-dialog-centered w-25" |
92 // closeTimeoutMS={150} |
106 // closeTimeoutMS={150} |
93 isOpen={this.state.modalIsOpen} |
107 isOpen={this.state.modalIsOpen} |
94 onRequestClose={this.handleModalCloseRequest} |
108 onRequestClose={this.handleModalCloseRequest} |
95 > |
109 > |
96 <div id="delete-note-modal" className="modal-content"> |
110 <div id="delete-note-modal" className="modal-content"> |
97 <span id="delete-note-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span> |
111 <span id="delete-note-close-modal-button" className="material-icons text-right" onClick={ this.handleModalCloseRequest }>close</span> |
98 <div className="modal-body text-center"> |
112 <div className="modal-body text-center"> |
99 <span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette note ?</span> |
113 <span className="modal-text">Supprimer cette note ?</span> |
100 <button type="button" className="btn btn-primary text-secondary font-weight-bold py-1 px-2 mt-3" id="delete-note-modal-button" onClick={ this.deleteNote }>Confirmer</button> |
114 <button type="button" className="btn btn-info text-secondary font-weight-bold py-1 px-2 ml-3" id="delete-note-modal-button" onClick={ this.deleteNote }>Supprimer</button> |
101 </div> |
115 </div> |
102 </div> |
116 </div> |
103 </Modal> |
117 </Modal> |
104 </div> |
118 </div> |
105 ); |
119 ); |