@appearhere/bloom/components/SiblingTransition/SiblingTransition.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { TransitionMotion, spring } from 'react-motion';

import noop from '../../utils/noop';
import css from './SiblingTransition.css';
import { SIBLING_TRANSITION as DEFAULT_SPRING_CONFIG } from '../../constants/springs';

export default class SiblingTransition extends Component {
  static propTypes = {
    springConfig: PropTypes.shape({
      stiffness: PropTypes.number,
      damping: PropTypes.number,
    }),
    animate: PropTypes.bool,
    route: PropTypes.string.isRequired,
    children: PropTypes.element,
    shouldAnimateLeft: PropTypes.func,
    didLeave: PropTypes.func,
  };

  static defaultProps = {
    springConfig: DEFAULT_SPRING_CONFIG,
    didLeave: noop,
  };

  componentWillReceiveProps(nextProps) {
    const { route: oldRoute } = this.props;
    const { route: newRoute, animate } = nextProps;

    if (!animate) this.setState({ newRoute: null, oldRoute: null });
    if (newRoute !== oldRoute) this.setState({ newRoute, oldRoute });
  }

  getStyles = () => {
    const { springConfig } = this.props;

    return {
      x: spring(0, springConfig),
    };
  }

  willEnter = () => {
    const { shouldAnimateLeft, animate } = this.props;
    const { newRoute, oldRoute } = this.state;

    if (!animate) return { x: 0 };

    const transitionLeft = shouldAnimateLeft(newRoute, oldRoute);

    return {
      x: transitionLeft ? 100 : -100,
    };
  }

  willLeave = () => {
    const { springConfig, animate, shouldAnimateLeft } = this.props;
    const { newRoute, oldRoute } = this.state;

    if (!animate) return { x: 0 };

    const transitionLeft = shouldAnimateLeft(newRoute, oldRoute);

    return {
      x: spring(transitionLeft ? -100 : 100, springConfig),
    };
  }

  render() {
    const {
      route,
      children: child,
      didLeave,
      ...rest,
    } = this.props;

    return (
      <TransitionMotion
        { ...rest }
        styles={ [{
          key: route,
          style: this.getStyles(),
          data: child,
        }] }
        willEnter={ this.willEnter }
        willLeave={ this.willLeave }
        didLeave={ didLeave }
      >
        { interpolated => (
          <div className={ css.container }>
            { interpolated.map(({ key, data, style }) => (
              <div
                key={ key }
                className={ css.animated }
                style={ {
                  position: style.x === 0 ? 'relative' : 'absolute',
                  transform: `translate3d(${style.x}%, 0, 0)`,
                } }
              >
                { data }
              </div>
            )) }
          </div>
        ) }
      </TransitionMotion>
    );
  }
}