Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4850 Rev 4946
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useRef, useState } from 'react'
 2 
import React, { useEffect, useRef, useState } from 'react'
3 
import './HeaderOptions.scss'
 - 
 
4 
import './Dropdowns.scss'
 - 
 
5 
import useOutsideClick from '../../../hooks/useOutsideClick'
 3 
import useOutsideClick from '../../../hooks/useOutsideClick'
6 
import axios from '../../../utils/axios'
 4 
import axios from '../../../utils/axios'
- 
 
 5 
import ListItemDropdown from './ListItemDropdown'
- 
 
 6 
import './HeaderOptions.scss'
- 
 
 7 
import './Dropdowns.scss'
Línea 7... Línea 8...
7 
 
 8 
 
- 
 
 9 
const HeaderOptions = ({
- 
 
 10 
    Icon = null,
- 
 
 11 
    title = '',
- 
 
 12 
    url = '',
- 
 
 13 
    childs = [],
- 
 
 14 
    ajaxRequest = 0,
- 
 
 15 
    isMobile = false,
- 
 
 16 
    badgeCount = 0
8 
const HeaderOptions = ({ Icon, title, url, childs = [], isMobile = false, ajaxRequest }) => {
 17 
}) => {
9 
    const [displayMenu, setDisplayMenu] = useState(false)
 - 
 
10 
    const menu = useRef(null)
 18 
    const [displayMenu, setDisplayMenu] = useState(false)
- 
 
 19 
    const outsideClick = useOutsideClick(menu)
- 
 
 20 
    const menu = useRef(null)
- 
 
 21 
 
- 
 
 22 
    const handleClick = () => {
- 
 
 23 
        if (window.innerWidth > 768) setDisplayMenu(!displayMenu)
Línea 11... Línea 24...
11 
    const outsideClick = useOutsideClick(menu)
 24 
    }
12 
 
 25 
 
13 
    useEffect(() => {
 26 
    useEffect(() => {
Línea 22... Línea 35...
22 
            console.log('>>: error > ', error)
 35 
            console.log('>>: error > ', error)
23 
        }
 36 
        }
24 
    }
 37 
    }
Línea 25... Línea 38...
25 
 
 38 
 
26 
    return (
 39 
    return (
27 
        <li ref={menu} className={!isMobile && 'd-none d-md-block'}>
 40 
        <li ref={menu} className={!isMobile && 'd-none d-lg-block'}>
28 
            <a
 41 
            <a
29 
                href={`/${url}`}
 42 
                href={`/${url}`}
30 
                className={`header__option ${isMobile && 'mobile'} ${displayMenu && 'active'}`}
 43 
                className={`header__option ${isMobile && 'mobile'} ${displayMenu && 'active'}`}
31 
                onClick={(e) => {
 44 
                onClick={(e) => {
32 
                    if (ajaxRequest) {
 45 
                    if (ajaxRequest) {
33 
                        e.preventDefault()
 46 
                        e.preventDefault()
34 
                        handleAjaxRequest()
 47 
                        handleAjaxRequest()
35 
                    }
 48 
                    }
36 
                    if (childs.length) {
 49 
                    if (childs.length) {
37 
                        e.preventDefault()
 50 
                        e.preventDefault()
38 
                        setDisplayMenu(!displayMenu)
 51 
                        handleClick()
39 
                    }
 52 
                    }
40 
                }}
 53 
                }}
41 
                target='framename'
 54 
                target='framename'
42 
            >
 55 
            >
43 
                {Icon && <Icon className="header__option-icon" />}
 56 
                {Icon && <Icon className="header__option-icon" />}
- 
 
 57 
                <span>{title}</span>
- 
 
 58 
                <span className={`badge ${badgeCount ? 'd-block' : 'd-none'}`} style={{ top: '10px' }}>
- 
 
 59 
                    {badgeCount}
44 
                <span>{title}</span>
 60 
                </span>
45 
            </a>
 - 
 
46 
            {!!childs.length &&
 - 
 
47 
                <nav className={`nav__options-dropdown ${isMobile && 'mobile'} ${displayMenu && 'show'}`}>
 61 
            </a>
48 
                    <ul>{childs.map((linkOption, index) =>
 - 
 
49 
                        <li key={index}>
 - 
 
50 
                            {linkOption.childs?.length
 - 
 
51 
                                ? <a href='/' onClick={(e) => e.preventDefault()}>{linkOption.label}</a>
 - 
 
52 
                                : <a href={`/${linkOption.href}`} target='framename'>{linkOption.label}</a>
 - 
 
53 
                            }
 - 
 
54 
                            {!!linkOption.childs?.length &&
 - 
 
55 
                                <nav className='navLinkLevelThree'>
 - 
 
56 
                                    <ul>
 - 
 
57 
                                        {linkOption.childs?.map((optionsChild, index) =>
 - 
 
58 
                                            <li key={index}>
 - 
 
59 
                                                <a href={`/${optionsChild.href}`} target='framename'>{optionsChild.label}</a>
 - 
 
60 
                                            </li>
 - 
 
61 
                                        )}
 - 
 
62 
                                    </ul>
 - 
 
63 
                                </nav>
 - 
 
64 
                            }
 - 
 
65 
                        </li>
 - 
 
66 
                    )}
 - 
 
67 
                    </ul>
 - 
 
68 
                </nav>
 - 
 
69 
            }
 62 
            <ListItemDropdown isShow={displayMenu} options={childs} />
70 
        </li>
 63 
        </li>
71 
    )
 64 
    )
Línea 72... Línea 65...
72 
}
 65 
}
73 
 
 66