import React from 'react/addons';
import CandidateDetailView from './CandidateDetailView';
const { CSSTransitionGroup } = React.addons;

class Drawer extends React.Component {

  /**
   * Send 'close' event to parent component.
   * @param event
   */
  close(event) {
    event.preventDefault();

    // De-select this item.
    this.props.selectItem(this);
  }

  /**
   * Render component.
   * @returns {XML}
   */
  render() {
    let drawer;

    if(this.props.isOpen) {
      drawer = (
        <div className='drawer'>
          <CandidateDetailView candidate={this.props.candidate} />
          <a href="#" className="drawer__close" onClick={this.close.bind(this)}><span>Close</span></a>
        </div>
      );
    }

    return (
      <CSSTransitionGroup transitionName="drawer-animation">
        {drawer}
      </CSSTransitionGroup>
    )
  }

}

export default Drawer;

@@ -142,16 +142,24 @@
 s Drawer
+Contents
  extends
@@ -182,195 +182,8 @@
  %7B%0A%0A
-  /**%0A   * Send 'close' event to parent component.%0A   * @param event%0A   */%0A  close(event) %7B%0A    event.preventDefault();%0A%0A    // De-select this item.%0A    this.props.selectItem(this);%0A  %7D%0A%0A
   /*
@@ -254,68 +254,17 @@
     
-let drawer;%0A%0A    if(this.props.isOpen) %7B%0A      drawer =
+return
  (%0A
-  
     
@@ -290,18 +290,16 @@
 rawer'%3E%0A
-  
         
@@ -355,18 +355,16 @@
 ate%7D /%3E%0A
-  
         
@@ -419,24 +419,19 @@
 his.
-close.bind(this)
+props.close
 %7D%3E%3Cs
@@ -457,18 +457,16 @@
 %3E%0A      
-  
 %3C/div%3E%0A 
@@ -472,109 +472,505 @@
     
-  
+);%0A  %7D%0A%0A%7D%0A%0Aclass Drawer extends React.Component %7B%0A%0A  /**%0A   * Send 'close' event to parent component.%0A   * @param event%0A   */%0A  close(event) %7B%0A    event.preventDefault(
 );%0A
+%0A
     
-%7D%0A%0A    return (%0A      %3CCSSTransitionGroup transitionName=%22drawer-animation%22%3E%0A        %7Bdrawer
+// De-select this item.%0A    this.props.selectItem(this);%0A  %7D%0A%0A  /**%0A   * Render component.%0A   * @returns %7BXML%7D%0A   */%0A  render() %7B%0A    return (%0A      %3CCSSTransitionGroup transitionName=%22drawer-animation%22%3E%0A        %7Bthis.props.isOpen ? %3CDrawerContents candidate=%7Bthis.props.candidate%7D close=%7Bthis.close.bind(this)%7D /%3E : null
 %7D%0A  

Create DrawerComponents sub-component.