maccounter

1
import { BasePropsWithoutChild } from '@localTypes/BaseProps'
2
import React, { MouseEventHandler, useState } from 'react'
3
import { NavLink } from 'react-router-dom'
4
import clsx from 'clsx'
5
import styles from './Sidebar.module.scss'
6

7
interface SidebarItemProps extends BasePropsWithoutChild {
8
    title: string
9
    Ico: React.FC | string | undefined
10
    link?: string
11
    isSidebarOpened: boolean
12
    isLinked?: boolean
13
}
14

15
const SidebarItem: React.FC<SidebarItemProps> = (({
16
    title,
17
    Ico,
18
    link = '/',
19
    isSidebarOpened,
20
    className,
21
    isLinked,
22
    onClick,
23
}) => {
24
    const [isActive, setIsActive] = useState(false)
25
    const DELAY = 1000
26
    let timerForShow: ReturnType<typeof setTimeout>
27

28
    const hoverSidebar = () => {
29
        if (isSidebarOpened) { return }
30
        timerForShow = setTimeout(() => {
31
            setIsActive(true)
32
        }, DELAY)
33
    }
34

35
    const leaveSidebar = () => {
36
        clearTimeout(timerForShow)
37
        setIsActive(false)
38
    }
39

40
    const clickHandler: MouseEventHandler = (e) => {
41
        if (!isLinked) { e.preventDefault() }
42
        if (onClick) {
43
            leaveSidebar()
44
            onClick(e)
45
        }
46
    }
47

48
    return (
49
        <NavLink
50
            to={link}
51
            activeClassName={isLinked ? styles.active : undefined}
52
            role="link"
53
            className={clsx(
54
                styles.sidebarItem,
55
                { [styles.promptActive]: isActive },
56
                className,
57
            )}
58
            onMouseEnter={hoverSidebar}
59
            onMouseLeave={leaveSidebar}
60
            onClick={clickHandler}
61
        >
62
            {Ico && typeof Ico !== 'string' ? <Ico /> : <span className={styles.sidebarProfile}>{Ico}</span>}
63
            <div className={styles.prompt}>
64
                <p>{title}</p>
65
            </div>
66
        </NavLink>
67
    )
68
})
69

70
SidebarItem.defaultProps = { isLinked: true, link: '/' }
71

72
export default SidebarItem
73