/
index.js
121 lines (104 loc) · 2.9 KB
/
index.js
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Gallery from 'react-photo-gallery';
import Lightbox from 'components/Lightbox';
import GridImage from './components/GridImage';
class BlogImageGallery extends React.Component {
static propTypes = {
galleryTitle: PropTypes.string.isRequired,
imageMasonryDirection: PropTypes.oneOf(['column', 'row']),
images: PropTypes.arrayOf(
PropTypes.shape({
src: PropTypes.string.isRequired,
caption: PropTypes.string.isRequired,
alt: PropTypes.string.isRequired,
width: PropTypes.number,
height: PropTypes.number
})
).isRequired
};
static defaultProps = {
imageMasonryDirection: 'column'
};
constructor() {
super();
this.state = { currentImage: 0, lightboxIsOpen: false, clientSide: false };
}
componentDidMount() {
this.setState({ clientSide: true });
}
openLightbox = (e, { index }) => {
this.setState({
currentImage: index,
lightboxIsOpen: true
});
};
closeLightbox = () => {
this.setState({
lightboxIsOpen: false
});
};
gotoPrevious = () => {
const { currentImage } = this.state;
// If the current image isn't the first in the list, go to the previous
if (currentImage > 0) {
this.setState({
currentImage: currentImage - 1
});
}
};
gotoNext = () => {
const { images } = this.props;
const { currentImage } = this.state;
// If the current image isn't the list in the list, go to the next
if (currentImage + 1 < images.length) {
this.setState({
currentImage: currentImage + 1
});
}
};
/**
* Sets breakpoints for column width based on containerWidth
*
* @int containerWidth The current width of the image grid
*/
columnConfig = containerWidth => {
let columns = 1;
if (containerWidth >= 500) columns = 2;
if (containerWidth >= 900) columns = 3;
if (containerWidth >= 1500) columns = 4;
return columns;
};
render() {
const { currentImage, lightboxIsOpen, clientSide } = this.state;
const { images, galleryTitle, imageMasonryDirection } = this.props;
return (
<GalleryContainer>
{clientSide && (
<Gallery
columns={this.columnConfig}
onClick={this.openLightbox}
photos={images}
margin={6}
direction={imageMasonryDirection}
renderImage={GridImage}
/>
)}
<Lightbox
isOpen={lightboxIsOpen}
onClose={this.closeLightbox}
onClickPrev={this.gotoPrevious}
onClickNext={this.gotoNext}
images={images}
currentIndex={currentImage}
galleryTitle={galleryTitle}
/>
</GalleryContainer>
);
}
}
export default BlogImageGallery;
const GalleryContainer = styled.section`
margin: 2em 0;
`;