Drawer.jsx

import React, { Component, PropTypes } from 'react';
import { findDOMNode } from 'react-dom';
import { Layout } from 'app/components/base/Layout';
import classnames from 'classnames';
import style from './style.css';

const nextFrame = window.requestAnimationFrame || (cb => setTimeout(cb, 0));

class Drawer extends Component {
  state = {
    height: 0,
    animation: true
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.open !== nextProps.open) {
      if (!nextProps.open) {
        nextFrame(() => this.setState({ height: 0 }));
      }

      this.setState({
        height: this.drawer.offsetHeight,
        animation: true
      });
    }
  }

  handleTransitionEnd = (event) => {
    event.stopPropagation();
    this.setState({
      height: this.props.open ? 'auto' : 0,
      animation: !this.props.open
    });
  }

  render() {
    const { height, animation } = this.state;
    const { children, className } = this.props;
    return (
      <Layout
        onTransitionEnd={this.handleTransitionEnd}
        className={classnames(style.viewport, {
          [style.animation]: animation
        })}
        style={{ height }}
      >
        <div
          ref={node => this.drawer = findDOMNode(node)}
          className={classnames(style.drawer, className, {
            [style.float]: height !== 'auto'
          })}
        >
          {children}
        </div>
      </Layout>
    );
  }
}

Drawer.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  open: PropTypes.bool
};

export default Drawer;