withAnimation HOC

import * as React from 'react';

import './styles.css';

export interface AnimationProps {
  isAnimated?: boolean;
}

export const withAnimation = <T extends {}>(WrappedComponent: React.ComponentClass<T>) => {
  return class extends React.Component<T & AnimationProps> {
    render() {
      // TODO: we should use an enum to determine the animation
      const className = this.props.isAnimated ? 'fade-in-out' : '';
      return (
        <div className={className}>
          <WrappedComponent {...this.props} />
        </div>
      );
    }
  };
};