maccounter
72 строки · 1.9 Кб
1import { BasePropsWithoutChild } from '@localTypes/BaseProps'
2import React, { MouseEventHandler, useState } from 'react'
3import { NavLink } from 'react-router-dom'
4import clsx from 'clsx'
5import styles from './Sidebar.module.scss'
6
7interface SidebarItemProps extends BasePropsWithoutChild {
8title: string
9Ico: React.FC | string | undefined
10link?: string
11isSidebarOpened: boolean
12isLinked?: boolean
13}
14
15const SidebarItem: React.FC<SidebarItemProps> = (({
16title,
17Ico,
18link = '/',
19isSidebarOpened,
20className,
21isLinked,
22onClick,
23}) => {
24const [isActive, setIsActive] = useState(false)
25const DELAY = 1000
26let timerForShow: ReturnType<typeof setTimeout>
27
28const hoverSidebar = () => {
29if (isSidebarOpened) { return }
30timerForShow = setTimeout(() => {
31setIsActive(true)
32}, DELAY)
33}
34
35const leaveSidebar = () => {
36clearTimeout(timerForShow)
37setIsActive(false)
38}
39
40const clickHandler: MouseEventHandler = (e) => {
41if (!isLinked) { e.preventDefault() }
42if (onClick) {
43leaveSidebar()
44onClick(e)
45}
46}
47
48return (
49<NavLink
50to={link}
51activeClassName={isLinked ? styles.active : undefined}
52role="link"
53className={clsx(
54styles.sidebarItem,
55{ [styles.promptActive]: isActive },
56className,
57)}
58onMouseEnter={hoverSidebar}
59onMouseLeave={leaveSidebar}
60onClick={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
70SidebarItem.defaultProps = { isLinked: true, link: '/' }
71
72export default SidebarItem
73