78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import { FunctionComponent, MouseEvent, ReactElement, ReactNode } from 'react';
|
|
import { IconComponent } from 'twenty-ui';
|
|
|
|
import { LightIconButtonProps } from '@/ui/input/button/components/LightIconButton';
|
|
import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
|
|
|
|
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
|
|
import {
|
|
StyledHoverableMenuItemBase,
|
|
StyledMenuItemLeftContent,
|
|
} from '../internals/components/StyledMenuItemBase';
|
|
import { MenuItemAccent } from '../types/MenuItemAccent';
|
|
|
|
export type MenuItemIconButton = {
|
|
Wrapper?: FunctionComponent<{ iconButton: ReactElement }>;
|
|
Icon: IconComponent;
|
|
accent?: LightIconButtonProps['accent'];
|
|
onClick?: (event: MouseEvent<any>) => void;
|
|
};
|
|
|
|
export type MenuItemProps = {
|
|
accent?: MenuItemAccent;
|
|
className?: string;
|
|
iconButtons?: MenuItemIconButton[];
|
|
isIconDisplayedOnHoverOnly?: boolean;
|
|
isTooltipOpen?: boolean;
|
|
LeftIcon?: IconComponent | null;
|
|
onClick?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
onMouseLeave?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
testId?: string;
|
|
text: ReactNode;
|
|
};
|
|
|
|
export const MenuItem = ({
|
|
accent = 'default',
|
|
className,
|
|
iconButtons,
|
|
isIconDisplayedOnHoverOnly = true,
|
|
LeftIcon,
|
|
onClick,
|
|
onMouseEnter,
|
|
onMouseLeave,
|
|
testId,
|
|
text,
|
|
}: MenuItemProps) => {
|
|
const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
|
|
|
|
const handleMenuItemClick = (event: MouseEvent<HTMLDivElement>) => {
|
|
if (!onClick) return;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
onClick?.(event);
|
|
};
|
|
|
|
return (
|
|
<StyledHoverableMenuItemBase
|
|
data-testid={testId ?? undefined}
|
|
onClick={handleMenuItemClick}
|
|
className={className}
|
|
accent={accent}
|
|
isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly}
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
>
|
|
<StyledMenuItemLeftContent>
|
|
<MenuItemLeftContent LeftIcon={LeftIcon ?? undefined} text={text} />
|
|
</StyledMenuItemLeftContent>
|
|
<div className="hoverable-buttons">
|
|
{showIconButtons && (
|
|
<LightIconButtonGroup iconButtons={iconButtons} size="small" />
|
|
)}
|
|
</div>
|
|
</StyledHoverableMenuItemBase>
|
|
);
|
|
};
|