text: // @flow weak
  
  import React from 'react';
  import type { Element } from 'react';
  import Transition from '../internal/Transition';
  import { duration } from '../styles/transitions';
  import withTheme from '../styles/withTheme';
  import type { TransitionCallback } from '../internal/Transition';
  
  type DefaultProps = {
    enterTransitionDuration: number,
    leaveTransitionDuration: number,
    theme: Object,
  };
  
  export type Props = {
    /**
     * A single child content element.
     */
    children?: Element<*>,
    /**
     * If `true`, the component will transition in.
     */
    in?: boolean,
    /**
     * Duration of the animation when the element is entering.
     */
    enterTransitionDuration?: number, // eslint-disable-line react/sort-prop-types
    /**
     * Duration of the animation when the element is exiting.
     */
    leaveTransitionDuration?: number,
    /**
     * Callback fired before the component enters.
     */
    onEnter?: TransitionCallback,
    /**
     * Callback fired when the component is entering.
     */
    onEntering?: TransitionCallback,
    /**
     * Callback fired when the component has entered.
     */
    onEntered?: TransitionCallback, // eslint-disable-line react/sort-prop-types
    /**
     * Callback fired before the component exits.
     */
    onExit?: TransitionCallback,
    /**
     * Callback fired when the component is exiting.
     */
    onExiting?: TransitionCallback,
    /**
     * Callback fired when the component has exited.
     */
    onExited?: TransitionCallback, // eslint-disable-line react/sort-prop-types
    /**
     * @ignore
     */
    theme?: Object,
  };
  
  type AllProps = DefaultProps & Props;
  
  class Fade extends React.Component<AllProps, void> {
    props: AllProps;
  
    static defaultProps = {
      in: false,
      enterTransitionDuration: duration.enteringScreen,
      leaveTransitionDuration: duration.leavingScreen,
      theme: {},
    };
  
    handleEnter = element => {
      element.style.opacity = 0;
      if (this.props.onEnter) {
        this.props.onEnter(element);
      }
    };
  
    handleEntering = element => {
      const { transitions } = this.props.theme;
      element.style.transition = transitions.create('opacity', {
        duration: this.props.enterTransitionDuration,
      });
      element.style.WebkitTransition = transitions.create('opacity', {
        duration: this.props.enterTransitionDuration,
      });
      element.style.opacity = 1;
      if (this.props.onEntering) {
        this.props.onEntering(element);
      }
    };
  
    handleExit = element => {
      const { transitions } = this.props.theme;
      element.style.transition = transitions.create('opacity', {
        duration: this.props.leaveTransitionDuration,
      });
      element.style.WebkitTransition = transitions.create('opacity', {
        duration: this.props.leaveTransitionDuration,
      });
      element.style.opacity = 0;
      if (this.props.onExit) {
        this.props.onExit(element);
      }
    };
  
    render() {
      const {
        children,
        enterTransitionDuration,
        leaveTransitionDuration,
        onEnter,
        onEntering,
        onExit,
        theme,
        ...other
      } = this.props;
  
      return (
        <Transition
          onEnter={this.handleEnter}
          onEntering={this.handleEntering}
          onExit={this.handleExit}
          timeout={Math.max(enterTransitionDuration, leaveTransitionDuration) + 10}
          transitionAppear
          {...other}
        >
          {children}
        </Transition>
      );
    }
  }
  
  export default withTheme(Fade);
  