Image gallery: fix context

src/client/components/App.js

@@ -2,7 +2,6 @@ import React from 'react'
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
 import SemanticPortal from '../containers/SemanticPortal'
 import deepPurple from '@material-ui/core/colors/deepPurple'
-import SimpleReactLightbox from 'simple-react-lightbox';
 
 const theme = createMuiTheme({
   palette: {
@@ -32,9 +31,7 @@ const theme = createMuiTheme({
 
 const App = () => (
   <MuiThemeProvider theme={theme}>
-    <SimpleReactLightbox>
-      <SemanticPortal />
-    </SimpleReactLightbox>
+    <SemanticPortal />
   </MuiThemeProvider>
 )
 

src/client/components/facet_results/ResultTableCell.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import TableCell from '@material-ui/core/TableCell'
 import ObjectListCollapsible from './ObjectListCollapsible'
 import StringList from './StringList'
+import SimpleReactLightbox from 'simple-react-lightbox'
 import ImageGallerySRL from '../main_layout/ImageGallerySRL'
 
 const ResultTableCell = props => {
@@ -41,7 +42,7 @@ const ResultTableCell = props => {
       break
     case 'image':
       cellContent = data
-        ? <ImageGallerySRL data={data} previewImageHeight={previewImageHeight} />
+        ? <SimpleReactLightbox><ImageGallerySRL data={data} previewImageHeight={previewImageHeight} /></SimpleReactLightbox>
         : ''
   }
   if (container === 'div') {

src/client/components/main_layout/ImageGallerySRL.js

 import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
 import { SRLWrapper, useLightbox } from 'simple-react-lightbox'
 import Button from '@material-ui/core/Button'
 
-let options = {
+const useStyles = makeStyles({
+  previewImage: {
+    border: '1px solid lightgray'
+  }
+})
+
+const options = {
+  settings: {
+    hideControlsAfter: false
+  },
   caption: {
     captionFontFamily: 'roboto'
   }
 }
 
+const optionsSingleImage = {
+  ...options,
+  thumbnails: {
+    showThumbnails: false
+  },
+  buttons: {
+    showPrevButton: false,
+    showNextButton: false,
+    showAutoplayButton: false
+  }
+}
+
 const ImageGallerySRL = props => {
+  const classes = useStyles()
   const { openLightbox } = useLightbox()
   let { data } = props
+  let srlOptions = options
   if (!Array.isArray(data)) {
     data = [data]
-    options = {
-      ...options,
-      thumbnails: {
-        showThumbnails: false
-      },
-      buttons: {
-        showPrevButton: false,
-        showNextButton: false,
-        showAutoplayButton: false
-      }
-    }
+    srlOptions = optionsSingleImage
   }
   const images = data.map(item => {
     return {
@@ -35,9 +49,13 @@ const ImageGallerySRL = props => {
   return (
     <>
       <Button onClick={() => openLightbox()}>
-        <img height={props.previewImageHeight} src={images[0].src} />
+        <img
+          className={classes.previewImage}
+          height={props.previewImageHeight}
+          src={images[0].src}
+        />
       </Button>
-      <SRLWrapper options={options} images={images} />
+      <SRLWrapper options={srlOptions} images={images} />
     </>
   )
 }