Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5397 Rev 5455
Línea -... Línea 1...
- 
 
 1 
/* eslint-disable camelcase */
1 
/* eslint-disable react/prop-types */
 2 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useRef, useState } from 'react'
 3 
import React, { useEffect, useRef, useState } from 'react'
3 
import UserDropdown from './UserDropdown'
 4 
import UserDropdown from './UserDropdown'
- 
 
 5 
import useOutsideClick from '../../../../hooks/useOutsideClick'
Línea 4... Línea 6...
4 
 
 6 
 
- 
 
 7 
const UserImageDropdown = ({ fullName, image, linkAdmin, linkImpersonate }) => {
5 
const UserImageDropdown = ({ fullName, image, linkAdmin, linkImpersonate, sessionImage }) => {
 8 
  const [sessionImage, setSessionImage] = useState(image)
6 
  const [showUserDropdown, setShowUserDropdown] = useState(false)
 9 
  const [showUserDropdown, setShowUserDropdown] = useState(false)
- 
 
 10 
  const userDropdownContainer = useRef(null)
7 
  const userDropdownContainer = useRef(null)
 11 
  const outsideClick = useOutsideClick(userDropdownContainer)
Línea 8... Línea 12...
8 
  const userImg = useRef(null)
 12 
  const userImg = useRef(null)
Línea 9... Línea 13...
9 
 
 13 
 
10 
  const handleShowUserDropdown = () => setShowUserDropdown(!showUserDropdown)
 14 
  const handleShowUserDropdown = () => setShowUserDropdown(!showUserDropdown)
11 
 
 15 
 
12 
  useEffect(() => {
 16 
  const checkSessionImage = () => {
13 
    const handleClickOutside = (event) => {
 17 
    const session_image = sessionStorage.getItem('user_session_image')
14 
      if (userDropdownContainer.current && !userDropdownContainer.current.contains(event.target)) {
 18 
    if (session_image) {
- 
 
 19 
      setSessionImage(session_image)
- 
 
 20 
      sessionStorage.removeItem('user_session_image')
- 
 
 21 
    }
15 
        setShowUserDropdown(false)
 22 
  }
Línea 16... Línea 23...
16 
      }
 23 
 
17 
    }
 24 
  useEffect(() => {
18 
    document.addEventListener('mousedown', handleClickOutside)
 25 
    setInterval(() => checkSessionImage(), 1000)
- 
 
 26 
 
- 
 
 27 
    return () => {
- 
 
 28 
      clearInterval()
- 
 
 29 
    }
19 
 
 30 
  }, [])
Línea 20... Línea 31...
20 
    return () => {
 31 
 
21 
      document.removeEventListener('mousedown', handleClickOutside)
 32 
  useEffect(() => {
22 
    }
 33 
    if (outsideClick) handleShowUserDropdown()
23 
  }, [userDropdownContainer])
 34 
  }, [outsideClick])
24 
 
 35 
 
25 
  return (
 36 
  return (
26 
        <div
 - 
 
27 
            className='userImgContainer'
 - 
 
28 
            onClick={handleShowUserDropdown}
 37 
    <div
29 
            ref={userDropdownContainer}
 - 
 
30 
        >
 - 
 
31 
            <div className="d-flex align-items-center">
 - 
 
32 
                <img
 - 
 
33 
                    src={sessionImage || image}
 38 
      className="userImgContainer"
34 
                    alt="user-img"
 39 
      onClick={handleShowUserDropdown}
35 
                    className='userImg'
 40 
      ref={userDropdownContainer}
36 
                    ref={userImg}
 - 
 
37 
                />
 41 
    >
38 
                <div className="d-none d-sm-none d-md-inline-flex d-lg-inline-flex flex-column">
 - 
 
39 
                    <h3>{fullName}</h3>
 42 
      <img src={sessionImage} alt="user-img" ref={userImg} />
40 
                    <span>Mi perfil</span>
 - 
 
41 
                </div>
 - 
 
42 
            </div>
 43 
      <div className="d-inline-flex flex-column">
43 
            <div className="d-none d-sm-none d-md-block d-lg-block flex-column">
 44 
        <h3>{fullName}</h3>
44 
                <img src='/images/icons/options.png' className='img-icon options-lg' />
 45 
        <span>Mi perfil</span>
45 
            </div>
 46 
      </div>
46 
 
 47 
      <img src="/images/icons/options.png" className="img-icon options-lg" />
47 
            <UserDropdown
 48 
      <UserDropdown
48 
                linkAdmin={linkAdmin}
 49 
        linkAdmin={linkAdmin}
49 
                linkImpersonate={linkImpersonate}
 50 
        linkImpersonate={linkImpersonate}
50 
                show={showUserDropdown}
 51 
        show={showUserDropdown}
51 
                onClose={handleShowUserDropdown}
 52 
        onClose={handleShowUserDropdown}
Línea 52... Línea 53...
52 
                userDropdownContainer={userDropdownContainer}
 53 
        userDropdownContainer={userDropdownContainer}