Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3585 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3585 stevensc 1 
import React, { useState } from 'react';
3701 stevensc 2 
import { useNavigate } from 'react-router-dom';
3 
import { Badge, styled, Menu, MenuItem } from '@mui/material';
4 
import { useDispatch } from 'react-redux';
3201 stevensc 5 
 
3585 stevensc 6 
import { getAdminUrl } from '@app/services/admin';
7 
import { addNotification } from '@app/redux/notification/notification.actions';
3201 stevensc 8 
 
3701 stevensc 9 
const NavItem = styled('div')(({ theme }) => ({
3201 stevensc 10 
  position: 'relative',
11 
  display: 'flex',
12 
  flexDirection: 'column',
13 
  alignItems: 'center',
14 
  justifyContent: 'center',
15 
  padding: theme.spacing(1, 0),
16 
  fontSize: '12px',
17 
  fontWeight: 400,
18 
  height: '100%',
3701 stevensc 19 
  cursor: 'pointer',
3201 stevensc 20 
  '&::after': {
21 
    borderBottom: '2px solid var(--font-color)',
22 
    content: '""',
23 
    bottom: '-1px',
24 
    left: 0,
25 
    position: 'absolute',
26 
    transform: 'scaleX(0)',
27 
    transition: 'transform 0.2s ease-in-out',
28 
    width: '100%'
29 
  },
30 
  '&.active::after, &:hover::after': {
31 
    transform: 'scaleX(1)'
32 
  },
33 
  [theme.breakpoints.up('lg')]: {
34 
    minWidth: '60px'
35 
  },
36 
  [theme.breakpoints.down('md')]: {
37 
    fontSize: 0
38 
  }
3585 stevensc 39 
}));
3201 stevensc 40 
 
3585 stevensc 41 
const NavigationItem = ({ ajax = 0, url = '', childs = [], count = 0, onClick, children }) => {
3701 stevensc 42 
  const [anchorEl, setAnchorEl] = useState(null);
43 
  const open = Boolean(anchorEl);
3201 stevensc 44 
 
3585 stevensc 45 
  const navigate = useNavigate();
46 
  const dispatch = useDispatch();
3201 stevensc 47 
 
3701 stevensc 48 
  const handleClose = () => {
49 
    setAnchorEl(null);
50 
  };
3201 stevensc 51 
 
52 
  const openAdmin = async () => {
53 
    try {
3585 stevensc 54 
      const adminUrl = await getAdminUrl(url);
55 
      window.open(adminUrl, '_blank');
3201 stevensc 56 
    } catch (error) {
3585 stevensc 57 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
3201 stevensc 58 
    }
3585 stevensc 59 
  };
3201 stevensc 60 
 
61 
  const handleClick = async (e) => {
3585 stevensc 62 
    e.preventDefault();
3201 stevensc 63 
 
64 
    if (ajax) {
3585 stevensc 65 
      openAdmin();
66 
      return;
3201 stevensc 67 
    }
68 
 
69 
    if (onClick) {
3585 stevensc 70 
      onClick();
71 
      return;
3201 stevensc 72 
    }
73 
 
74 
    if (childs.length) {
3701 stevensc 75 
      setAnchorEl(e.currentTarget);
3585 stevensc 76 
      return;
3201 stevensc 77 
    }
78 
 
3585 stevensc 79 
    navigate(`/${url}`);
80 
  };
3201 stevensc 81 
 
3701 stevensc 82 
  const handleMenuClick = (childUrl) => {
83 
    navigate(`/${childUrl}`);
84 
    handleClose();
85 
  };
86 
 
3201 stevensc 87 
  return (
3701 stevensc 88 
    <li>
89 
      <NavItem onClick={handleClick} className={open ? 'active' : ''}>
3201 stevensc 90 
        {children}
91 
        <Badge
92 
          badgeContent={count}
93 
          color='error'
94 
          sx={{ position: 'absolute', top: '1rem', right: '1rem' }}
95 
        />
96 
      </NavItem>
3701 stevensc 97 
      <Menu
98 
        anchorEl={anchorEl}
99 
        open={open}
100 
        onClose={handleClose}
101 
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
102 
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
103 
      >
104 
        {childs.map((child) => (
105 
          <MenuItem key={child.href} onClick={() => handleMenuClick(child.href)}>
106 
            {child.label}
107 
          </MenuItem>
108 
        ))}
109 
      </Menu>
3201 stevensc 110 
    </li>
3585 stevensc 111 
  );
112 
};
3201 stevensc 113 
 
3585 stevensc 114 
export default NavigationItem;