57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import {classes, Modify} from "../../Utils";
|
|
import {SubmenuFloat} from "./SubmenuFloat";
|
|
import {NavLink, NavLinkProps} from "react-router-dom";
|
|
|
|
/**
|
|
* Main menu item properties.
|
|
*/
|
|
export type MainMenuItemProperties = React.PropsWithChildren<Modify<React.AnchorHTMLAttributes<HTMLAnchorElement>, {
|
|
}>>;
|
|
|
|
/**
|
|
* Main component of a main menu item.
|
|
*/
|
|
export const MainMenuItem = React.forwardRef<HTMLAnchorElement, MainMenuItemProperties>(function SubmenuItem({children, ...props}: MainMenuItemProperties, ref)
|
|
{
|
|
return (
|
|
<li>
|
|
<a ref={ref} {...props}>{children}</a>
|
|
</li>
|
|
);
|
|
});
|
|
|
|
/**
|
|
* A main menu item link properties.
|
|
*/
|
|
export type MainMenuLinkProperties = React.PropsWithChildren<Modify<NavLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>, {
|
|
}>>;
|
|
|
|
/**
|
|
* A main menu item link.
|
|
*/
|
|
export const MainMenuLink = React.forwardRef<HTMLAnchorElement, MainMenuLinkProperties>(function MainMenuLink({children, ...props}: MainMenuLinkProperties, ref)
|
|
{
|
|
return (
|
|
<li>
|
|
<NavLink ref={ref} {...props}>{children}</NavLink>
|
|
</li>
|
|
);
|
|
});
|
|
|
|
/**
|
|
* A main menu item that open a submenu.
|
|
*/
|
|
export function MainMenuItemSubmenu({submenu, className, children, ...props}: Modify<MainMenuItemProperties, {
|
|
/**
|
|
* The submenu content.
|
|
*/
|
|
submenu: React.ReactNode;
|
|
}>)
|
|
{
|
|
return (
|
|
<SubmenuFloat submenu={submenu} role={"menu"} floatingOptions={{ placement: "bottom-start" }}>
|
|
<MainMenuItem className={classes("submenu", className)} {...props}>{children}</MainMenuItem>
|
|
</SubmenuFloat>
|
|
);
|
|
}
|