133 lines
2.9 KiB
TypeScript
133 lines
2.9 KiB
TypeScript
import type { FC } from '../../lib/teact/teact';
|
|
import React, { useCallback } from '../../lib/teact/teact';
|
|
|
|
import { IS_TEST } from '../../config';
|
|
import buildClassName from '../../util/buildClassName';
|
|
import useLang from '../../hooks/useLang';
|
|
import useAppLayout from '../../hooks/useAppLayout';
|
|
|
|
import './MenuItem.scss';
|
|
|
|
export type MenuItemProps = {
|
|
icon?: string;
|
|
isCharIcon?: boolean;
|
|
customIcon?: React.ReactNode;
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
onClick?: (e: React.SyntheticEvent<HTMLDivElement | HTMLAnchorElement>, arg?: number) => void;
|
|
clickArg?: number;
|
|
onContextMenu?: (e: React.UIEvent) => void;
|
|
href?: string;
|
|
download?: string;
|
|
disabled?: boolean;
|
|
destructive?: boolean;
|
|
ariaLabel?: string;
|
|
withWrap?: boolean;
|
|
};
|
|
|
|
const MenuItem: FC<MenuItemProps> = (props) => {
|
|
const {
|
|
icon,
|
|
isCharIcon,
|
|
customIcon,
|
|
className,
|
|
children,
|
|
onClick,
|
|
href,
|
|
download,
|
|
disabled,
|
|
destructive,
|
|
ariaLabel,
|
|
withWrap,
|
|
onContextMenu,
|
|
clickArg,
|
|
} = props;
|
|
|
|
const lang = useLang();
|
|
const { isTouchScreen } = useAppLayout();
|
|
const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
|
if (disabled || !onClick) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
return;
|
|
}
|
|
|
|
onClick(e, clickArg);
|
|
}, [clickArg, disabled, onClick]);
|
|
|
|
const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
|
|
if (e.keyCode !== 13 && e.keyCode !== 32) {
|
|
return;
|
|
}
|
|
|
|
if (disabled || !onClick) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
return;
|
|
}
|
|
|
|
onClick(e, clickArg);
|
|
}, [clickArg, disabled, onClick]);
|
|
|
|
const fullClassName = buildClassName(
|
|
'MenuItem',
|
|
className,
|
|
disabled && 'disabled',
|
|
destructive && 'destructive',
|
|
!isTouchScreen && 'compact',
|
|
withWrap && 'wrap',
|
|
);
|
|
|
|
const content = (
|
|
<>
|
|
{!customIcon && icon && (
|
|
<i
|
|
className={isCharIcon ? 'icon icon-char' : `icon icon-${icon}`}
|
|
data-char={isCharIcon ? icon : undefined}
|
|
/>
|
|
)}
|
|
{customIcon}
|
|
{children}
|
|
</>
|
|
);
|
|
|
|
if (href) {
|
|
return (
|
|
<a
|
|
tabIndex={0}
|
|
className={fullClassName}
|
|
href={href}
|
|
download={download}
|
|
aria-label={ariaLabel}
|
|
title={ariaLabel}
|
|
target={href.startsWith(window.location.origin) || IS_TEST ? '_self' : '_blank'}
|
|
rel="noopener noreferrer"
|
|
dir={lang.isRtl ? 'rtl' : undefined}
|
|
onClick={onClick}
|
|
>
|
|
{content}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
role="menuitem"
|
|
tabIndex={0}
|
|
className={fullClassName}
|
|
onClick={handleClick}
|
|
onKeyDown={handleKeyDown}
|
|
onContextMenu={onContextMenu}
|
|
aria-label={ariaLabel}
|
|
title={ariaLabel}
|
|
dir={lang.isRtl ? 'rtl' : undefined}
|
|
>
|
|
{content}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MenuItem;
|