88 lines
2.6 KiB
JavaScript
88 lines
2.6 KiB
JavaScript
import React from 'react'
|
|
import {galleryImageUrl} from '../lib/helpers'
|
|
|
|
export default class Gallery extends React.Component {
|
|
onPrevClick (e) {
|
|
this.props.dispatch({type: 'PREV_IMAGE'})
|
|
}
|
|
|
|
onNextClick (e) {
|
|
this.props.dispatch({type: 'NEXT_IMAGE'})
|
|
}
|
|
|
|
onImageDotClick (index, e) {
|
|
this.props.dispatch({type: 'VIEW_IMAGE', action: {index}})
|
|
}
|
|
|
|
render () {
|
|
const {images, imageIndex} = this.props
|
|
if (!images || images.length === 0) {
|
|
return null
|
|
}
|
|
|
|
const showPrev = imageIndex > 0
|
|
const showNext = imageIndex < images.length - 1
|
|
|
|
return (
|
|
<div className="ld-image-container">
|
|
<img src={galleryImageUrl(images[imageIndex])} />
|
|
{showPrev
|
|
? <div className="prev-button" onClick={this.onPrevClick.bind(this)}>
|
|
<div>
|
|
<svg
|
|
fill="white"
|
|
version="1.1"
|
|
x="0px"
|
|
y="0px"
|
|
width="100%"
|
|
height="100%"
|
|
viewBox="0 0 512 512"
|
|
>
|
|
<path
|
|
d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
</div>
|
|
: null}
|
|
{showNext
|
|
? <div className="next-button" onClick={this.onNextClick.bind(this)}>
|
|
<div>
|
|
<svg
|
|
fill="white"
|
|
version="1.1"
|
|
x="0px"
|
|
y="0px"
|
|
width="100%"
|
|
height="100%"
|
|
viewBox="0 0 512 512"
|
|
>
|
|
<path
|
|
d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
: null}
|
|
<div className="image-dots">
|
|
{images.map((img, index) => {
|
|
let cls = 'image-dot'
|
|
if (index === imageIndex) {
|
|
cls += ' selected'
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
onClick={this.onImageDotClick.bind(this, index)}
|
|
className={cls}
|
|
/>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|