Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4250 Rev 5397
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 UserDropdown from './UserDropdown';
 3 
import UserDropdown from './UserDropdown'
Línea 4... Línea 4...
4 
 
 4 
 
- 
 
 5 
const UserImageDropdown = ({ fullName, image, linkAdmin, linkImpersonate, sessionImage }) => {
- 
 
 6 
  const [showUserDropdown, setShowUserDropdown] = useState(false)
- 
 
 7 
  const userDropdownContainer = useRef(null)
- 
 
 8 
  const userImg = useRef(null)
- 
 
 9 
 
- 
 
 10 
  const handleShowUserDropdown = () => setShowUserDropdown(!showUserDropdown)
- 
 
 11 
 
- 
 
 12 
  useEffect(() => {
- 
 
 13 
    const handleClickOutside = (event) => {
- 
 
 14 
      if (userDropdownContainer.current && !userDropdownContainer.current.contains(event.target)) {
- 
 
 15 
        setShowUserDropdown(false)
- 
 
 16 
      }
- 
 
 17 
    }
- 
 
 18 
    document.addEventListener('mousedown', handleClickOutside)
- 
 
 19 
 
- 
 
 20 
    return () => {
- 
 
 21 
      document.removeEventListener('mousedown', handleClickOutside)
- 
 
 22 
    }
Línea 5... Línea -...
5 
const UserImageDropdown = ({ fullName, image, linkAdmin, linkImpersonate, sessionImage }) => {
 - 
 
6 
 
 - 
 
7 
    const [showUserDropdown, setShowUserDropdown] = useState(false);
 - 
 
8 
    const userDropdownContainer = useRef(null);
 - 
 
9 
    const userImg = useRef(null);
 - 
 
10 
 
 - 
 
11 
    const handleShowUserDropdown = () => setShowUserDropdown(!showUserDropdown)
 - 
 
12 
 
 - 
 
13 
    useEffect(() => {
 - 
 
14 
        const handleClickOutside = (event) => {
 - 
 
15 
            if (userDropdownContainer.current && !userDropdownContainer.current.contains(event.target)) {
 - 
 
16 
                setShowUserDropdown(false)
 - 
 
17 
            }
 - 
 
18 
        }
 - 
 
19 
        document.addEventListener("mousedown", handleClickOutside);
 - 
 
20 
 
 - 
 
21 
        return () => {
 - 
 
22 
            document.removeEventListener("mousedown", handleClickOutside);
 - 
 
23 
        };
 - 
 
24 
    }, [userDropdownContainer]);
 23 
  }, [userDropdownContainer])
25 
 
 24 
 
26 
    return (
 25 
  return (
27 
        <div
 26 
        <div
28 
            className='userImgContainer'
 27 
            className='userImgContainer'
29 
            onClick={handleShowUserDropdown}
 28 
            onClick={handleShowUserDropdown}
30 
            ref={userDropdownContainer}
 29 
            ref={userDropdownContainer}
31 
        >
 30 
        >
32 
            <div className="d-flex align-items-center">
 31 
            <div className="d-flex align-items-center">
33 
                <img
 32 
                <img
34 
                    src={sessionImage ? sessionImage : image}
 33 
                    src={sessionImage || image}
35 
                    alt="user-img"
 34 
                    alt="user-img"
36 
                    className='userImg'
 35 
                    className='userImg'
37 
                    ref={userImg}
 36 
                    ref={userImg}
Línea 51... Línea 50...
51 
                show={showUserDropdown}
 50 
                show={showUserDropdown}
52 
                onClose={handleShowUserDropdown}
 51 
                onClose={handleShowUserDropdown}
53 
                userDropdownContainer={userDropdownContainer}
 52 
                userDropdownContainer={userDropdownContainer}
54 
            />
 53 
            />
55 
        </div>
 54 
        </div>
56 
    )
 55 
  )
57 
}
 56 
}
Línea 58... Línea -...
58 
 
 - 
 
59 
export default UserImageDropdown
 57 
 
- 
 
 58 
export default UserImageDropdown