import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {popupEnhancer} from "nexshop-web-popup";
import {CONTEXT_MENU} from "../../../constants/context-menu";
class ContextMenu extends Component {
constructor(props) {
super(props);
this.onItemClick = this.onItemClick.bind(this);
}
onItemClick(item) {
this.props[item.value]();
}
render() {
const {popupPosition, type} = this.props;
const items = CONTEXT_MENU[type === undefined ? 'folder' : type];
return (
<div className='context-menu-wrapper' style={{
left: popupPosition.x,
top: popupPosition.y,
}}>
<div className='context-menu'>
{
items.map((item, index) =>
<div key={`${index}-wrapper`}>
<div key={index}
className="context-menu-text"
onClick={() => this.onItemClick(item)}>
{item.text}
</div>
{
item.underline &&
<div key={`${index}__divider`}
className="context-menu-text__divider"/>
}
</div>
)
}
</div>
</div>
);
}
}
export default popupEnhancer(ContextMenu, 'context-menu');
ContextMenu.PropTypes = {
popupPosition: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
type: PropTypes.string,
onRenameClick: PropTypes.func,
onMoveToClick: PropTypes.func,
onCopyToClick: PropTypes.func,
}; |