Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

import { Menu, MenuItem, IconButton } from '@mui/material'

import { MoreVert } from '@mui/icons-material'

const Options = ({ options = [], right = '.5rem', top = '.5rem' }) => {

  const [anchorEl, setAnchorEl] = useState(null)

  const open = Boolean(anchorEl)

  const handleClick = (event) => {

    setAnchorEl(event.currentTarget)

  }

  const handleClose = () => {

    setAnchorEl(null)

  }

  if (!options.length) {

    return null

  }

  return (

    <>

      <IconButton

        sx={{

          position: 'absolute',

          right,

          top,

          transform: top ? 'none' : 'translateY(-50%)'

        }}

        right={right}

        top={top}

        onClick={handleClick}

        aria-controls={open ? 'account-menu' : ''}

        aria-haspopup='true'

        aria-expanded={open ? 'true' : ''}

      >

        <MoreVert />

      </IconButton>

      <Menu

        anchorEl={anchorEl}

        id='account-menu'

        open={open}

        onClose={handleClose}

        onClick={handleClose}

        transformOrigin={{ horizontal: 'right', vertical: 'top' }}

        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}

      >

        {options.map((option, index) => (

          <MenuItem

            key={index}

            onClick={() => {

              option.action()

              handleClose()

            }}

          >

            {option.label}

          </MenuItem>

        ))}

      </Menu>

    </>

  )

}

export default Options