Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React, { useEffect, useRef, useState } from 'react'

import UserDropdown from './UserDropdown';

const UserImageDropdown = ({ fullName, image, linkAdmin, linkImpersonate, sessionImage }) => {

    const [showUserDropdown, setShowUserDropdown] = useState(false);

    const userDropdownContainer = useRef(null);

    const userImg = useRef(null);

    const handleShowUserDropdown = () => setShowUserDropdown(!showUserDropdown)

    useEffect(() => {

        const handleClickOutside = (event) => {

            if (userDropdownContainer.current && !userDropdownContainer.current.contains(event.target)) {

                setShowUserDropdown(false)

            }

        }

        document.addEventListener("mousedown", handleClickOutside);

        return () => {

            document.removeEventListener("mousedown", handleClickOutside);

        };

    }, [userDropdownContainer]);

    return (

        <div

            className='userImgContainer'

            onClick={handleShowUserDropdown}

            ref={userDropdownContainer}

        >

            <div className="d-flex align-items-center">

                <img

                    src={sessionImage ? sessionImage : image}

                    alt="user-img"

                    className='userImg'

                    ref={userImg}

                />

                <div className="d-none d-sm-none d-md-inline-flex d-lg-inline-flex flex-column">

                    <h3>{fullName}</h3>

                    <span>Mi perfil</span>

                </div>

            </div>

            <div className="d-none d-sm-none d-md-block d-lg-block flex-column">

                <img src='/images/icons/options.png' className='img-icon options-lg' />

            </div>

            <UserDropdown

                linkAdmin={linkAdmin}

                linkImpersonate={linkImpersonate}

                show={showUserDropdown}

                onClose={handleShowUserDropdown}

                userDropdownContainer={userDropdownContainer}

            />

        </div>

    )

}

export default UserImageDropdown