Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6753 | Ir a la última revisión | | Ultima modificación | Ver Log |

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