Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3201 | Rev 3701 | 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';
2 
import { Link, useNavigate } from 'react-router-dom';
3 
import { Badge, styled } from '@mui/material';
3201 stevensc 4 
 
3585 stevensc 5 
import { useOutsideClick } from '@hooks';
3201 stevensc 6 
 
3585 stevensc 7 
import ListItemDropdown from './ListItemDropdown';
3201 stevensc 8 
 
3585 stevensc 9 
import { getAdminUrl } from '@app/services/admin';
10 
import { useDispatch } from 'react-redux';
11 
import { addNotification } from '@app/redux/notification/notification.actions';
3201 stevensc 12 
 
13 
const NavItem = styled(Link)(({ theme }) => ({
14 
  position: 'relative',
15 
  display: 'flex',
16 
  flexDirection: 'column',
17 
  alignItems: 'center',
18 
  justifyContent: 'center',
19 
  padding: theme.spacing(1, 0),
20 
  fontSize: '12px',
21 
  fontWeight: 400,
22 
  height: '100%',
23 
  '&::after': {
24 
    borderBottom: '2px solid var(--font-color)',
25 
    content: '""',
26 
    bottom: '-1px',
27 
    left: 0,
28 
    position: 'absolute',
29 
    transform: 'scaleX(0)',
30 
    transition: 'transform 0.2s ease-in-out',
31 
    width: '100%'
32 
  },
33 
  '&.active::after, &:hover::after': {
34 
    transform: 'scaleX(1)'
35 
  },
36 
  [theme.breakpoints.up('lg')]: {
37 
    minWidth: '60px'
38 
  },
39 
  [theme.breakpoints.down('md')]: {
40 
    fontSize: 0
41 
  }
3585 stevensc 42 
}));
3201 stevensc 43 
 
3585 stevensc 44 
const NavigationItem = ({ ajax = 0, url = '', childs = [], count = 0, onClick, children }) => {
45 
  const [displayMenu, setDisplayMenu] = useState(false);
3201 stevensc 46 
 
3585 stevensc 47 
  const navigate = useNavigate();
48 
  const dispatch = useDispatch();
3201 stevensc 49 
 
3585 stevensc 50 
  const [menu] = useOutsideClick(() => setDisplayMenu(false));
3201 stevensc 51 
 
3585 stevensc 52 
  const toggleMenu = () => setDisplayMenu(!displayMenu);
3201 stevensc 53 
 
54 
  const openAdmin = async () => {
55 
    try {
3585 stevensc 56 
      const adminUrl = await getAdminUrl(url);
57 
      window.open(adminUrl, '_blank');
3201 stevensc 58 
    } catch (error) {
3585 stevensc 59 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
3201 stevensc 60 
    }
3585 stevensc 61 
  };
3201 stevensc 62 
 
63 
  const handleClick = async (e) => {
3585 stevensc 64 
    e.preventDefault();
3201 stevensc 65 
 
66 
    if (ajax) {
3585 stevensc 67 
      openAdmin();
68 
      return;
3201 stevensc 69 
    }
70 
 
71 
    if (onClick) {
3585 stevensc 72 
      onClick();
73 
      return;
3201 stevensc 74 
    }
75 
 
76 
    if (childs.length) {
3585 stevensc 77 
      toggleMenu();
78 
      return;
3201 stevensc 79 
    }
80 
 
3585 stevensc 81 
    navigate(`/${url}`);
82 
  };
3201 stevensc 83 
 
84 
  return (
85 
    <li ref={menu}>
3585 stevensc 86 
      <NavItem to={url} onClick={handleClick} className={displayMenu ? 'active' : ''}>
3201 stevensc 87 
        {children}
88 
 
89 
        <Badge
90 
          badgeContent={count}
91 
          color='error'
92 
          sx={{ position: 'absolute', top: '1rem', right: '1rem' }}
93 
        />
94 
      </NavItem>
95 
 
3585 stevensc 96 
      <ListItemDropdown isShow={displayMenu} options={childs} onSelect={toggleMenu} />
3201 stevensc 97 
    </li>
3585 stevensc 98 
  );
99 
};
3201 stevensc 100 
 
3585 stevensc 101 
export default NavigationItem;