TechRadarAJR/js/components/PageItem.js

import React from 'react';
import Badge from './Badge';
import ItemList from './ItemList';
import Link from './Link';
import FooterEnd from './FooterEnd';
import SetTitle from './SetTitle';
import ItemRevisions from './ItemRevisions';
import IsNew from './IsNew';
import { createAnimation, createAnimationRunner } from '../animation';

import { translate } from '../../common/config';
import { groupByQuadrants } from '../../common/model';

const setAnimations = (state, animations) => ({
  ...state,
  animations,
});

class PageItem extends React.Component {
  constructor(props) {
    super(props);

    const itemsInRing = this.getItemsInRing(props);

    this.animationsIn = {
      background: createAnimation({
          transform: 'translateX(calc((100vw - 1200px) / 2 + 800px))',
          transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
        }, {
          transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
          transform: 'translateX(0)',
        },
        0
      ),
      navHeader: createAnimation({
          transform: 'translateX(-40px)',
          opacity: '0',
        }, {
          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
          transform: 'translateX(0px)',
          opacity: '1',
        },
        300
      ),
      text: createAnimation({
          transform: 'translateY(-20px)',
          opacity: '0',
        }, {
          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
          transform: 'translateY(0px)',
          opacity: '1',
        },
        600
      ),
      items: itemsInRing.map((item, i) => (createAnimation({
          transform: 'translateX(-40px)',
          opacity: '0',
        }, {
          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
          transform: 'translateX(0px)',
          opacity: '1',
        },
        400 + 100 * i
      ))),
      footer: createAnimation({
          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
          transform: 'translateX(-40px)',
          opacity: '0',
        }, {
          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
          transform: 'translateX(0px)',
          opacity: '1',
        },
        600 + itemsInRing.length * 100
      ),
    };

    this.animationsOut = {
      background: createAnimation(
        this.animationsIn.background.stateB,
        this.animationsIn.background.stateA,
        300 + itemsInRing.length * 50
      ),
      navHeader: createAnimation(
        this.animationsIn.navHeader.stateB,
        {
          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
          transform: 'translateX(40px)',
          opacity: '0',
        },
        0
      ),
      text: createAnimation(
        this.animationsIn.text.stateB,
        {
          transform: 'translateY(20px)',
          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
          opacity: '0',
        },
        0
      ),
      items: itemsInRing.map((item, i) => (createAnimation(
        this.animationsIn.items[i].stateB,
        {
          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
          transform: 'translateX(40px)',
          opacity: '0',
        },
        100 + 50 * i
      ))),
      footer: createAnimation(
          this.animationsIn.text.stateB,
          {
            transition: 'opacity 150ms ease-out, transform 300ms ease-out',
            transform: 'translateX(40px)',
            opacity: '0',
          },
          200 + itemsInRing.length * 50
      ),
    };

    if (props.leaving) { // entering from an other page
      this.state = setAnimations({}, createAnimationRunner(this.animationsIn).getState());
    } else { // Hard refresh
      this.state = {};
    }
  }

  componentWillReceiveProps({ leaving }) {
    if (!this.props.leaving && leaving) { // page will be left
      this.animationRunner = createAnimationRunner(this.animationsOut, this.handleAnimationsUpdate);
      this.animationRunner.run();
      this.animationRunner.awaitAnimationComplete(this.props.onLeave);
    }
    if (this.props.leaving && !leaving) { // page is entered
      this.animationRunner = createAnimationRunner(this.animationsIn, this.handleAnimationsUpdate);
      this.animationRunner.run();
    }
  }

  handleAnimationsUpdate = () => {
    this.setState(setAnimations(this.state, this.animationRunner.getState()));
  };

  getAnimationState = (name) => {
    if (!this.state.animations) {
      return undefined;
    }
    return this.state.animations[name];
  };

  getItem = (props) => {
    const [quadrantName, itemName] = props.pageName.split('/');
    const item = props.items.filter(item => item.quadrant === quadrantName && item.name === itemName)[0];
    return item;
  }

  getItemsInRing = (props) => {
    const item = this.getItem(props);
    const itemsInRing = groupByQuadrants(props.items)[item.quadrant][item.ring];
    return itemsInRing;
  };

  render() {
    const item = this.getItem(this.props);
    const itemsInRing = this.getItemsInRing(this.props);
    return (
      <div>
        <SetTitle {...this.props} title={item.title} />
        <div className="item-page">
          <div className="item-page__nav">
            <div className="item-page__nav__inner">
              <div className="item-page__header" style={this.getAnimationState('navHeader')}>
                <h3 className="headline">{translate(item.quadrant)}</h3>
              </div>

              <ItemList
                items={itemsInRing}
                activeItem={item}
                headerStyle={this.getAnimationState('navHeader')}
                itemStyle={this.getAnimationState('items')}
              >
                <div className="split">
                  <div className="split__left">
                    <Badge big type={item.ring}>{item.ring}</Badge>
                  </div>
                  <div className="split__right">
                    <Link className="icon-link" pageName={item.quadrant}>
                      <span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
                    </Link>
                  </div>
                </div>
              </ItemList>
              <div className="item-page__footer" style={this.getAnimationState('footer')}>
                <FooterEnd modifier="in-sidebar" />
              </div>
            </div>
          </div>
          <div className="item-page__content" style={this.getAnimationState('background')}>
            <div className="item-page__content__inner" style={this.getAnimationState('text')}>
              <div className="item-page__header">
                <div className="split">
                  <div className="split__left">
                    <h1 className="hero-headline hero-headline--inverse">{item.title}</h1>
                  </div>
                  <div className="split__right">
                    <Badge big type={item.ring}>{item.ring}</Badge>
                  </div>
                </div>
              </div>
              <div className="markdown" dangerouslySetInnerHTML={{__html: item.body}} />
              {item.revisions.length > 1 && <ItemRevisions revisions={item.revisions.slice(1)} />}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default PageItem;