Merge branch 'gabshr' into dayana

1 files changed, 83 insertions, 0 deletions

diff --git a/front/odiparpack/app/components/Gallery/PhotoGallery.js b/front/odiparpack/app/components/Gallery/PhotoGallery.js
new file mode 100644
index 0000000..3877bba
--- /dev/null
+++ b/front/odiparpack/app/components/Gallery/PhotoGallery.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import 'ba-styles/vendors/image-lightbox/image-lightbox.css';
+import { Typography, ButtonBase } from '@material-ui/core';
+import ImageLightbox from '../ImageLightbox/ImageLightbox';
+import styles from './photo-jss';
+
+
+class PhotoGallery extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      photoIndex: 0,
+      isOpen: false,
+    };
+  }
+
+  openPopup = (photoIndex) => {
+    this.setState({ isOpen: true, photoIndex });
+  }
+
+  render() {
+    const { photoIndex, isOpen } = this.state;
+    const { classes, imgData } = this.props;
+    return (
+      <div>
+        {isOpen && (
+          <ImageLightbox
+            mainSrc={imgData[photoIndex].img}
+            nextSrc={imgData[(photoIndex + 1) % imgData.length].img}
+            prevSrc={imgData[(photoIndex + (imgData.length - 1)) % imgData.length].img}
+            onCloseRequest={() => this.setState({ isOpen: false })}
+            onMovePrevRequest={() => this.setState({
+              photoIndex: (photoIndex + (imgData.length - 1)) % imgData.length,
+            })
+            }
+            onMoveNextRequest={() => this.setState({
+              photoIndex: (photoIndex + 1) % imgData.length,
+            })
+            }
+          />
+        )}
+        <div className={classes.masonry}>
+          {
+            imgData.map((thumb, index) => (
+              <figure className={classes.item} key={index.toString()}>
+                <ButtonBase
+                  focusRipple
+                  className={classes.image}
+                  focusVisibleClassName={classes.focusVisible}
+                  onClick={() => this.openPopup(index)}
+                >
+                  <img src={thumb.img} alt={thumb.title} />
+                  <span className={classes.imageBackdrop} />
+                  <span className={classes.imageButton}>
+                    <Typography
+                      component="span"
+                      variant="subtitle1"
+                      color="inherit"
+                      className={classes.imageTitle}
+                    >
+                      {thumb.title}
+                      <span className={classes.imageMarked} />
+                    </Typography>
+                  </span>
+                </ButtonBase>
+              </figure>
+            ))
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+PhotoGallery.propTypes = {
+  classes: PropTypes.object.isRequired,
+  imgData: PropTypes.array.isRequired
+};
+
+export default withStyles(styles)(PhotoGallery);