Carousel.js

import React from 'react';
import { Motion, spring, presets } from 'react-motion';
import { findDOMNode } from 'react-dom';
import styled from 'styled-components';

import { pure } from 'recompose';

// import Swipeable from 'depop/utils/Swipeable';

const CarouselContainer = styled.ul`
  position: relative;
  margin: 0;
  padding: 0;
  paddingBottom: 50%;
  transform: translate3d(${props => 101 * props.offset}%, 0, 0);
`;

const CarouselFrame = pure(styled.li`
  width: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  transform: translate3d(${props => 101 * props.offset}%, 0, 0);

  &:first-child: {
    z-index: 1;
  }
`);

const Root = styled.div`
  position: relative;
  overflow: hidden;
  width: 100%;
`;

const Controls = styled.div`
  display: flex;
  alignItems: center;
  justify-content: flex-end;
  flex-direction: column;
  margin-top: 10px;
`;

const DirectionTarget = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  cursor: pointer;
  ${props => props.direction === 'left' ? 'left' : 'right'}: 0;
`;

const IndicatorContainer = styled.ul`
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  flex-direction: row;
  justify-content: center;
`;

const IndicatorWrapper = styled.li`
  margin: 0 5px;
  width: 20px;
  height: 20px;
  display: block;
  padding: 5px;
  flex-shrink: 0;
  flex-grow: 0;
  cursor: pointer;
`;

const Indicator = styled.span`
  display: block;
  width: 10px;
  height: 10px;
  borderRadius: 50%;
  background: #ccc;
  cursor: pointer;

  ${props => props.selected ? `
    background: #000;
    cursor: default;
  ` : null}
`;

const getCurrentIndex = (total, offset) => (total - Math.round(offset % total)) % total;
const getFrameOffset = (index, offset, total) => index + (-total * Math.ceil(((offset - 1) + index) / total));

export default class Carousel extends React.PureComponent {
  props: {
    children: Object,
  };

  constructor(props) {
    super(props);
    this.state = {
      offset: 0,
      peekOffset: 0,
      swipeOffset: 0,
    };
  }

  peekNext = () => {
    this.setState({peekOffset: -0.1});
  }

  peekPrevious = () => {
    this.setState({peekOffset: 0.1});
  }

  unpeek = () => {
    this.setState({peekOffset: 0});
  }

  handleNext = () => {
    const { offset } = this.state;
    const nextOffset = Math.ceil(offset) - 1;
    this.setState({offset: nextOffset});
  }

  handlePrevious = () => {
    const { offset } = this.state;
    const nextOffset = Math.floor(offset) + 1;
    this.setState({offset: nextOffset});
  }

  getOffset = () => {
    const { offset: baseOffset, swipeOffset, peekOffset } = this.state;
    return baseOffset + swipeOffset + peekOffset;
  }

  handleDotClick(index, event) {
    const offset = this.getOffset();
    const total = this.props.children.length;
    const currentIndex = getCurrentIndex(total, offset);

    if (index === currentIndex) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();

    if (index > currentIndex) {
      this.setState({swipeOffset: 0, offset: offset + (currentIndex - index)});
    } else {
      this.setState({swipeOffset: 0, offset: offset - (index - index)});
    }

    const diff = currentIndex - index;

    this.setState({swipeOffset: 0, offset: offset + diff});
  }

  handleSwipingLeft = (event, x) => {
    this.setState({
      swipeOffset: -1 * Math.min(x / findDOMNode(this).offsetWidth, 1),
    });
  }

  handleSwipedLeft = (event, x, isFlick) => {
    if (!isFlick) {
      this.setState({
        offset: Math.round(this.state.swipeOffset + this.state.offset),
      });
    } else {
      this.handleNext();
    }
  }

  handleSwipingRight = (event, x) => {
    this.setState({
      swipeOffset: Math.min(x / findDOMNode(this).offsetWidth, 1),
    });
  }

  handleSwipedRight = (event, x, isFlick) => {
    if (!isFlick) {
      this.setState({
        offset: Math.round(this.state.swipeOffset + this.state.offset),
      });
    } else {
      this.handlePrevious();
    }
  }

  handleSwiped = () => {
    this.setState({swipeOffset: 0});
  }

  render() {
    const { children } = this.props;

    const total = children.length;
    const offset = this.getOffset();
    const currentIndex = getCurrentIndex(total, offset);

    if (children.length === 1) {
      return children[0];
    }

    return (
      <Root>
        <div
          onSwiped={this.handleSwiped}
          onSwipingLeft={this.handleSwipingLeft}
          onSwipingRight={this.handleSwipingRight}
          onSwipedLeft={this.handleSwipedLeft}
          onSwipedRight={this.handleSwipedRight}>
          <Motion style={{x: spring(offset, presets.noWobble)}}>
            {({x: interpolatedOffset}) => {
              return (
                <CarouselContainer offset={interpolatedOffset}>
                  {children.map((child, index) =>
                    <CarouselFrame key={index} offset={getFrameOffset(index, interpolatedOffset, total)}>
                      {child}
                    </CarouselFrame>)}
                </CarouselContainer>
              );
            }}
          </Motion>
          <Controls>
            <DirectionTarget
              direction='left'
              onClick={this.handlePrevious} onMouseEnter={this.peekPrevious} onMouseLeave={this.unpeek} />
            <DirectionTarget
              direction='right'
              onClick={this.handleNext} onMouseEnter={this.peekNext} onMouseLeave={this.unpeek} />
            <IndicatorContainer>
              {children.map((child, index) => {
                return (
                  <IndicatorWrapper
                    key={index}
                    onClick={this.handleDotClick.bind(this, index)}
                  >
                    <Indicator selected={index === currentIndex} />
                  </IndicatorWrapper>
                );
              })}
            </IndicatorContainer>
          </Controls>
        </div>
      </Root>
    );
  }
}