import React from 'react'; import { isUndefined } from 'lodash'; import { Spring, animated } from 'react-spring'; import ImageGallery from 'react-image-gallery'; import styled from 'styled-components'; import 'react-image-gallery/styles/css/image-gallery.css'; const Container = styled.div` min-height: 700px; @media only screen and (max-width: 1024px) { min-height: 400px; } .image-gallery-thumbnails-wrapper { margin-top: 10px; } .image-gallery-thumbnail-inner img { width: auto; height: 70px; } `; class ProductGallery extends React.Component { constructor(props) { super(props); this.state = { isVisible: false }; } componentDidMount() { setTimeout(() => { this.setState({ isVisible: true }); }, 400); } componentWillUnmount() { this.setState({ isVisible: false }); } render() { const { isVisible } = this.state; const { variant } = this.props; const isMobile = !isUndefined(global.window) ? global.window.innerWidth < 768 : false; // console.log('images', product.variant.images); const images = variant.images ? variant.images.map(image => ({ original: image.asset.fluid.src, thumbnail: image.asset.fluid.src, })) : []; // console.log('images 2', images); return ( <Container> <Spring native from={{ opacity: 0, marginLeft: -100 }} to={{ opacity: isVisible ? 1 : 0, marginLeft: isVisible ? 0 : -100, }} > {styles => ( <animated.div style={styles}> <ImageGallery items={images} thumbnailPosition="bottom" showPlayButton={false} showNav={false} showThumbnails={!isMobile} showFullscreenButton={!isMobile} showBullets={isMobile} lazyLoad /> </animated.div> )} </Spring> </Container> ); } } export default ProductGallery;