Rev 4979 | Rev 6245 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
/* eslint-disable react/prop-types */
import React, { useLayoutEffect, useRef, useState } from 'react'
import useOutsideClick from '../../../hooks/useOutsideClick'
import axios from '../../../utils/axios'
import ListItemDropdown from './ListItemDropdown'
import './HeaderOptions.scss'
import './Dropdowns.scss'
const HeaderOptions = ({
Icon = null,
title = '',
url = '',
childs = [],
ajaxRequest = 0,
isMobile = false,
badgeCount = 0
}) => {
const [displayMenu, setDisplayMenu] = useState(false)
const menu = useRef(null)
const outsideClick = useOutsideClick(menu)
const handleClick = () => {
setDisplayMenu(!displayMenu)
}
const handleAjaxRequest = async () => {
try {
const { data } = await axios.get(url)
if (data.success) window.open(data.data, '_backend')
} catch (error) {
console.log('>>: error > ', error)
}
}
useLayoutEffect(() => {
if (outsideClick) setDisplayMenu(false)
}, [outsideClick])
return (
<li ref={menu} className={!isMobile && 'd-none d-lg-block'}>
<a
href={`/${url}`}
className={`header__option ${isMobile && 'mobile'} ${displayMenu && 'active'}`}
onClick={(e) => {
if (ajaxRequest) {
e.preventDefault()
handleAjaxRequest()
}
if (childs.length) {
e.preventDefault()
handleClick()
}
}}
target='framename'
>
{Icon && <Icon className="header__option-icon" />}
<span>{title}</span>
<span className={`badge ${badgeCount ? 'd-block' : 'd-none'}`} style={{ top: '10px' }}>
{badgeCount}
</span>
</a>
<ListItemDropdown isShow={displayMenu} options={childs} />
</li>
)
}
export default HeaderOptions