Example MapLeftNav

MapLeftNav.js

import React, {Component, PropTypes} from 'react'
import LeftNav from 'material-ui/lib/left-nav'
import AutoComplete from 'material-ui/lib/auto-complete'
import MenuItem from 'material-ui/lib/menus/menu-item'
import Checkbox from 'material-ui/lib/checkbox'
import ToggleIconLeft from 'material-ui/lib/svg-icons/hardware/keyboard-arrow-left'
import ToggleIconRight from 'material-ui/lib/svg-icons/hardware/keyboard-arrow-right'
import Paper from 'material-ui/lib/paper'

export default class MapLeftNav extends Component {
  static propTypes = {
    mapState: PropTypes.object.isRequired,
    vehiclesState: PropTypes.object.isRequired,
    push: PropTypes.func.isRequired,
  }

  constructor (props) {
    super(props)
    this.state = {leftNavOpen: true}
  }

  handleToggle = () => this.setState({leftNavOpen: !this.state.leftNavOpen})

  render () {
    const mapLeftNavStyle = {
      zIndex: 3,
      position: 'absolute',
      top: '60px',
      overflow: 'none',
    }

    const leftNavOverLayStyle = {
      height: 'auto',
      top: 110,
      overflow: 'none',
      width: 'auto',
    }

    const leftNavToggleStyle = {
      marginBottom: 12,
      position: 'relative',
      left: '18%',
      top: '18%',
    }

    const togglePaperStyle = {
      height: 35,
      width: 35,
      top: 6,
      left: 6,
      position: 'relative',
    }
    // hacky workaround to avoid bug in material-ui library https://github.com/callemall/material-ui/issues/3805
    const toggleIcon = this.state.leftNavOpen ? (<ToggleIconLeft />) : (<ToggleIconRight />)
    const vehicleSelections = this.props.vehiclesState ? ['none'].concat(Object.keys(this.props.vehiclesState.vehicles)) : ['none']
    const searchFilter = (searchText, key) => {
      return (searchText === '' || key.includes(searchText) || key.includes(searchText.toUpperCase()) || key === 'none')
    }

    const handleAutocompleteTrigger = (selection) => {
      this.props.push(`/?sensor=${selection}`)
    }

    return (
      <div id='mapLeftNavStyle' style={mapLeftNavStyle}>
        <Paper
          circle
          style={togglePaperStyle}
          zDepth={2} >
          <Checkbox
            checkedIcon={toggleIcon}
            unCheckedIcon={toggleIcon}
            style={leftNavToggleStyle}
            onTouchTap={this.handleToggle} />
        </Paper>
        <LeftNav
          style={leftNavOverLayStyle}
          open={this.state.leftNavOpen}>
          <MenuItem>Selected Spotcam Sensor:</MenuItem>
          <MenuItem>
            <AutoComplete
              anchorOrigin={{vertical: 'top', horizontal: 'right'}}
              hintText='Type in spotcam id to search'
              filter={searchFilter}
              onNewRequest={handleAutocompleteTrigger}
              updateWhenFocused
              dataSource={vehicleSelections} />
          </MenuItem>
        </LeftNav>
      </div>
    )
  }
}