Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3585 Rev 3701
Línea 1... Línea 1...
1 
import React, { useState } from 'react';
 1 
import React, { useState } from 'react';
2 
import { Link, useNavigate } from 'react-router-dom';
 2 
import { useNavigate } from 'react-router-dom';
3 
import { Badge, styled } from '@mui/material';
 3 
import { Badge, styled, Menu, MenuItem } from '@mui/material';
4 
 
 - 
 
5 
import { useOutsideClick } from '@hooks';
 4 
import { useDispatch } from 'react-redux';
6 
 
 - 
 
7 
import ListItemDropdown from './ListItemDropdown';
 - 
 
Línea 8... Línea 5...
8 
 
 5 
 
9 
import { getAdminUrl } from '@app/services/admin';
 - 
 
10 
import { useDispatch } from 'react-redux';
 6 
import { getAdminUrl } from '@app/services/admin';
Línea 11... Línea 7...
11 
import { addNotification } from '@app/redux/notification/notification.actions';
 7 
import { addNotification } from '@app/redux/notification/notification.actions';
12 
 
 8 
 
13 
const NavItem = styled(Link)(({ theme }) => ({
 9 
const NavItem = styled('div')(({ theme }) => ({
14 
  position: 'relative',
 10 
  position: 'relative',
15 
  display: 'flex',
 11 
  display: 'flex',
16 
  flexDirection: 'column',
 12 
  flexDirection: 'column',
17 
  alignItems: 'center',
 13 
  alignItems: 'center',
18 
  justifyContent: 'center',
 14 
  justifyContent: 'center',
19 
  padding: theme.spacing(1, 0),
 15 
  padding: theme.spacing(1, 0),
20 
  fontSize: '12px',
 16 
  fontSize: '12px',
- 
 
 17 
  fontWeight: 400,
21 
  fontWeight: 400,
 18 
  height: '100%',
22 
  height: '100%',
 19 
  cursor: 'pointer',
23 
  '&::after': {
 20 
  '&::after': {
24 
    borderBottom: '2px solid var(--font-color)',
 21 
    borderBottom: '2px solid var(--font-color)',
25 
    content: '""',
 22 
    content: '""',
Línea 40... Línea 37...
40 
    fontSize: 0
 37 
    fontSize: 0
41 
  }
 38 
  }
42 
}));
 39 
}));
Línea 43... Línea 40...
43 
 
 40 
 
44 
const NavigationItem = ({ ajax = 0, url = '', childs = [], count = 0, onClick, children }) => {
 41 
const NavigationItem = ({ ajax = 0, url = '', childs = [], count = 0, onClick, children }) => {
- 
 
 42 
  const [anchorEl, setAnchorEl] = useState(null);
Línea 45... Línea 43...
45 
  const [displayMenu, setDisplayMenu] = useState(false);
 43 
  const open = Boolean(anchorEl);
46 
 
 44 
 
Línea 47... Línea 45...
47 
  const navigate = useNavigate();
 45 
  const navigate = useNavigate();
- 
 
 46 
  const dispatch = useDispatch();
48 
  const dispatch = useDispatch();
 47 
 
49 
 
 - 
 
Línea 50... Línea 48...
50 
  const [menu] = useOutsideClick(() => setDisplayMenu(false));
 48 
  const handleClose = () => {
51 
 
 49 
    setAnchorEl(null);
52 
  const toggleMenu = () => setDisplayMenu(!displayMenu);
 50 
  };
53 
 
 51 
 
Línea 72... Línea 70...
72 
      onClick();
 70 
      onClick();
73 
      return;
 71 
      return;
74 
    }
 72 
    }
Línea 75... Línea 73...
75 
 
 73 
 
76 
    if (childs.length) {
 74 
    if (childs.length) {
77 
      toggleMenu();
 75 
      setAnchorEl(e.currentTarget);
78 
      return;
 76 
      return;
Línea 79... Línea 77...
79 
    }
 77 
    }
80 
 
 78 
 
Línea -... Línea 79...
- 
 
 79 
    navigate(`/${url}`);
- 
 
 80 
  };
- 
 
 81 
 
- 
 
 82 
  const handleMenuClick = (childUrl) => {
- 
 
 83 
    navigate(`/${childUrl}`);
81 
    navigate(`/${url}`);
 84 
    handleClose();
82 
  };
 85 
  };
83 
 
 86 
 
84 
  return (
 87 
  return (
85 
    <li ref={menu}>
 - 
 
86 
      <NavItem to={url} onClick={handleClick} className={displayMenu ? 'active' : ''}>
 88 
    <li>
87 
        {children}
 89 
      <NavItem onClick={handleClick} className={open ? 'active' : ''}>
88 
 
 90 
        {children}
89 
        <Badge
 91 
        <Badge
90 
          badgeContent={count}
 92 
          badgeContent={count}
91 
          color='error'
 93 
          color='error'
- 
 
 94 
          sx={{ position: 'absolute', top: '1rem', right: '1rem' }}
- 
 
 95 
        />
- 
 
 96 
      </NavItem>
- 
 
 97 
      <Menu
- 
 
 98 
        anchorEl={anchorEl}
- 
 
 99 
        open={open}
92 
          sx={{ position: 'absolute', top: '1rem', right: '1rem' }}
 100 
        onClose={handleClose}
- 
 
 101 
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
93 
        />
 102 
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
- 
 
 103 
      >
- 
 
 104 
        {childs.map((child) => (
- 
 
 105 
          <MenuItem key={child.href} onClick={() => handleMenuClick(child.href)}>
- 
 
 106 
            {child.label}
94 
      </NavItem>
 107 
          </MenuItem>
95 
 
 108 
        ))}
96 
      <ListItemDropdown isShow={displayMenu} options={childs} onSelect={toggleMenu} />
 109 
      </Menu>
Línea 97... Línea 110...
97 
    </li>
 110 
    </li>