76 lines
2.4 KiB
JavaScript
76 lines
2.4 KiB
JavaScript
import { Icon } from 'UI';
|
|
import styles from './itemMenu.css';
|
|
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
|
|
import cn from 'classnames';
|
|
import { Tooltip } from 'react-tippy';
|
|
export default class ItemMenu extends React.PureComponent {
|
|
state = {
|
|
displayed: false,
|
|
};
|
|
|
|
onClick = callback => (e) => {
|
|
e.stopPropagation();
|
|
callback(e);
|
|
}
|
|
|
|
toggleMenu = (e) => {
|
|
this.setState({ displayed: !this.state.displayed });
|
|
}
|
|
|
|
closeMenu = () => this.setState({ displayed: false })
|
|
|
|
render() {
|
|
const { items, label = "" } = this.props;
|
|
const { displayed } = this.state;
|
|
|
|
return (
|
|
<div className={ styles.wrapper }>
|
|
<OutsideClickDetectingDiv
|
|
onClickOutside={ this.closeMenu }
|
|
>
|
|
<div onClick={ this.toggleMenu } className="flex items-center cursor-pointer">
|
|
{label && <span className="mr-1 color-gray-medium ">{label}</span>}
|
|
<div
|
|
ref={ (ref) => { this.menuBtnRef = ref; } }
|
|
className={cn("w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-light", { 'bg-gray-light' : displayed })}
|
|
role="button"
|
|
>
|
|
<Icon name="ellipsis-v" size="16" />
|
|
</div>
|
|
</div>
|
|
</OutsideClickDetectingDiv>
|
|
<div
|
|
className={ styles.menu }
|
|
data-displayed={ displayed }
|
|
>
|
|
{ items.filter(({ hidden }) => !hidden).map(({ onClick, text, icon, disabled = false, disabledMessage = '' }) => (
|
|
<div
|
|
key={ text }
|
|
onClick={ !disabled ? this.onClick(onClick) : () => {} }
|
|
role="menuitem"
|
|
tabIndex="-1"
|
|
>
|
|
<Tooltip
|
|
delay={500}
|
|
arrow
|
|
title={ disabledMessage }
|
|
trigger="mouseenter"
|
|
position="left"
|
|
disabled={ !disabled }
|
|
>
|
|
<div className={cn(styles.menuItem, {'disabled' : disabled })}>
|
|
{ icon && (
|
|
<div className={ styles.iconWrapper }>
|
|
<Icon name={ icon } size="13" color="gray-dark" />
|
|
</div>
|
|
)}
|
|
<div>{ text }</div>
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|