text: // @flow
  // @inheritedComponent Transition
  
  import React from 'react';
  import type { Element } from 'react';
  import Transition from 'react-transition-group/Transition';
  import { duration } from '../styles/transitions';
  import withTheme from '../styles/withTheme';
  import type { TransitionDuration, TransitionCallback } from '../internal/transition';
  
  type ProvidedProps = {
    /**
     * @ignore
     */
    theme: Object,
  };
  
  export type Props = {
    /**
     * Other base element props.
     */
    [otherProp: string]: any,
    /**
     * @ignore
     */
    appear: boolean,
    /**
     * A single child content element.
     */
    children: Element<any>,
    /**
     * If `true`, the component will transition in.
     */
    in: boolean,
    /**
     * @ignore
     */
    onEnter?: TransitionCallback,
    /**
     * @ignore
     */
    onEntering?: TransitionCallback,
    /**
     * @ignore
     */
    onExit?: TransitionCallback,
    /**
     * @ignore
     */
    style?: Object,
    /**
     * The duration for the transition, in milliseconds.
     * You may specify a single timeout for all transitions, or individually with an object.
     */
    timeout: TransitionDuration,
  };
  
  const reflow = node => node.scrollTop;
  
  /**
   * The Fade transition is used by the Modal component.
   * It's using [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
   */
  class Fade extends React.Component<ProvidedProps & Props> {
    static defaultProps = {
      appear: true,
      timeout: ({
        enter: duration.enteringScreen,
        exit: duration.leavingScreen,
      }: TransitionDuration),
    };
  
    handleEnter = (node: HTMLElement) => {
      node.style.opacity = '0';
      reflow(node);
  
      if (this.props.onEnter) {
        this.props.onEnter(node);
      }
    };
  
    handleEntering = (node: HTMLElement) => {
      const { theme, timeout } = this.props;
      node.style.transition = theme.transitions.create('opacity', {
        duration: typeof timeout === 'number' ? timeout : timeout.enter,
      });
      // $FlowFixMe - https://github.com/facebook/flow/pull/5161
      node.style.webkitTransition = theme.transitions.create('opacity', {
        duration: typeof timeout === 'number' ? timeout : timeout.enter,
      });
      node.style.opacity = '1';
  
      if (this.props.onEntering) {
        this.props.onEntering(node);
      }
    };
  
    handleExit = (node: HTMLElement) => {
      const { theme, timeout } = this.props;
      node.style.transition = theme.transitions.create('opacity', {
        duration: typeof timeout === 'number' ? timeout : timeout.exit,
      });
      // $FlowFixMe - https://github.com/facebook/flow/pull/5161
      node.style.webkitTransition = theme.transitions.create('opacity', {
        duration: typeof timeout === 'number' ? timeout : timeout.exit,
      });
      node.style.opacity = '0';
  
      if (this.props.onExit) {
        this.props.onExit(node);
      }
    };
  
    render() {
      const {
        appear,
        children,
        onEnter,
        onEntering,
        onExit,
        style: styleProp,
        theme,
        ...other
      } = this.props;
  
      const style = { ...styleProp };
  
      // For server side rendering.
      if (!this.props.in || appear) {
        style.opacity = '0';
      }
  
      return (
        <Transition
          appear={appear}
          style={style}
          onEnter={this.handleEnter}
          onEntering={this.handleEntering}
          onExit={this.handleExit}
          {...other}
        >
          {children}
        </Transition>
      );
    }
  }
  
  export default withTheme()(Fade);
  