Proyectos de Subversion LeadersLinked - SPA

import React, { useContext } from 'react';
import { IconButton, MenuItem as MuiMenuItem, Menu as MuiMenu, styled } from '@mui/material';
import { MoreVert } from '@mui/icons-material';
import { MenuContext } from '.';

const OptionsButton = styled(IconButton)(({ theme }) => ({
  position: 'absolute',
  top: theme.spacing(1),
  right: theme.spacing(1),
  zIndex: 1
}));

export function MenuContent({ icon, children }) {
  const { anchorEl, open, openMenu, closeMenu } = useContext(MenuContext);

  return (
    <>
      <OptionsButton
        onClick={(event) => {
          event.stopPropagation();
          openMenu(event.currentTarget);
        }}
      >
        {icon ? icon : <MoreVert />}
      </OptionsButton>
      <MuiMenu
        anchorEl={anchorEl}
        open={open}
        onClose={(event) => {
          event.stopPropagation();
          closeMenu();
        }}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left'
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'right'
        }}
      >
        {children}
      </MuiMenu>
    </>
  );
}

export function MenuItem({ onClick, children }) {
  const { handleClick } = useContext(MenuContext);

  return (
    <MuiMenuItem
      onClick={(event) => {
        event.stopPropagation();
        handleClick(onClick);
      }}
    >
      {children}
    </MuiMenuItem>
  );
}