@eureca/eureca-ui/src/components/TableMenu/index.js

UI component library of Eureca's user and admin apps

import React, { useRef } from 'react';
import PropTypes from 'prop-types';

import { Box, IconButton, Menu, MenuItem } from '@material-ui/core';

import { FiMoreVertical } from 'react-icons/fi';

const styles = {
  iconContainer: {
    width: 18,
    height: 18,
    cursor: 'pointer',
    textAlign: 'center',
    lineHeight: '18px',
    fontSize: 18,
  },
};

function TableMenu({
  options = [
    { id: 0, label: 'Profile', onClick: () => {} },
    { id: 1, label: 'My Account', onClick: () => {} },
    { id: 2, label: 'Logout', onClick: () => {} },
  ],
}) {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const BoxEl = useRef();

  const handleClick = e => {
    e.stopPropagation();
    setAnchorEl(BoxEl.current);
  };

  const handleClose = e => {
    setAnchorEl(null);
  };

  return (
    <>
      <IconButton onClick={handleClick}>
        <Box h={1} ref={BoxEl} justify="center" style={styles.iconContainer}>
          <FiMoreVertical />
        </Box>
      </IconButton>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        {options.map(item => (
          <MenuItem
            onClick={e => {
              e.stopPropagation();
              handleClose();
              item.onClick();
            }}
            key={item.id}
          >
            {item.label}
          </MenuItem>
        ))}
      </Menu>
    </>
  );
}

TableMenu.propTypes = {
  options: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      label: PropTypes.string.isRequired,
      onClick: PropTypes.func.isRequired,
    })
  ),
};

export { TableMenu };