title: Flow - missing type annotation
body: <p>Pretty new to flow and trying to fix my code to include flow. This is my code at the moment and I've added flow type check and now getting errors so I need to annotate my code properly:</p>
  
  <pre><code>// @flow
  import React, { Component } from 'react';
  import { Manager, Reference, Popper } from 'react-popper';
  
  import cx from 'classnames';
  import css from './Tooltip.css';
  import animationsCss from './TooltipAnimations.css';
  
  type Props = {
    theme: string,
    eventsEnabled: boolean,
  }
  class Tooltip extends Component&lt;Props&gt; {
    static defaultProps = {
      theme: 'light',
      eventsEnabled: true
    };
  
    firstOrderPlacement(placement) {
      if (!placement) return null;
      return placement.split('-')[0];
    }
  
    arrowDirectionClass(firstOrderPlacement) {
      switch (firstOrderPlacement) {
        case 'right':
          return css.arrowLeft;
        case 'left':
          return css.arrowRight;
        case 'top':
          return css.arrowDown;
        case 'bottom':
          return css.arrowUp;
        default:
          return css.arrowUp;
      }
    }
  
    render() {
      const { placement, className, children, fadeIn, theme, eventsEnabled } = this.props;
  
      return (
        &lt;Popper placement={placement} eventsEnabled={eventsEnabled}&gt;
          {({ ref, style, placement }) =&gt; {
            const firstOrderPlacement = this.firstOrderPlacement(placement);
            const arrowDirectionClass = this.arrowDirectionClass(firstOrderPlacement);
            const subContainerStyle = {
              display: 'flex',
              flexDirection:
                firstOrderPlacement === 'top' || firstOrderPlacement === 'bottom' ? 'column' : 'row',
            };
            const childrenContainerClassName = cx(
              css.childrenContainer,
              css.wrapper,
              theme === "dark" ? css.dark : css.light
            );
            const content = &lt;div className={childrenContainerClassName}&gt;{children}&lt;/div&gt;;
            const subContainerClassName = fadeIn ? cx(animationsCss.fadeIn, className) : className;
  
            return (
              &lt;div
                ref={ref}
                className={cx(css.container, css.mobileTooltip)}
                style={style}
                data-placement={placement}
              &gt;
                &lt;div className={subContainerClassName} style={subContainerStyle}&gt;
                  {(firstOrderPlacement === 'left' || firstOrderPlacement === 'top') &amp;&amp; content}
                  &lt;div&gt;
                    &lt;div className={cx(css.arrow, arrowDirectionClass)} /&gt;
                  &lt;/div&gt;
                  {(firstOrderPlacement === 'right' || firstOrderPlacement === 'bottom') &amp;&amp; content}
                &lt;/div&gt;
              &lt;/div&gt;
            );
          }}
        &lt;/Popper&gt;
      );
    }
  }
  
  export { Manager as TooltipManager, Reference as TooltipReference, Tooltip };
  </code></pre>
  
  <p>I believe I need to add these to my props. Are these correct?</p>
  
  <pre><code>  placement: string,
    className?: string,
    children?: any,
    fadeIn: any,
  </code></pre>
  
  <p>I'm missing type annotation for these two which I'm not sure how to proceed:</p>
  
  <pre><code>  firstOrderPlacement(placement) {..}
  
    arrowDirectionClass(firstOrderPlacement) {..}
  </code></pre>
  
  <p>Any help?</p>