How to use the react-md/lib/Drawers.DrawerTypes function in react-md

import React, { PureComponent, PropTypes } from 'react';
import { connect } from 'react-redux';
import SelectField from 'react-md/lib/SelectFields';
import { updateDrawerType } from 'actions/ui';

import Drawer from 'react-md/lib/Drawers';
import { isPermanent, isPersistent } from 'react-md/lib/Drawers/isType';
const types = Object.keys(Drawer.DrawerTypes).map(key => Drawer.DrawerTypes[key]);

@connect(({ ui: { drawer: { mobile, tablet } } }) => ({ mobile, tablet }), { updateDrawerType })
export default class ControlReactMDDrawer extends PureComponent {
  static propTypes = {
    mobile: PropTypes.bool.isRequired,
    tablet: PropTypes.bool.isRequired,
    updateDrawerType: PropTypes.func.isRequired,
    className: PropTypes.string,
    children: PropTypes.node,
  };

  componentWillUnmount() {
    this.props.updateDrawerType(undefined);
  }

  render() {

>
            {buttonIcon}

          
          {buttonLabel && (
            <span style="{{">
              {buttonLabel}
            </span>
          )}
        
         {}}
          position={'right'}
          type={Drawer.DrawerTypes.FLOATING}
          header={drawerHeader}
          style={{ zIndex: 100, borderLeft: '1px solid lightgray' }}
          onMediaTypeChange={() =&gt; {}} 
        &gt;
          
            {this.props.children}
          
        
      
    );
  }
}

<div>
          <h2>Look at this</h2>
          <button id="{`${idPrefix}-btn`}">
            Button
          </button>
        </div>
        }
          navClassName="md-toolbar-relative"
          navItems={NAV_ITEMS}
          visible={this.state.visible}
          onVisibilityChange={this.handleVisibilityChange}
          overlay
          type={Drawer.DrawerTypes.TEMPORARY}
        /&gt;
        <button id="{`${idPrefix}-floating-btn`}">email</button>
      
    );
  }
}

>
            {buttonIcon}

          
          {buttonLabel && (
            <span style="{{">
              {buttonLabel}
            </span>
          )}
        
         {}}
          position={'right'}
          type={Drawer.DrawerTypes.TEMPORARY}
          header={drawerHeader}
          style={{ zIndex: 100 }}
        &gt;
          
            {this.props.children}
          
        
      
    );
  }
}

const header = (
      
    );
    return (
      
        

          <form>
            
              
                

                </form>

);

    return (
      {autocomplete}}
        navItems={filteredNavItems}
        autoclose={false}
        navClassName="sassdoc__finder-list"
      />
    );
  }
}

className={[
          styles['md-divider-border'],
          styles['md-divider-border--bottom'],
        ].join(' ')}
      />
    );

    return (
      
        {menuItems}
      
    );
  }
}

toggleDrawer={ this._toggleDrawer }
                  handleAvatarImgClick={ this.handleAvatarImgClick }
                  profile={ profile }
                />
              
            
            
              {this.state.showDropzone === true ? this.renderDropzone() : null}
            
            
              
            
          
        

      
    );
  }
}

const PhotoDrawer = ({ visible, onVisibilityChange, photo }) => (
  
     onVisibilityChange(false)}>close}
      title={photo.filename}
      actions={actions}
      prominentTitle
    />
    <section>
      
        <img role="presentation" src="{`https://unsplash.it/360/520/?image=${photo.id}`}"></section>

const header = (
      
    );
    return (
      
        

          <form>
            
              
                
              
              </form>