Slide in from right drawer, higher order Component

drawer.js

import React from 'react'

const Drawer = React.createClass({
  propTypes: {
    onClose: React.PropTypes.func.isRequired
  },

  handleOverlayClick () {
    this.props.onClose()
  },

  render () {
    return(
      <div className="drawer-container">
        <div className="overlay" onClick={ this.handleOverlayClick }></div>
        <div className="content">
          { this.props.children }
        </div>
      </div>
    )
  }
})

export default Drawer

DrawerSelector.js

import React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

import Drawer from 'drawer/components/drawer'

const DrawerSelector = (Display, Content) => React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired
  },

  getInitialState () {
    return {
      display: false
    }
  },

  toggleDisplay () {
    this.setState({ display: !this.state.display })
  },

  renderDrawer () {
    const content = <Content { ...this.props } />

    return(
      <Drawer key="1" onClose={ this.toggleDisplay }>
        <div className="header">
          <h1>Select {this.props.name }</h1>
          <a href="#" onClick={ this.toggleDisplay }>&times;</a>
        </div>
        { content }
      </Drawer>
    )
  },

  renderDrawerContent () {
    const { display } = this.state
    const drawer = display ? this.renderDrawer() : null
    return(
      <ReactCSSTransitionGroup transitionName="drawer" transitionEnterTimeout={500}
        transitionLeaveTimeout={500}>
        { drawer }
      </ReactCSSTransitionGroup>
    )
  },

  render () {
    const display = <Display {...this.props } handleClick={ this.toggleDisplay } />

    return(
      <div className="selector">
        { display }
        { this.renderDrawerContent() }
      </div>
    )
  }
})

export default DrawerSelector

SelectList.js

import React from 'react'

import DrawerSelector from 'drawer/components/drawer'
import SelectListDisplay from 'selectList/components/display'
import SelectList from 'selectList/components/selectList'

const ListItemSelector = React.createClass({
  render () {
    const Selector = DrawerSelector(SelectListDisplay, SelectList)
    
    return(
      <Selector name="Field Name" />
    )
  }
})

export default ListItemSelector