blob: 3877bba9a50f92ec0f9a2a50ab215730e8808a71 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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);
|
