import React from 'react'; import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown'; import PropTypes from 'prop-types'; class DropdownMenu extends React.PureComponent { static contextTypes = { router: PropTypes.object }; static propTypes = { icon: PropTypes.string.isRequired, items: PropTypes.array.isRequired, size: PropTypes.number.isRequired, direction: PropTypes.string, ariaLabel: PropTypes.string }; static defaultProps = { ariaLabel: "Menu" }; state = { direction: 'left' }; setRef = (c) => { this.dropdown = c; } handleClick = (e) => { const i = Number(e.currentTarget.getAttribute('data-index')); const { action, to } = this.props.items[i]; e.preventDefault(); if (typeof action === 'function') { action(); } else if (to) { this.context.router.push(to); } this.dropdown.hide(); } renderItem = (item, i) => { if (item === null) { return
  • ; } const { text, action, href = '#' } = item; return (
  • {text}
  • ); } render () { const { icon, items, size, direction, ariaLabel } = this.props; const directionClass = (direction === "left") ? "dropdown__left" : "dropdown__right"; return (
      {items.map(this.renderItem)}
    ); } } export default DropdownMenu;