63 lines
1.7 KiB
JavaScript
63 lines
1.7 KiB
JavaScript
import { Icon } from 'UI';
|
|
import styles from './itemMenu.css';
|
|
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
|
|
|
|
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 } = this.props;
|
|
const { displayed } = this.state;
|
|
|
|
return (
|
|
<div className={ styles.wrapper }>
|
|
<OutsideClickDetectingDiv
|
|
onClickOutside={ this.closeMenu }
|
|
>
|
|
<div
|
|
ref={ (ref) => { this.menuBtnRef = ref; } }
|
|
className="w-10 h-10 cursor-pointer bg-white rounded-full flex items-center justify-center hover:bg-gray-lightest"
|
|
onClick={ this.toggleMenu }
|
|
role="button"
|
|
>
|
|
<Icon name="ellipsis-v" size="16" />
|
|
</div>
|
|
</OutsideClickDetectingDiv>
|
|
<div
|
|
className={ styles.menu }
|
|
data-displayed={ displayed }
|
|
>
|
|
{ items.filter(({ hidden }) => !hidden).map(({ onClick, text, icon }) => (
|
|
<div
|
|
key={ text }
|
|
className={ styles.menuItem }
|
|
onClick={ this.onClick(onClick) }
|
|
role="menuitem"
|
|
tabIndex="-1"
|
|
>
|
|
{ icon && (
|
|
<div className={ styles.iconWrapper }>
|
|
<Icon name={ icon } size="13" color="gray-dark" />
|
|
</div>
|
|
)}
|
|
<div>{ text }</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|