new-marketplace

1
'use client';
2
import { useRouter } from 'next/navigation';
3
import Link from 'next/link';
4
import { Ripple } from 'primereact/ripple';
5
import { classNames } from 'primereact/utils';
6
import React, { useEffect, useContext } from 'react';
7
import { CSSTransition } from 'react-transition-group';
8
import { MenuContext } from './context/menucontext';
9
import { AppMenuItemProps } from '@/types';
10
import { usePathname, useSearchParams } from 'next/navigation';
11

12
const AppMenuitem = (props: AppMenuItemProps) => {
13
    const pathname = usePathname();
14
    const searchParams = useSearchParams();
15
    const { activeMenu, setActiveMenu } = useContext(MenuContext);
16
    const item = props.item;
17
    const key = props.parentKey ? props.parentKey + '-' + props.index : String(props.index);
18
    const isActiveRoute = item!.to && pathname === item!.to;
19
    const active = activeMenu === key || activeMenu.startsWith(key + '-');
20
    const onRouteChange = (url: string) => {
21
        if (item!.to && item!.to === url) {
22
            setActiveMenu(key);
23
        }
24
    };
25

26
    useEffect(() => {
27
        onRouteChange(pathname);
28
        // eslint-disable-next-line react-hooks/exhaustive-deps
29
    }, [pathname, searchParams]);
30

31
    const itemClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
32
        //avoid processing disabled items
33
        if (item!.disabled) {
34
            event.preventDefault();
35
            return;
36
        }
37

38
        //execute command
39
        if (item!.command) {
40
            item!.command({ originalEvent: event, item: item });
41
        }
42

43
        // toggle active state
44
        if (item!.items) setActiveMenu(active ? (props.parentKey as string) : key);
45
        else setActiveMenu(key);
46
    };
47

48
    const subMenu = item!.items && item!.visible !== false && (
49
        <CSSTransition timeout={{ enter: 1000, exit: 450 }} classNames="layout-submenu" in={props.root ? true : active} key={item!.label}>
50
            <ul>
51
                {item!.items.map((child, i) => {
52
                    return <AppMenuitem item={child} index={i} className={child.badgeClass} parentKey={key} key={child.label} />;
53
                })}
54
            </ul>
55
        </CSSTransition>
56
    );
57

58
    return (
59
        <li className={classNames({ 'layout-root-menuitem': props.root, 'active-menuitem': active })}>
60
            {props.root && item!.visible !== false && <div className="layout-menuitem-root-text">{item!.label}</div>}
61
            {(!item!.to || item!.items) && item!.visible !== false ? (
62
                <a href={item!.url} onClick={(e) => itemClick(e)} className={classNames(item!.class, 'p-ripple')} target={item!.target} tabIndex={0}>
63
                    <i className={classNames('layout-menuitem-icon', item!.icon)}></i>
64
                    <span className="layout-menuitem-text">{item!.label}</span>
65
                    {item!.items && <i className="pi pi-fw pi-angle-down layout-submenu-toggler"></i>}
66
                    <Ripple />
67
                </a>
68
            ) : null}
69

70
            {item!.to && !item!.items && item!.visible !== false ? (
71
                <Link href={item!.to} replace={item!.replaceUrl} target={item!.target} onClick={(e) => itemClick(e)} className={classNames(item!.class, 'p-ripple', { 'active-route': isActiveRoute })} tabIndex={0}>
72
                    <i className={classNames('layout-menuitem-icon', item!.icon)}></i>
73
                    <span className="layout-menuitem-text">{item!.label}</span>
74
                    {item!.items && <i className="pi pi-fw pi-angle-down layout-submenu-toggler"></i>}
75
                    <Ripple />
76
                </Link>
77
            ) : null}
78

79
            {subMenu}
80
        </li>
81
    );
82
};
83

84
export default AppMenuitem;
85