<commit_before>import React, {PropTypes} from 'react';
import {TransitionMotion, spring} from 'react-motion';

import Logo from 'components/Logo/Logo';
import Nav from './components/Nav';

import css from './styleguide.css';

const ROUTES = [
  'home',
  'colours',
  'type',
  'grids',
  'blocks',
  'buttons',
  'forms',
  'panels',
  'icons',
];

let oldRouteName = '';
let newRouteName = '';

const physics = [160, 18];

export default class Styleguide extends React.Component {
  constructor(props) {
    super(props);
    this.getStyles = this.getStyles.bind(this);
    this.willEnter = this.willEnter.bind(this);
    this.willLeave = this.willLeave.bind(this);
  }

  componentWillMount() {
    if (this.props.children) {
      oldRouteName = this.props.children.props.location.pathname;
    }
  }
  componentWillReceiveProps(nextProps) {
    // Some dumb logic just so we know which transition to use
    if (!this.props.children && !nextProps.children) {
      oldRouteName = 'home';
      return;
    }

    if (!this.props.children) {
      oldRouteName = 'home';
      newRouteName = nextProps.children.props.location.pathname;
      return;
    }
    if (!nextProps.children) {
      oldRouteName = this.props.children.props.location.pathname;
      newRouteName = 'home';
      return;
    }
    const _oldRouteName = this.props.children.props.location.pathname;
    const _newRouteName = nextProps.children.props.location.pathname;
    if (_oldRouteName !== _newRouteName) {
      oldRouteName = _oldRouteName;
      newRouteName = _newRouteName;
    }
  }

  getStyles() {
    const {children} = this.props;
    return {
      [children.type.displayName]: {
        opacity: spring(1),
        x: spring(0, physics),
        child: children,
      },
    };
  }

  willEnter() {
    const {children} = this.props;
    const oldIndex = ROUTES.indexOf(oldRouteName.replace('/', ''));
    const newIndex = ROUTES.indexOf(newRouteName.replace('/', ''));
    return {
      opacity: spring(0),
      x: spring(newIndex > oldIndex ? 120 : -120, physics),
      child: children,
    };
  }

  willLeave(key, config) {
    const oldIndex = ROUTES.indexOf(oldRouteName.replace('/', ''));
    const newIndex = ROUTES.indexOf(newRouteName.replace('/', ''));
    return {
      opacity: spring(0),
      x: spring(newIndex > oldIndex ? -120 : 120, physics),
      child: config.child,
    };
  }

  render() {
    return (
      <div>
        <div className={css.heading}>
            <Logo className={css.logo} size="small" type="horizontal"/>
            <h1>
              <a href="https://github.com/PactCoffee/loggins">Loggins</a><commit_msg>Fix broken styleguide styles<commit_after>import React, {PropTypes} from 'react';
import {TransitionMotion, spring} from 'react-motion';

import Logo from 'components/Logo/Logo';
import Nav from './components/Nav';

import css from './styleguide.css';

const ROUTES = [
  'home',
  'colours',
  'type',
  'grids',
  'blocks',
  'buttons',
  'forms',
  'overlays',
  'panels',
  'icons',
];

let oldRouteName = '';
let newRouteName = '';

const physics = [160, 18];

export default class Styleguide extends React.Component {
  constructor(props) {
    super(props);
    this.getStyles = this.getStyles.bind(this);
    this.willEnter = this.willEnter.bind(this);
    this.willLeave = this.willLeave.bind(this);
  }

  componentWillMount() {
    if (this.props.children) {
      oldRouteName = this.props.children.props.location.pathname;
    }
  }
  componentWillReceiveProps(nextProps) {
    // Some dumb logic just so we know which transition to use
    if (!this.props.children && !nextProps.children) {
      oldRouteName = 'home';
      return;
    }

    if (!this.props.children) {
      oldRouteName = 'home';
      newRouteName = nextProps.children.props.location.pathname;
      return;
    }
    if (!nextProps.children) {
      oldRouteName = this.props.children.props.location.pathname;
      newRouteName = 'home';
      return;
    }
    const _oldRouteName = this.props.children.props.location.pathname;
    const _newRouteName = nextProps.children.props.location.pathname;
    if (_oldRouteName !== _newRouteName) {
      oldRouteName = _oldRouteName;
      newRouteName = _newRouteName;
    }
  }

  getStyles() {
    const {children} = this.props;
    return {
      [children.type.displayName]: {
        opacity: spring(1),
        x: spring(0, physics),
        child: children,
      },
    };
  }

  willEnter() {
    const {children} = this.props;
    const oldIndex = ROUTES.indexOf(oldRouteName.replace('/', ''));
    const newIndex = ROUTES.indexOf(newRouteName.replace('/', ''));
    return {
      opacity: spring(0),
      x: spring(newIndex > oldIndex ? 120 : -120, physics),
      child: children,
    };
  }

  willLeave(key, config) {
    const oldIndex = ROUTES.indexOf(oldRouteName.replace('/', ''));
    const newIndex = ROUTES.indexOf(newRouteName.replace('/', ''));
    return {
      opacity: spring(0),
      x: spring(newIndex > oldIndex ? -120 : 120, physics),
      child: config.child,
    };
  }

  render() {
    return (
      <div className={css.root}>
        <div className={css.heading}>
            <Logo className={css.logo} size="small" type="horizontal"/>
            <h1>
              <a href="https://github.com/PactCoffee/loggins">Loggins</a>
{'fraction_non_alphanumeric': 0.14517937219730942, 'fraction_numerical': 0.008221225710014948, 'mean_word_length': 2.8649819494584836, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 19, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6167590', 'n_tokens_mistral': 1751, 'n_tokens_neox': 1709, 'n_words': 344}