65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { Button } from 'UI';
|
|
import styles from './menu.module.css';
|
|
import cn from 'classnames';
|
|
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
|
|
|
|
interface MenuItem {
|
|
key: number;
|
|
component?: React.ReactElement;
|
|
}
|
|
|
|
interface Props {
|
|
items: MenuItem[];
|
|
}
|
|
|
|
export default class ItemMenu extends React.PureComponent<Props> {
|
|
state = {
|
|
displayed: false,
|
|
};
|
|
|
|
handleEsc = (e: KeyboardEvent) => e.key === 'Escape' && this.state.displayed && this.toggleMenu();
|
|
|
|
componentDidMount() {
|
|
document.addEventListener('keydown', this.handleEsc, false);
|
|
}
|
|
componentWillUnmount() {
|
|
document.removeEventListener('keydown', this.handleEsc, false);
|
|
}
|
|
|
|
toggleMenu = () => {
|
|
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}>
|
|
<Button variant="text" icon="ellipsis-v" onClick={this.toggleMenu}>
|
|
More
|
|
</Button>
|
|
<div className={cn(styles.menu, styles.menuDim)} data-displayed={displayed}>
|
|
{items.map((item) =>
|
|
item.component ? (
|
|
<div
|
|
key={item.key}
|
|
role="menuitem"
|
|
className="hover:bg-gray-light-shade cursor-pointer flex items-center w-full"
|
|
>
|
|
{item.component}
|
|
</div>
|
|
) : null
|
|
)}
|
|
</div>
|
|
</OutsideClickDetectingDiv>
|
|
</div>
|
|
);
|
|
}
|
|
}
|