From a7b45c81bf4facd2d4e1a7113a041ff8e800a0f0 Mon Sep 17 00:00:00 2001 From: Dorian Goepp 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 = ( - ); + 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 { - {modal} + {this.store.modal.enabled = false}} + isOpen = {this.store.modal.enabled} + ref="modal" + > + + ) } -- GitLab