81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { Icon, Tooltip } from 'UI';
|
|
import cn from 'classnames';
|
|
import stl from './sideMenuItem.module.css';
|
|
import { IconNames } from 'UI/SVG';
|
|
|
|
type Props = {
|
|
title: string;
|
|
iconName?: IconNames;
|
|
iconBg?: boolean;
|
|
iconColor?: string;
|
|
iconSize?: number;
|
|
className?: string;
|
|
active?: boolean;
|
|
disabled?: boolean;
|
|
tooltipTitle?: string;
|
|
onClick?: () => void;
|
|
deleteHandler?: () => void;
|
|
leading?: React.ReactNode;
|
|
id?: string;
|
|
};
|
|
|
|
function SideMenuItem({
|
|
iconBg = false,
|
|
iconColor = 'gray-dark',
|
|
iconSize = 18,
|
|
className = '',
|
|
iconName,
|
|
title,
|
|
active = false,
|
|
disabled = false,
|
|
tooltipTitle = '',
|
|
onClick,
|
|
deleteHandler,
|
|
leading = null,
|
|
...props
|
|
}: Props) {
|
|
const handleClick = () => {
|
|
if (disabled) return;
|
|
if (onClick) onClick();
|
|
};
|
|
|
|
const handleDeleteClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (deleteHandler) deleteHandler();
|
|
};
|
|
|
|
return (
|
|
<Tooltip disabled={!disabled} title={tooltipTitle} placement='top'>
|
|
<div
|
|
className={cn(
|
|
className,
|
|
stl.menuItem,
|
|
'flex items-center py-2 justify-between shrink-0 cursor-pointer',
|
|
{ [stl.active]: active, [stl.disabled]: disabled }
|
|
)}
|
|
onClick={handleClick}
|
|
{...props}
|
|
>
|
|
<div className={cn('flex items-center w-full', stl.iconLabel)}>
|
|
{iconName && (
|
|
<div className='flex items-center justify-center w-8 h-8 mr-2'>
|
|
{iconBg &&
|
|
<div className={cn('w-8 h-8 rounded-full relative opacity-20', iconBg)} style={{ opacity: 0.2 }} />}
|
|
<Icon name={iconName} size={iconSize} color={active ? 'teal' : iconColor} className='absolute' />
|
|
</div>
|
|
)}
|
|
<span className={cn(stl.title, 'capitalize-first')}>{title}</span>
|
|
</div>
|
|
{leading && leading}
|
|
{deleteHandler && (
|
|
<div onClick={handleDeleteClick} className={stl.actions}>
|
|
<Icon name='trash' size={14} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export default SideMenuItem;
|