react-material-web-components/src/Menu/SimpleMenu.js

React Wrapper for Material Design Components

import React from 'react'
import PropTypes from 'prop-types'
import {MDCComponent} from '../MDCComponent'
import {List} from '../List'
import {MDCSimpleMenu} from '@material/menu/dist/mdc.menu'
import classNames from 'classnames'

class SimpleMenu extends MDCComponent {
  static displayName = 'SimpleMenu'

  static propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    onCancel: PropTypes.func,
    onChange: PropTypes.func,
    open: PropTypes.bool,
    openFrom: PropTypes.shape({
      horizontal: PropTypes.oneOf(['left', 'right']),
      vertical: PropTypes.oneOf(['top', 'bottom']),
    }),
    style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
    tabIndex: PropTypes.number,
  }

  static defaultProps = {
    onCancel: () => {},
    onChange: () => {},
    tabIndex: -1,
  }

  componentDidMount() {
    super.componentDidMount()

    this._setupListeners()
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.open !== this.component_.open) {
      this.component_.open = nextProps.open
    }
  }

  componentWillUnmount() {
    this._clearListeners()

    super.componentWillUnmount()
  }

  attachTo(el) {
    return new MDCSimpleMenu(el)
  }

  _setupListeners() {
    this.listen(
      'MDCSimpleMenu:selected',
      this.changeListener_ = e => this.props.onChange(
        e,
        e.detail,
      )
    )
    this.listen(
      'MDCSimpleMenu:cancel',
      this.cancelListener_ = () => this.props.onCancel()
    )
  }

  _clearListeners() {
    this.unlisten(
      'MDCSimpleMenu:selected',
      this.changeListener_
    )
    this.unlisten(
      'MDCSimpleMenu:cancel',
      this.cancelListener_
    )
  }

  render() {
    const {
      children,
      className,
      open,
      openFrom,
      onCancel,
      onChange,
      style,
      ...otherProps,
    } = this.props
    const cssClasses = classNames({
      'mdc-simple-menu': true,
      'mdc-simple-menu--open': open,
      [`mdc-simple-menu--open-from-${openFrom && openFrom.vertical}-${openFrom && openFrom.horizontal}`]: openFrom,
    }, className)
    return (
      <div
        {...otherProps}
        className={cssClasses}
        ref={el => this.root_ = el}
        style={{transform: 'scale(0)', ...style}}
      >
        <List
          aria-hidden="true"
          className="mdc-simple-menu__items"
          role="menu"
        >
          {children}
        </List>
      </div>
    )
  }
}

export default SimpleMenu