Carousel.js

import React from 'react';
import { Motion, spring, presets } from 'react-motion';
import { findDOMNode } from 'react-dom';
import { style, $ } from 'glamor';

import { pure } from 'recompose';

import Swipeable from 'depop/utils/Swipeable';

const CarouselFrame = pure(({offset, children}) => {
  return (
    <li
      {...style({
        width: '100%',
        display: 'block',
        position: 'absolute',
        zIndex: '-1',
        transform: `translate3d(${101 * offset}%, 0, 0)`,
      })}
      {...$(':first-child', { zIndex: '1' })}>
      {children}
    </li>
  );
});

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 (
      <div {...style({
        position: 'relative',
        overflow: 'hidden',
        width: '100%',
      })}>
        <Swipeable
          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 (
                <ul {...style({
                  position: 'relative',
                  paddingBottom: '100%',
                  transform: `translate3d(${101 * interpolatedOffset}%, 0, 0)`,
                })}>
                  {children.map((child, index) =>
                    <CarouselFrame key={index} offset={getFrameOffset(index, interpolatedOffset, total)}>
                      {child}
                    </CarouselFrame>)}
                </ul>
              );
            }}
          </Motion>
          <div {...style({
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'flex-end',
            flexDirection: 'column',
            marginTop: '10px',
          })}>
            <div {...style({
              position: 'absolute',
              top: '0',
              bottom: '0',
              width: '20%',
              cursor: 'pointer',
              left: '0',
            })}
              onClick={this.handlePrevious} onMouseEnter={this.peekPrevious} onMouseLeave={this.unpeek} />
            <div {...style({
              position: 'absolute',
              top: '0',
              bottom: '0',
              width: '20%',
              cursor: 'pointer',
              right: '0',
            })}
              onClick={this.handleNext} onMouseEnter={this.peekNext} onMouseLeave={this.unpeek} />
            <ul {...style({
              display: 'flex',
              flexShrink: '0',
              flexGrow: '0',
              flexDirection: 'row',
              justifyContent: 'center',
            })}>
              {children.map((child, index) => {
                const plainListItemStyle = {
                  display: 'block',
                  width: '10px',
                  height: '10px',
                  borderRadius: '50%',
                  background: '#ccc',
                  cursor: 'pointer',
                };
                const indicatorListItemStyle = index === currentIndex ? {
                  ...plainListItemStyle,
                  background: '#000',
                  cursor: 'default',
                } : plainListItemStyle;
                return (
                  <li key={index}
                    {...style({
                      margin: '0 5px',
                      width: '20px',
                      height: '20px',
                      display: 'block',
                      padding: '5px',
                      flexShrink: '0',
                      flexGrow: '0',
                      cursor: 'pointer',
                    })} onClick={this.handleDotClick.bind(this, index)}>
                    <span {...style(indicatorListItemStyle)} />
                  </li>
                );
              })}
            </ul>
          </div>
        </Swipeable>
      </div>
    );
  }
}