text: import React, {Component, PropTypes} from 'react';
  import Paper from '../Paper';
  import transitions from '../styles/transitions';
  import propTypes from '../utils/propTypes';
  
  function getStyles(props, context, state) {
    const {targetOrigin} = props;
    const {open} = state;
    const {muiTheme} = context;
    const horizontal = targetOrigin.horizontal.replace('middle', 'vertical');
  
    return {
      root: {
        opacity: open ? 1 : 0,
        transform: open ? 'scaleY(1)' : 'scaleY(0)',
        transformOrigin: `${horizontal} ${targetOrigin.vertical}`,
        position: 'fixed',
        zIndex: muiTheme.zIndex.popover,
        transition: transitions.easeOut('450ms', ['transform', 'opacity']),
        maxHeight: '100%',
      },
    };
  }
  
  class PopoverAnimationVertical extends Component {
    static propTypes = {
      children: PropTypes.node,
      className: PropTypes.string,
      open: PropTypes.bool.isRequired,
      /**
       * Override the inline-styles of the root element.
       */
      style: PropTypes.object,
      targetOrigin: propTypes.origin,
      zDepth: propTypes.zDepth,
    };
  
    static defaultProps = {
      style: {},
      zDepth: 1,
    };
  
    static contextTypes = {
      muiTheme: PropTypes.object.isRequired,
    };
  
    state = {
      open: false,
    };
  
    componentDidMount() {
      this.setState({open: true}); // eslint-disable-line react/no-did-mount-set-state
    }
  
    componentWillReceiveProps(nextProps) {
      this.setState({
        open: nextProps.open,
      });
    }
  
    render() {
      const {
        className,
        style,
        zDepth,
      } = this.props;
  
      const styles = getStyles(this.props, this.context, this.state);
  
      return (
        <Paper
          style={Object.assign(styles.root, style)}
          zDepth={zDepth}
          className={className}
        >
          {this.props.children}
        </Paper>
      );
    }
  }
  
  export default PopoverAnimationVertical;
  