From a7b45c81bf4facd2d4e1a7113a041ff8e800a0f0 Mon Sep 17 00:00:00 2001
From: Dorian Goepp <dorian.goepp@gmail.com>
Date: Wed, 21 Aug 2019 17:09:12 +0200
Subject: [PATCH] fix the modal for a good look.
---
package-lock.json | 52 ++++++++++++++++-------------------------------
package.json | 3 ++-
src/index.js | 39 ++++++++++++++++++++++++-----------
3 files changed, 47 insertions(+), 47 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index b525edb..d776380 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8233,9 +8233,9 @@
}
},
"lodash": {
- "version": "4.17.11",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
- "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
+ "version": "4.17.15",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+ "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
@@ -8559,9 +8559,9 @@
}
},
"mixin-deep": {
- "version": "1.3.1",
- "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
- "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+ "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
"requires": {
"for-in": "^1.0.2",
"is-extendable": "^1.0.1"
@@ -10643,6 +10643,11 @@
"resolved": "https://registry.npmjs.org/react-numeric-input/-/react-numeric-input-2.2.3.tgz",
"integrity": "sha1-S/WRjD6v7YUagN8euZLZQQArtVI="
},
+ "react-pure-modal": {
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/react-pure-modal/-/react-pure-modal-1.5.1.tgz",
+ "integrity": "sha512-ac5H4D9D6W1Mi7IMyFoNGxht+uK/YhFkB0S10rG6ptHs9B7kTvYic718u9mRPDep0AWhonl/pWT3E97dTWlrcg=="
+ },
"react-scripts": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.1.tgz",
@@ -11438,9 +11443,9 @@
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
},
"set-value": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.0.tgz",
- "integrity": "sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==",
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+ "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
"requires": {
"extend-shallow": "^2.0.1",
"is-extendable": "^0.1.1",
@@ -12556,35 +12561,14 @@
}
},
"union-value": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
- "integrity": "sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=",
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+ "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
"requires": {
"arr-union": "^3.1.0",
"get-value": "^2.0.6",
"is-extendable": "^0.1.1",
- "set-value": "^0.4.3"
- },
- "dependencies": {
- "extend-shallow": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
- "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
- "requires": {
- "is-extendable": "^0.1.0"
- }
- },
- "set-value": {
- "version": "0.4.3",
- "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz",
- "integrity": "sha1-fbCPnT0i3H945Trzw79GZuzfzPE=",
- "requires": {
- "extend-shallow": "^2.0.1",
- "is-extendable": "^0.1.1",
- "is-plain-object": "^2.0.1",
- "to-object-path": "^0.3.0"
- }
- }
+ "set-value": "^2.0.1"
}
},
"uniq": {
diff --git a/package.json b/package.json
index 078fd87..9a9a640 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
"d3": "^5.8.0",
"d3-scale": "^2.2.2",
"flexlayout-react": "^0.3.3",
- "lodash": "^4.17.11",
+ "lodash": "^4.17.15",
"mobx": "^5.9.0",
"mobx-react": "^5.4.3",
"prop-types": "^15.7.2",
@@ -19,6 +19,7 @@
"react-dom": "^16.7.0",
"react-jsonschema-form": "^1.5.0",
"react-numeric-input": "^2.2.3",
+ "react-pure-modal": "^1.5.1",
"react-scripts": "^3.0.1",
"react-sizeme": "^2.5.2",
"roslib": "^1.0.1",
diff --git a/src/index.js b/src/index.js
index 696f441..588e37c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,8 @@
import React from "react";
import ReactDOM from "react-dom";
+// A little library to display modals on top fo the page
+import PureModal from 'react-pure-modal';
+import 'react-pure-modal/dist/react-pure-modal.min.css';
// MobX, a state manager
import {decorate, observable} from "mobx"
import {observer} from 'mobx-react'
@@ -68,21 +71,26 @@ class Main extends React.Component {
}
}
- componentWillUnmount() {
- if (this.ros) {
- this.ros.close()
- }
+ // When the esc key is pressed, if the modal is enabled, disable it
+ handleKeyDown = (event) => {
+ if(event.keyCode === 27 && this.store.modal.enabled === true) {
+ this.store.modal.enabled = false;
+ }
}
- render() {
- let modal = null;
- if (this.store.modal.enabled) {
- modal = (
- <div id="overlay" tabIndex="-1" role="dialog">
- <Modal store={this.store}/>
- </div>);
+ componentDidMount(){
+ document.addEventListener("keydown", this.handleKeyDown, false);
+ }
+
+ componentWillUnmount() {
+ if (this.ros) {
+ this.ros.close()
}
+ document.removeEventListener("keydown", this.handleKeyDown, false);
+ }
+
+ render() {
function addTab(component, name) {
return () => {
this.store.sharedData.set('newTab', {component: component, name: name});
@@ -102,7 +110,14 @@ class Main extends React.Component {
<Board ros={this.ros} store={this.store}/>
</div>
</div>
- {modal}
+ <PureModal
+ width = "700px"
+ onClose={() => {this.store.modal.enabled = false}}
+ isOpen = {this.store.modal.enabled}
+ ref="modal"
+ >
+ <Modal store={this.store}/>
+ </PureModal>
</div>
)
}
--
GitLab