{"size": 2517, "ext": "js", "max_stars_repo_path": "src/components/CustomIconMenu/CustomIconMenu.js", "max_stars_repo_name": "Ouranosinc/PAVICS-frontend", "max_stars_repo_stars_event_min_datetime": "2017-05-17T17:58:32.000Z", "max_stars_repo_stars_event_max_datetime": "2021-07-06T20:00:09.000Z", "max_issues_repo_path": "src/components/CustomIconMenu/CustomIconMenu.js", "max_issues_repo_name": "Ouranosinc/PAVICS-frontend", "max_issues_repo_issues_event_min_datetime": "2017-07-05T15:23:41.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-01T23:49:09.000Z", "max_forks_repo_path": "src/components/CustomIconMenu/CustomIconMenu.js", "max_forks_repo_name": "Ouranosinc/PAVICS-frontend", "max_forks_repo_forks_event_min_datetime": "2017-10-09T10:21:56.000Z", "max_forks_repo_forks_event_max_datetime": "2017-12-06T21:08:09.000Z"}
{"max_stars_count": 5, "max_issues_count": 78, "max_forks_count": 2, "avg_line_length": 28.2808988764, "max_line_length": 141, "alphanum_fraction": 0.6559396106}
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Menu from '@material-ui/core/Menu';
import IconButton from'@material-ui/core/IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVert';

const styles = theme => ({
  CustomIconMenu: {

  }
});

/*
 CustomIconMenu Component encapsulate anchor element and open/close generic events of such actions menu
 Pass any number of MenuItem(s) with any kind of handlers as children
 Should be used in most one-level lists containing IconButton actions menu
 Do not use in nested list since calling current methods(mostly onMenuClosed()) from parent with onRef strategy will be a nightmare to manage
 See ProjectSearchCriterias component for a taste
 TODO: Ideally onMenuClosed() should be called after any children MenuItem.onClick event
 */
export class CustomIconMenu extends React.Component {
  static propTypes = {
    classes: PropTypes.object.isRequired,
    onRef: PropTypes.func,
    menuItems: PropTypes.array.isRequired,
    iconButtonClass: PropTypes.string,
    menuClass: PropTypes.string,
    menuId: PropTypes.string,
  };

  constructor(props) {
    super(props);
    this.state = {
      anchor: null
    }
  }

  componentDidMount() {
    // Expose Component methods externally
    if (this.props.onRef) this.props.onRef(this)
  }
  componentWillUnmount() {
    if (this.props.onRef) this.props.onRef(undefined)
  }

  onMenuClosed = event => {
    this.setState({ anchor: null });
    if(event) event.stopPropagation();
  };

  onMenuClicked = event => {
    this.setState({ anchor: event.currentTarget });
    event.stopPropagation();
  };

  render () {
    const { anchor } = this.state;
    const { iconButtonClass, menuClass, menuId, menuItems } = this.props;
    return (
      <div className={this.props.classes['CustomIconMenu']}>
        <IconButton
          className={iconButtonClass}
          aria-label="Actions"
          aria-owns={anchor ? menuId : null}
          aria-haspopup="true"
          onClick={this.onMenuClicked}>
          <MoreVertIcon />
        </IconButton>
        <Menu
          id={menuId}
          className={menuClass}
          anchorEl={anchor}
          open={Boolean(anchor)}
          onClose={this.onMenuClosed}
          PaperProps={{
            style: {
              width: 200
            },
          }}>
          {menuItems}
        </Menu>
      </div>
    )
  }
}

export default withStyles(styles)(CustomIconMenu);
