import React, { PureComponent, Fragment } from "react"; import PropTypes from "prop-types"; import style from "./Gallery.module.css"; import { Dimmer, Icon, Image, Button } from "semantic-ui-react"; class Gallery extends PureComponent { state = { activeImage: this.props.currentIndex, touchStart: 0, touchEnd: 0, }; handleThumbnailClick = (index) => this.setState({ activeImage: index }); handleNavigateLeft = () => { if (this.props.currentIndex > 0) { this.props.setCurrentIndex(this.props.currentIndex - 1); } }; handleNavigateRight = () => { if (this.props.currentIndex < this.props.images.length - 1) { this.props.setCurrentIndex(this.props.currentIndex + 1); } }; handleKeyDown = ({ keyCode }) => { if (keyCode === 27) this.props.onClose(); if (this.props.keyboardNavigation !== false) { if (keyCode === 37 || keyCode === 38) this.handleNavigateLeft(); if (keyCode === 39 || keyCode === 40) this.handleNavigateRight(); } }; handleTouchStart = (e) => { if (e.touches && e.touches[0]) { console.log(e); this.setState({ touchStart: e.touches[0].clientX }); } }; handleTouchMove = (e) => { console.log(e); if (e.changedTouches && e.changedTouches[0]) { this.setState({ touchEnd: e.changedTouches[0].clientX }); } }; handleTouchEnd = () => { if (this.state.touchStart - this.state.touchEnd > 100) { // do your stuff here for left swipe this.handleNavigateRight(); } if (this.state.touchStart - this.state.touchEnd < -100) { // do your stuff here for right swipe this.handleNavigateLeft(); } }; componentDidMount() { document.addEventListener("keydown", this.handleKeyDown); } componentWillUnmount() { document.removeEventListener("keydown", this.handleKeyDown); } render() { const { active, images, onClickOutside, onClose, currentIndex, } = this.props; let activeImage = currentIndex; if (images.length >= 1) { // let thumbnails = images.map((image, index) => { // return { src: image.src, key: index }; // }); // let highlight = activeImage; // if (thumbnails.length > 5) { // if (activeImage > 2) { // thumbnails = thumbnails.slice(activeImage - 2, activeImage + 3); // highlight = 2; // } else { // thumbnails = thumbnails.slice(0, 5); // } // } return ( <Fragment> <Dimmer page active={active} onClickOutside={onClickOutside}> <div className={style.inner}> <Button className={style.close} onClick={onClose} icon="close" basic inverted /> <div className={`${style.gutter} ${style.leftGutter}`}> <Button onClick={this.handleNavigateLeft} disabled={activeImage === 0} basic size="huge" circular icon inverted > <Icon name="arrow left" /> </Button> </div> <div className={style.activeImage} onTouchStart={this.handleTouchStart} onTouchMove={this.handleTouchMove} onTouchEnd={this.handleTouchEnd} > <Image src={images[activeImage].urls.regular} /> </div> <div className={`${style.gutter} ${style.rightGutter}`}> <Button onClick={this.handleNavigateRight} disabled={activeImage === images.length - 1} size="huge" basic circular icon inverted > <Icon name="arrow right" /> </Button> </div> <div className={style.detail}> <span>{`${activeImage + 1} of ${images.length}`}</span> </div> </div> </Dimmer> </Fragment> ); } return null; } } Gallery.propTypes = { currentIndex: PropTypes.number, active: PropTypes.bool, keyboardNavigation: PropTypes.bool, images: PropTypes.array, onClickOutside: PropTypes.func, onClose: PropTypes.func, setCurrentIndex: PropTypes.func, }; export default Gallery;