Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6911 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 6911 Rev 6938
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react'
- 
 
 2 
import styled from 'styled-components'
2 
import IconButton from '@mui/material/IconButton'
 3 
import IconButton from '@mui/material/IconButton'
3 
import MoreVertIcon from '@mui/icons-material/MoreVert'
 4 
import MoreVertIcon from '@mui/icons-material/MoreVert'
- 
 
 5 
import { Menu, MenuItem } from '@mui/material'
Línea -... Línea 6...
- 
 
 6 
 
- 
 
 7 
const StyledOptionsButton = styled(IconButton)`
- 
 
 8 
  position: absolute;
- 
 
 9 
  right: ${(props) => props.right && 0};
- 
 
 10 
  top: ${(props) => props.top && '50%'};
- 
 
 11 
  transform: translateY(-50%);
- 
 
 12 
  z-index: 100;
- 
 
 13 
`
4 
 
 14 
 
5 
const Options = ({ options }) => {
 15 
const Options = ({ options, right, top }) => {
- 
 
 16 
  const [anchorEl, setAnchorEl] = useState(null)
Línea 6... Línea 17...
6 
  const [isShowMenu, setIsShowMenu] = useState(false)
 17 
  const open = Boolean(anchorEl)
7 
 
 18 
 
8 
  const toggleOptions = () => {
 19 
  const handleClick = (event) => {
Línea 9... Línea -...
9 
    setIsShowMenu(!isShowMenu)
 - 
 
10 
  }
 - 
 
11 
 
 - 
 
12 
  return (
 - 
 
13 
    <div className="header-options">
 - 
 
14 
      <IconButton onClick={toggleOptions}>
 - 
 
15 
        <MoreVertIcon />
 20 
    setAnchorEl(event.currentTarget)
16 
        <Options.Menu
 - 
 
17 
          options={options}
 - 
 
18 
          onClose={toggleOptions}
 21 
  }
19 
          show={isShowMenu}
 - 
 
20 
        />
 22 
 
21 
      </IconButton>
 - 
 
Línea 22... Línea -...
22 
    </div>
 - 
 
23 
  )
 23 
  const handleClose = () => {
- 
 
 24 
    setAnchorEl(null)
- 
 
 25 
  }
- 
 
 26 
 
- 
 
 27 
  return (
- 
 
 28 
    <>
- 
 
 29 
      <StyledOptionsButton
- 
 
 30 
        right={right}
24 
}
 31 
        top={top}
- 
 
 32 
        onClick={handleClick}
- 
 
 33 
        aria-controls={open ? 'account-menu' : undefined}
25 
 
 34 
        aria-haspopup="true"
- 
 
 35 
        aria-expanded={open ? 'true' : undefined}
- 
 
 36 
      >
- 
 
 37 
        <MoreVertIcon />
26 
const Menu = ({ options, show, onClose }) => {
 38 
      </StyledOptionsButton>
- 
 
 39 
      <Menu
- 
 
 40 
        anchorEl={anchorEl}
- 
 
 41 
        id="account-menu"
- 
 
 42 
        open={open}
- 
 
 43 
        onClose={handleClose}
- 
 
 44 
        onClick={handleClose}
27 
  return (
 45 
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
28 
    <ul className={`feed-options ${show ? 'active' : ''}`}>
 46 
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
29 
      {options.map((option, index) => (
 47 
      >
30 
        <li key={index}>
 48 
        {options.map((option, index) => (
31 
          <button
 49 
          <MenuItem
32 
            className="btn option-btn"
 50 
            key={index}
33 
            onClick={() => {
 51 
            onClick={() => {
34 
              option.action()
 52 
              option.action()
35 
              onClose()
 53 
              handleClose()
36 
            }}
 54 
            }}
37 
          >
 55 
          >
38 
            {option.label}
 56 
            {option.label}
39 
          </button>
 57 
          </MenuItem>
40 
        </li>
 58 
        ))}
Línea 41... Línea -...
41 
      ))}
 - 
 
42 
    </ul>
 - 
 
43 
  )
 59 
      </Menu>