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 Immutable from 'immutable'; |
3 import Immutable from 'immutable'; |
4 import { Modal } from 'react-bootstrap'; |
4 import Modal from 'react-modal'; |
5 import Note from './Note'; |
5 import Note from './Note'; |
6 |
6 |
7 class NotesList extends Component { |
7 class NotesList extends Component { |
8 |
8 constructor(props) { |
9 state = { |
9 super(props); |
|
10 this.state = { |
10 editingNote: null, |
11 editingNote: null, |
11 noteToDelete: null, |
12 noteToDelete: null, |
12 showModal: false, |
13 modalIsOpen: false, |
|
14 }; |
|
15 } |
|
16 |
|
17 openModal = () => { |
|
18 this.setState({modalIsOpen: true}); |
13 } |
19 } |
14 |
20 |
15 enterEditMode = (note) => { |
21 enterEditMode = (note) => { |
16 this.setState({ editingNote: note }); |
22 this.setState({ editingNote: note }); |
17 } |
23 } |
20 this.setState({ editingNote: null }); |
26 this.setState({ editingNote: null }); |
21 } |
27 } |
22 |
28 |
23 confirmDelete = (note) => { |
29 confirmDelete = (note) => { |
24 this.setState({ |
30 this.setState({ |
25 showModal: true, |
31 modalIsOpen: true, |
26 noteToDelete: note |
32 noteToDelete: note |
27 }) |
33 }) |
28 } |
34 } |
29 |
35 |
30 deleteNote = () => { |
36 deleteNote = () => { |
33 this.closeModal(); |
39 this.closeModal(); |
34 } |
40 } |
35 |
41 |
36 closeModal = () => { |
42 closeModal = () => { |
37 this.setState({ |
43 this.setState({ |
38 showModal: false, |
44 modalIsOpen: false, |
39 noteToDelete: null |
45 noteToDelete: null |
40 }) |
46 }) |
41 } |
47 } |
|
48 |
|
49 handleModalCloseRequest = () => { |
|
50 // opportunity to validate something and keep the modal open even if it |
|
51 // requested to be closed |
|
52 this.setState({ |
|
53 modalIsOpen: false, |
|
54 noteToDelete: null |
|
55 }); |
|
56 } |
|
57 |
42 |
58 |
43 updateNote = (note, data) => { |
59 updateNote = (note, data) => { |
44 this.props.updateNote(note, data); |
60 this.props.updateNote(note, data); |
45 } |
61 } |
46 |
62 |
64 onSave={ this.updateNote } |
80 onSave={ this.updateNote } |
65 isEditing={ this.state.editingNote && note === this.state.editingNote } |
81 isEditing={ this.state.editingNote && note === this.state.editingNote } |
66 annotationCategories={this.props.annotationCategories} /> |
82 annotationCategories={this.props.annotationCategories} /> |
67 )} |
83 )} |
68 |
84 |
69 <Modal show={this.state.showModal} onHide={this.closeModal}> |
85 <Modal |
70 <Modal.Body> |
86 className="Modal__Bootstrap modal-dialog" |
71 Êtes vous sûr(e) ? |
87 // closeTimeoutMS={150} |
72 </Modal.Body> |
88 isOpen={this.state.modalIsOpen} |
73 <Modal.Footer> |
89 onRequestClose={this.handleModalCloseRequest} |
74 <button type="submit" className="btn btn-primary btn-lg" onClick={ this.deleteNote }>Confirm</button> |
90 > |
75 <button type="submit" className="btn btn-default btn-lg" onClick={ this.closeModal }>Close</button> |
91 <div className="modal-content"> |
76 </Modal.Footer> |
92 <div className="modal-body"> |
|
93 Êtes vous sûr(e) ? |
|
94 </div> |
|
95 <div className="modal-footer"> |
|
96 <button type="submit" className="btn btn-primary btn-lg" onClick={ this.deleteNote }>Confirmer</button> |
|
97 <button type="submit" className="btn btn-default btn-lg" onClick={ this.handleModalCloseRequest }>Fermer</button> |
|
98 </div> |
|
99 </div> |
77 </Modal> |
100 </Modal> |
78 |
101 |
79 </div> |
102 </div> |
80 ); |
103 ); |
81 } |
104 } |