Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

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

import styled, { css } from 'styled-components'

import IconButton from '@mui/material/IconButton'

import MoreVertIcon from '@mui/icons-material/MoreVert'

const StyledOptionsButton = styled(IconButton)`

  position: absolute !important;

  right: ${(props) => props.right || '0'};

  top: ${(props) => props.top || '50%'};

  z-index: 100;

  ${(props) =>

    !props.top &&

    css`

      transform: translateY(-50%);

    `}

`

const Options = ({ options, right, top }) => {

  const [anchorEl, setAnchorEl] = useState(null)

  const open = Boolean(anchorEl)

  const handleClick = (event) => {

    setAnchorEl(event.currentTarget)

  }

  const handleClose = () => {

    setAnchorEl(null)

  }

  return (

    <>

      <StyledOptionsButton

        right={right}

        top={top}

        onClick={handleClick}

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

        aria-haspopup='true'

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

      >

        <MoreVertIcon />

      </StyledOptionsButton>

      <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