--- a/client/package.json Wed Aug 15 23:39:02 2018 +0200
+++ b/client/package.json Thu Aug 16 22:32:36 2018 +0200
@@ -4,6 +4,7 @@
"private": true,
"homepage": ".",
"dependencies": {
+ "@types/react-modal": "^3.2.1",
"immutable": "^3.8.1",
"jwt-decode": "^2.2.0",
"localforage": "^1.5.0",
@@ -14,6 +15,7 @@
"react": "^15.5.4",
"react-bootstrap": "^0.31.0",
"react-dom": "^15.5.4",
+ "react-modal": "^3.5.1",
"react-overlays": "^0.7.0",
"react-portal": "^3.1.0",
"react-redux": "^5.0.5",
--- a/client/src/components/Navbar.js Wed Aug 15 23:39:02 2018 +0200
+++ b/client/src/components/Navbar.js Thu Aug 16 22:32:36 2018 +0200
@@ -6,7 +6,8 @@
import { withRouter } from 'react-router';
import { bindActionCreators } from 'redux';
// import logo from './logo.svg';
-import { NavDropdown, MenuItem, Modal} from 'react-bootstrap';
+import { NavDropdown, MenuItem } from 'react-bootstrap';
+import Modal from 'react-modal';
import * as authActions from '../actions/authActions';
import { forceSync } from '../actions/networkActions';
import { groupSetCurrent } from '../actions/groupActions';
@@ -27,7 +28,7 @@
if (isAuthenticated) {
return (
- <NavDropdown title={ currentUser.get('username') }>
+ <NavDropdown className="navs" title={ currentUser.get('username') }>
<li>
<a className="user-dropdown" href="#settings" onClick={onClickSettings}>Paramètres</a>
</li>
@@ -107,13 +108,23 @@
}
class AppNavbar extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { modalIsOpen: false };
+ }
- state = {
- showModal: false
+ openModal = () => {
+ this.setState({modalIsOpen: true});
}
closeModal = () => {
- this.setState({ showModal: false });
+ this.setState({modalIsOpen: false});
+ }
+
+ handleModalCloseRequest = () => {
+ // opportunity to validate something and keep the modal open even if it
+ // requested to be closed
+ this.setState({modalIsOpen: false});
}
onClickHome = (e) => {
@@ -131,7 +142,7 @@
if (isSynchronized) {
this.logout();
} else {
- this.setState({ showModal: true })
+ this.openModal()
}
}
@@ -193,18 +204,25 @@
<LoginNav {...this.props} onLogout={this.onClickLogout} />
</ul>
</div>
- <Modal show={this.state.showModal} onHide={this.closeModal}>
- <Modal.Body>
- <p className="text-center">
- Certaines données n'ont pas encore été sauvegardées.
- <br />
- Si vous continuez, elles seront perdues.
- </p>
- </Modal.Body>
- <Modal.Footer>
- <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button>
- <button type="submit" className="btn btn-default btn-lg" onClick={this.closeModal}>Fermer</button>
- </Modal.Footer>
+ <Modal
+ className="Modal__Bootstrap modal-dialog"
+ // closeTimeoutMS={150}
+ isOpen={this.state.modalIsOpen}
+ onRequestClose={this.handleModalCloseRequest}
+ >
+ <div className="modal-content">
+ <div className="modal-body">
+ <p className="text-center">
+ Certaines données n'ont pas encore été sauvegardées.
+ <br />
+ Si vous continuez, elles seront perdues.
+ </p>
+ </div>
+ <div className="modal-footer">
+ <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button>
+ <button type="submit" className="btn btn-default btn-lg" onClick={this.handleModalCloseRequest}>Fermer</button>
+ </div>
+ </div>
</Modal>
</div>
</nav>
--- a/client/src/components/Navbar.scss Wed Aug 15 23:39:02 2018 +0200
+++ b/client/src/components/Navbar.scss Thu Aug 16 22:32:36 2018 +0200
@@ -38,5 +38,12 @@
}
+.ReactModal__Overlay {
+ margin-top: 5%;
+}
-
+.modal-footer .btn {
+ margin-top: 40px;
+ padding: 16px;
+ font-weight: bold;
+}
--- a/client/src/components/NotesList.js Wed Aug 15 23:39:02 2018 +0200
+++ b/client/src/components/NotesList.js Thu Aug 16 22:32:36 2018 +0200
@@ -1,15 +1,21 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Immutable from 'immutable';
-import { Modal } from 'react-bootstrap';
+import Modal from 'react-modal';
import Note from './Note';
class NotesList extends Component {
-
- state = {
+ constructor(props) {
+ super(props);
+ this.state = {
editingNote: null,
noteToDelete: null,
- showModal: false,
+ modalIsOpen: false,
+ };
+ }
+
+ openModal = () => {
+ this.setState({modalIsOpen: true});
}
enterEditMode = (note) => {
@@ -22,7 +28,7 @@
confirmDelete = (note) => {
this.setState({
- showModal: true,
+ modalIsOpen: true,
noteToDelete: note
})
}
@@ -35,11 +41,21 @@
closeModal = () => {
this.setState({
- showModal: false,
+ modalIsOpen: false,
noteToDelete: null
})
}
+ handleModalCloseRequest = () => {
+ // opportunity to validate something and keep the modal open even if it
+ // requested to be closed
+ this.setState({
+ modalIsOpen: false,
+ noteToDelete: null
+ });
+ }
+
+
updateNote = (note, data) => {
this.props.updateNote(note, data);
}
@@ -66,14 +82,21 @@
annotationCategories={this.props.annotationCategories} />
)}
- <Modal show={this.state.showModal} onHide={this.closeModal}>
- <Modal.Body>
- Êtes vous sûr(e) ?
- </Modal.Body>
- <Modal.Footer>
- <button type="submit" className="btn btn-primary btn-lg" onClick={ this.deleteNote }>Confirm</button>
- <button type="submit" className="btn btn-default btn-lg" onClick={ this.closeModal }>Close</button>
- </Modal.Footer>
+ <Modal
+ className="Modal__Bootstrap modal-dialog"
+ // closeTimeoutMS={150}
+ isOpen={this.state.modalIsOpen}
+ onRequestClose={this.handleModalCloseRequest}
+ >
+ <div className="modal-content">
+ <div className="modal-body">
+ Êtes vous sûr(e) ?
+ </div>
+ <div className="modal-footer">
+ <button type="submit" className="btn btn-primary btn-lg" onClick={ this.deleteNote }>Confirmer</button>
+ <button type="submit" className="btn btn-default btn-lg" onClick={ this.handleModalCloseRequest }>Fermer</button>
+ </div>
+ </div>
</Modal>
</div>
--- a/client/src/components/SessionList.js Wed Aug 15 23:39:02 2018 +0200
+++ b/client/src/components/SessionList.js Thu Aug 16 22:32:36 2018 +0200
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Modal } from 'react-bootstrap';
+import Modal from 'react-modal';
import moment from 'moment';
import '../App.css';
import './SessionList.css';
@@ -12,10 +12,26 @@
import { getCurrentUser, getGroups, getCurrentGroup } from '../selectors/authSelectors';
class SessionList extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ modalIsOpen: false,
+ sessionToDelete: null
+ };
+ }
- state = {
- showModal: false,
- sessionToDelete: null
+ openModal = () => {
+ this.setState({modalIsOpen: true});
+ }
+
+ closeModal = () => {
+ this.setState({modalIsOpen: false});
+ }
+
+ handleModalCloseRequest = () => {
+ // opportunity to validate something and keep the modal open even if it
+ // requested to be closed
+ this.setState({modalIsOpen: false});
}
createSession = () => {
@@ -45,22 +61,18 @@
e.stopPropagation();
this.setState({
- showModal: true,
+ modalIsOpen: true,
sessionToDelete: session
})
}
- closeModal = () => {
- this.setState({ showModal: false })
- }
-
deleteSession = () => {
const { sessionToDelete } = this.state;
this.props.sessionsActions.deleteSession(sessionToDelete);
this.setState({
- showModal: false,
+ modalIsOpen: false,
sessionToDelete: null
})
}
@@ -87,14 +99,21 @@
</div>
</div>
- <Modal show={ this.state.showModal } onHide={ this.closeModal }>
- <Modal.Body>
- Êtes-vous sûr(e) ?
- </Modal.Body>
- <Modal.Footer>
- <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button>
- <button type="button" className="btn btn-default btn-lg" onClick={ this.closeModal }>Fermer</button>
- </Modal.Footer>
+ <Modal
+ className="Modal__Bootstrap modal-dialog"
+ // closeTimeoutMS={150}
+ isOpen={this.state.modalIsOpen}
+ onRequestClose={this.handleModalCloseRequest}
+ >
+ <div className="modal-content">
+ <div className="modal-body">
+ Êtes-vous sûr(e) ?
+ </div>
+ <div className="modal-footer">
+ <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button>
+ <button type="button" className="btn btn-default btn-lg" onClick={ this.handleModalCloseRequest }>Fermer</button>
+ </div>
+ </div>
</Modal>
</div>
);
--- a/client/yarn.lock Wed Aug 15 23:39:02 2018 +0200
+++ b/client/yarn.lock Thu Aug 16 22:32:36 2018 +0200
@@ -9,6 +9,25 @@
address "^1.0.1"
debug "^2.6.0"
+"@types/prop-types@*":
+ version "15.5.5"
+ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.5.tgz#17038dd322c2325f5da650a94d5f9974943625e3"
+ dependencies:
+ "@types/react" "*"
+
+"@types/react-modal@^3.2.1":
+ version "3.2.1"
+ resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.2.1.tgz#48578bb362fd8be732d4e5c57c137b7e1dfd273d"
+ dependencies:
+ "@types/react" "*"
+
+"@types/react@*":
+ version "16.4.11"
+ resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.11.tgz#330f3d864300f71150dc2d125e48644c098f8770"
+ dependencies:
+ "@types/prop-types" "*"
+ csstype "^2.2.0"
+
JSONStream@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea"
@@ -2110,6 +2129,10 @@
dependencies:
cssom "0.3.x"
+csstype@^2.2.0:
+ version "2.5.6"
+ resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.6.tgz#2ae1db2319642d8b80a668d2d025c6196071e788"
+
currently-unhandled@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -2839,6 +2862,10 @@
signal-exit "^3.0.0"
strip-eof "^1.0.0"
+exenv@^1.2.0:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+
exit-hook@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -7026,6 +7053,19 @@
version "16.3.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.2.tgz#f4d3d0e2f5fbb6ac46450641eb2e25bf05d36b22"
+react-lifecycles-compat@^3.0.0:
+ version "3.0.4"
+ resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
+react-modal@^3.5.1:
+ version "3.5.1"
+ resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.5.1.tgz#33d38527def90ea324848f7d63e53acc4468a451"
+ dependencies:
+ exenv "^1.2.0"
+ prop-types "^15.5.10"
+ react-lifecycles-compat "^3.0.0"
+ warning "^3.0.0"
+
react-overlays@^0.7.0, react-overlays@^0.7.4:
version "0.7.4"
resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.7.4.tgz#ef2ec652c3444ab8aa014262b18f662068e56d5c"