From c6413f0ddba312ec7efbc41359f844eba55095ff Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 2 Apr 2019 20:41:08 +0200 Subject: modal... --- client/modalImage/modal.css | 4 ++-- client/modalImage/modalImage.container.js | 12 ++++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) (limited to 'client/modalImage') diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css index d9180125..fb3c7ab5 100644 --- a/client/modalImage/modal.css +++ b/client/modalImage/modal.css @@ -25,8 +25,8 @@ align-items: center; } .modal img { - max-width: 80vw; - max-height: 80vh; + max-width: 90vw; + max-height: 90vh; } .modal .caption { display: block; diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index a637deb6..55904c40 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -10,7 +10,7 @@ import csv from 'parse-csv' class ModalImage extends Component { state = { - visible: true, + visible: false, images: [], index: 0, } @@ -26,8 +26,11 @@ class ModalImage extends Component { if (document.activeElement && document.activeElement !== document.body) { return null } - // console.log(e.keyCode) + console.log(e.keyCode) switch (e.keyCode) { + case 27: // esc + this.close() + break case 37: // left this.prev() break @@ -41,16 +44,21 @@ class ModalImage extends Component { } loadImage(index) { + const { index, images } = this.state + if (!images.length) return + if (index < 0 || index >= this.images.length) return this.setState({ visible: true, index }) } prev() { const { index, images } = this.state + if (!images.length) return this.setState({ index: (images.length + index - 1) % images.length }) } next() { const { index, images } = this.state + if (!images.length) return this.setState({ index: (index + 1) % images.length }) } -- cgit v1.2.3-70-g09d2