68 lines
2.8 KiB
TypeScript
68 lines
2.8 KiB
TypeScript
import { Menu } from '@headlessui/react';
|
|
import classNames from 'classnames';
|
|
import type { MouseEvent, ReactNode, Ref } from 'react';
|
|
import { forwardRef } from 'react';
|
|
import type { NavLinkProps } from 'react-router-dom';
|
|
import { NavLink } from 'react-router-dom';
|
|
|
|
import styles from './style.module.css';
|
|
|
|
interface Props {
|
|
children: ReactNode | ((opts: { active: boolean; disabled: boolean }) => JSX.Element);
|
|
danger?: boolean;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
icon?: JSX.Element;
|
|
onClick?: (e: MouseEvent) => void;
|
|
}
|
|
|
|
const DropdownItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props & Partial<Omit<NavLinkProps, 'children'>>>(
|
|
({ disabled, danger, className, onClick, children, icon: IconComponent, ...props }, ref) => {
|
|
return (
|
|
<Menu.Item disabled={disabled}>
|
|
{({ disabled, active }) => (
|
|
<>
|
|
{'to' in props && props.to !== undefined ? (
|
|
<NavLink
|
|
{...props}
|
|
to={props.to}
|
|
ref={ref as unknown as Ref<HTMLAnchorElement>}
|
|
className={classNames(
|
|
styles.menu_item,
|
|
{
|
|
[styles.danger]: danger,
|
|
[styles.disabled]: disabled,
|
|
},
|
|
className,
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
{IconComponent}
|
|
{typeof children === 'function' ? children({ disabled, active }) : children}
|
|
</NavLink>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
ref={ref as unknown as Ref<HTMLButtonElement>}
|
|
className={classNames(
|
|
styles.menu_item,
|
|
{
|
|
[styles.danger]: danger,
|
|
[styles.disabled]: disabled,
|
|
},
|
|
className,
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
{IconComponent}
|
|
{typeof children === 'function' ? children({ disabled, active }) : children}
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
</Menu.Item>
|
|
);
|
|
},
|
|
);
|
|
|
|
export { DropdownItem };
|