import React from 'react'; import styled, { keyframes } from 'styled-components'; import Arrow from './Arrow.jsx'; const enlarge = keyframes` 0% { height: 30px; width: 30px; opacity: 80%; } 100% { height: 32px; width: 32px; opacity: 100%; } ` const HeartButton = styled.button` height: 30px; width: 30px; font-size: 15px; background-color: white; color: black; border-radius: 50%; opacity: 80%; :hover{ animation: 0.5s ${enlarge} 1 normal forwards}; `; const Pictures = styled.div({ height: '200px', width: '350px', postion: 'relative', overflow: 'hidden', whiteSpace: 'nowrap', margin: '0 auto' }) const Image = styled.img` height: 100%; width: 100%; `; const ArrowDiv = styled.div({ display: 'flex', height: '100%', width: '100%', justifyContent: 'space-between', }); const HeartDiv = styled.div({ display: 'flex', height: '30px', width: '30px', bottom: '95%', left: '89%', paddingTop: '4px', position: 'relative', justifyContent: 'center', backgroundColor: 'white', borderRadius: '50%', cursor: 'pointer', fontSize: '20px' }); const ImageContainer = styled.div` transform: translateX(-${props => props.translate}px); transition: ease-out 0.75s; height: 100%; width: 100%; display: flex; ` class PictureCarousel extends React.Component { constructor(props) { super(props) this.state = { currentIndex: 0, translate: 0, totalWidth: 350, images: this.props.images, hovering: false } this.nextImage = this.nextImage.bind(this); this.previousImage = this.previousImage.bind(this); this.handleHover = this.handleHover.bind(this); this.toggleHover = this.toggleHover.bind(this); } handleHover() { this.setState(this.toggleHover) } toggleHover(state) { return { hovering: !state.hovering } } nextImage() { const lastImage = this.props.images.length - 1; const nextIndex = this.state.currentIndex + 1; if (this.state.currentIndex !== lastImage) { this.setState({ currentIndex: nextIndex, translate: nextIndex * 350 }); } else { this.setState({ currentIndex: 0, translate: 0 }); } } previousImage() { const firstImage = 0; const lastImage = this.props.images.length - 1; const prevIndex = this.state.currentIndex - 1; if (this.state.currentIndex !== firstImage) { this.setState({ currentIndex: prevIndex, translate: prevIndex * 350 }); } else { this.setState({ currentIndex: lastImage, translate: lastImage * 350 }); } } render () { let arrowDiv; if (this.state.hovering) { arrowDiv = (<ArrowDiv> <HeartDiv><i className="glyphicon glyphicon-heart-empty"></i></HeartDiv> <Arrow clickFunc={this.previousImage} direction="left"> </Arrow> <Arrow clickFunc={this.nextImage} direction="right"> </Arrow> </ArrowDiv>); } else { arrowDiv = <ArrowDiv />; }; return ( <Pictures onMouseEnter={this.handleHover} onMouseLeave={this.handleHover}> <ImageContainer translate={this.state.translate}> {this.state.images.map(image => { return ( <Image key = {image} src = {image} /> ) })} </ImageContainer> {arrowDiv} </Pictures> ) } } export default PictureCarousel;