react-toolbox/components/menu/IconMenu.js

import React from 'react';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
import { IconButton } from '../button';
import Menu from './Menu';

class IconMenu extends React.Component {
  static propTypes = {
    children: React.PropTypes.node,
    className: React.PropTypes.string,
    icon: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.element
    ]),
    iconRipple: React.PropTypes.bool,
    menuRipple: React.PropTypes.bool,
    onClick: React.PropTypes.func,
    onHide: React.PropTypes.func,
    onSelect: React.PropTypes.func,
    onShow: React.PropTypes.func,
    position: React.PropTypes.string,
    selectable: React.PropTypes.bool,
    selected: React.PropTypes.any,
    theme: React.PropTypes.shape({
      icon: React.PropTypes.string.isRequired,
      iconMenu: React.PropTypes.string.isRequired
    })
  };

  static defaultProps = {
    className: '',
    icon: 'more_vert',
    iconRipple: true,
    menuRipple: true,
    position: 'auto',
    selectable: false
  };

  state = {
    active: false
  }

  handleButtonClick = (event) => {
    this.setState({ active: !this.state.active });
    if (this.props.onClick) this.props.onClick(event);
  };

  handleMenuHide = () => {
    this.setState({ active: false });
    if (this.props.onHide) this.props.onHide();
  }

  render () {
    return (
      <div className={classnames(this.props.theme.iconMenu, this.props.className)}>
        <IconButton
          className={this.props.theme.icon}
          icon={this.props.icon}
          onClick={this.handleButtonClick}
          ripple={this.props.iconRipple}
        />
        <Menu
          ref='menu'
          active={this.state.active}
          onHide={this.handleMenuHide}
          onSelect={this.props.onSelect}
          onShow={this.props.onShow}
          position={this.props.position}
          ripple={this.props.menuRipple}
          selectable={this.props.selectable}
          selected={this.props.selected}
        >
          {this.props.children}
        </Menu>
      </div>
    );
  }
}

export default themr('ToolboxMenu')(IconMenu);