carousel.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'


class Carousel extends Component {
  static propTypes = {
    banners: PropTypes.arrayOf(PropTypes.shape({
      img: PropTypes.string,
      link: PropTypes.string,
    })).isRequired
  }

  state = {
    containerWidth: 0,
    slideCurrent: 0,
  }

  componentDidMount = () => {
    this.setWidth()
    window.addEventListener('resize', this.onResize)
  }

  componentWillUnmount = () => {
    window.removeEventListener('resize', this.onResize)
  }

  onResize = (e) => {
    this.setWidth()
  }

  setWidth = () => {
    const param = this.containerElement.getBoundingClientRect()
    this.setState({ containerWidth: param.width })
  }

  getWidthStyle = () => {
    const { containerWidth } = this.state
    return containerWidth
      ? { width: `${containerWidth}px` }
      : {}
  }

  getNegativeMarginStyle = (multilpy) => {
    const { containerWidth } = this.state
    const left = Number.isInteger(multilpy)
      ? containerWidth * multilpy
      : containerWidth
    return containerWidth
      ? { marginLeft: `${-left}px` }
      : {}
  }

  slide = sign => (e) => {
    const { banners } = this.props
    const circleCount = (z, min, max) => {
      if (z < min) return max
      if (z > max) return min
      return z
    }
    this.setState(prevState => ({
      slideCurrent: circleCount(prevState.slideCurrent + sign, 0, banners.length - 1)
    }))
  }

  render() {
    const { className, banners } = this.props
    const { slideCurrent } = this.state
    if (!banners.length) {
      return null
    }
    return (
      <div className={className} ref={wrap => this.containerElement = wrap}>
        <div role="button" onClick={this.slide(-1)} className="swipe swipe--left">
          <div className="arrow arrow--left" />
        </div>
        <div className="carousel">
          <ul style={this.getNegativeMarginStyle(slideCurrent)}>
            {banners.map(ban => (
              <li style={this.getWidthStyle()} key={ban.link}>
                <a href={ban.link} className="carousel-link" key={ban.link}>
                  <img src={ban.img} alt="" className="carousel-img" />
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div role="button" onClick={this.slide(1)} className="swipe swipe--right">
          <div className="arrow arrow--right" />
        </div>
      </div>
    )
  }
}

export default styled(Carousel)`
  display: flex;
  align-items: stretch;
  position: relative;
  .carousel {
    overflow: hidden;
  }
  .carousel > ul {
    width: 9999px;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: margin-left 250ms;
  }
  .carousel > ul > li{
    display: inline-block;
  }
  .carousel-img {
    width: 100%;
    height: 100%;
  }
  .swipe {
    position: absolute;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: ${({ theme }) => theme.second};
    opacity: 0;
    cursor: pointer;
    transition: opacity .15s;
    &--right {
      right: 0;
    }
    &--left {
      left: 0;
    }
    &:hover {
      opacity: 0.8;
    }
  }
  .arrow {
    border: 3px solid #fff;
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    &--left {
      border-style: none none solid solid;
    }
    &--right {
      border-style: solid solid none none;
    }
  }
`