Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4679 stevensc 1 
/* eslint-disable react/prop-types */
4813 stevensc 2 
import React, { useEffect, useRef, useState } from 'react'
4679 stevensc 3 
import { connect } from 'react-redux'
4 
import { addNotification } from '../../../redux/notification/notification.actions'
4813 stevensc 5 
import useOutsideClick from '../../../hooks/useOutsideClick'
4679 stevensc 6 
 
4946 stevensc 7 
const ComunicationOptions = ({
8 
    messagesCount = 0,
9 
    Icon = null,
10 
    title = '',
11 
    url = '',
12 
    childs = []
13 
}) => {
4813 stevensc 14 
    const [displayMenu, setDisplayMenu] = useState(false)
15 
    const outsideClick = useOutsideClick(menu)
16 
    const menu = useRef(null)
4679 stevensc 17 
 
4815 stevensc 18 
    const handleClick = (e) => {
19 
        e.preventDefault()
20 
        setDisplayMenu(!displayMenu)
21 
    }
22 
 
4813 stevensc 23 
    useEffect(() => {
24 
        if (outsideClick) setDisplayMenu(false)
25 
    }, [outsideClick])
26 
 
4679 stevensc 27 
    return (
4813 stevensc 28 
        <li ref={menu}>
4815 stevensc 29 
            <a href={url} className={`header__option mobile ${displayMenu && 'active'}`} onClick={handleClick}>
4679 stevensc 30 
                {Icon && <Icon className="header__option-icon" />}
31 
                <span>{title}</span>
32 
                <span className={`badge ${messagesCount ? 'd-block' : 'd-none'}`} style={{ top: '10px' }}>
33 
                    {messagesCount}
34 
                </span>
35 
            </a>
36 
            {!!childs.length &&
4813 stevensc 37 
                <nav className={`nav__options-dropdown ${displayMenu && 'show'}`}>
4679 stevensc 38 
                    <ul>{childs.map((linkOption, index) =>
39 
                        <li key={index}>
4680 stevensc 40 
                            <li className='d-flex align-items-center justify-content-between' key={index}>
4763 stevensc 41 
                                <a href={linkOption.href} target='secondary'>{linkOption.label}</a>
4682 stevensc 42 
                                {(linkOption.label === 'Inmail' && messagesCount) &&
4813 stevensc 43 
                                    <span className={`badge ${messagesCount ? 'd-block position-relative' : 'd-none'}`} style={{ left: 0, transform: 'none' }}>
4682 stevensc 44 
                                        {messagesCount}
45 
                                    </span>}
4680 stevensc 46 
                            </li>
4679 stevensc 47 
                        </li>
48 
                    )}
49 
                    </ul>
50 
                </nav>
51 
            }
52 
        </li>
53 
    )
54 
}
55 
 
56 
const mapDispatchToProps = {
57 
    addNotification: (notification) => addNotification(notification),
4946 stevensc 58 
}
4679 stevensc 59 
 
60 
export default connect(null, mapDispatchToProps)(ComunicationOptions)