599 lines
14 KiB
JavaScript
599 lines
14 KiB
JavaScript
import React, { Component } from "react";
|
|
import PropTypes from "prop-types";
|
|
import DomHelpers from "../utils/domHelpers";
|
|
import ObjectUtils from "../utils/objectUtils";
|
|
import { classNames } from "../utils/classNames";
|
|
import { CSSTransition } from "react-transition-group";
|
|
import { ReactSVG } from "react-svg";
|
|
import Portal from "../portal";
|
|
import StyledContextMenu from "./styled-context-menu";
|
|
import ArrowIcon from "./svg/arrow.right.react.svg";
|
|
|
|
class ContextMenuSub extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
activeItem: null,
|
|
};
|
|
|
|
this.onEnter = this.onEnter.bind(this);
|
|
|
|
this.submenuRef = React.createRef();
|
|
}
|
|
|
|
onItemMouseEnter(e, item) {
|
|
if (item.disabled) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
|
|
this.setState({
|
|
activeItem: item,
|
|
});
|
|
}
|
|
|
|
onItemClick(e, item) {
|
|
if (item.disabled) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
|
|
if (!item.url) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
if (item.onClick) {
|
|
item.onClick({
|
|
originalEvent: e,
|
|
action: item.action,
|
|
});
|
|
}
|
|
|
|
if (!item.items) {
|
|
this.props.onLeafClick(e);
|
|
}
|
|
}
|
|
|
|
position() {
|
|
const parentItem = this.submenuRef.current.parentElement;
|
|
const containerOffset = DomHelpers.getOffset(
|
|
this.submenuRef.current.parentElement
|
|
);
|
|
const viewport = DomHelpers.getViewport();
|
|
const sublistWidth = this.submenuRef.current.offsetParent
|
|
? this.submenuRef.current.offsetWidth
|
|
: DomHelpers.getHiddenElementOuterWidth(this.submenuRef.current);
|
|
const itemOuterWidth = DomHelpers.getOuterWidth(parentItem.children[0]);
|
|
|
|
this.submenuRef.current.style.top = "0px";
|
|
|
|
if (
|
|
parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth >
|
|
viewport.width - DomHelpers.calculateScrollbarWidth()
|
|
) {
|
|
this.submenuRef.current.style.left = -1 * sublistWidth + "px";
|
|
} else {
|
|
this.submenuRef.current.style.left = itemOuterWidth + "px";
|
|
}
|
|
}
|
|
|
|
onEnter() {
|
|
this.position();
|
|
}
|
|
|
|
isActive() {
|
|
return this.props.root || !this.props.resetMenu;
|
|
}
|
|
|
|
static getDerivedStateFromProps(nextProps, prevState) {
|
|
if (nextProps.resetMenu === true) {
|
|
return {
|
|
activeItem: null,
|
|
};
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
if (this.isActive()) {
|
|
this.position();
|
|
}
|
|
}
|
|
|
|
renderSeparator(index) {
|
|
return (
|
|
<li
|
|
key={"separator_" + index}
|
|
className="p-menu-separator not-selectable"
|
|
role="separator"
|
|
></li>
|
|
);
|
|
}
|
|
|
|
renderSubmenu(item) {
|
|
if (item.items) {
|
|
return (
|
|
<ContextMenuSub
|
|
model={item.items}
|
|
resetMenu={item !== this.state.activeItem}
|
|
onLeafClick={this.props.onLeafClick}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
renderMenuitem(item, index) {
|
|
if (item.disabled) return; //TODO: Not render disabled items
|
|
const active = this.state.activeItem === item;
|
|
const className = classNames(
|
|
"p-menuitem",
|
|
{ "p-menuitem-active": active },
|
|
item.className
|
|
);
|
|
const linkClassName = classNames("p-menuitem-link", "not-selectable", {
|
|
"p-disabled": item.disabled,
|
|
});
|
|
const iconClassName = classNames("p-menuitem-icon", {
|
|
"p-disabled": item.disabled,
|
|
});
|
|
const submenuIconClassName = "p-submenu-icon";
|
|
const icon = item.icon && (
|
|
<ReactSVG
|
|
wrapper="span"
|
|
className={iconClassName}
|
|
src={item.icon}
|
|
></ReactSVG>
|
|
);
|
|
const label = item.label && (
|
|
<span className="p-menuitem-text not-selectable">{item.label}</span>
|
|
);
|
|
const submenuIcon = item.items && (
|
|
<ArrowIcon className={submenuIconClassName} />
|
|
);
|
|
const submenu = this.renderSubmenu(item);
|
|
const dataKeys = Object.fromEntries(
|
|
Object.entries(item).filter((el) => el[0].indexOf("data-") === 0)
|
|
);
|
|
let content = (
|
|
<a
|
|
href={item.url || "#"}
|
|
className={linkClassName}
|
|
target={item.target}
|
|
{...dataKeys}
|
|
onClick={(event) => this.onItemClick(event, item, index)}
|
|
role="menuitem"
|
|
>
|
|
{icon}
|
|
{label}
|
|
{submenuIcon}
|
|
</a>
|
|
);
|
|
|
|
if (item.template) {
|
|
const defaultContentOptions = {
|
|
onClick: (event) => this.onItemClick(event, item, index),
|
|
className: linkClassName,
|
|
labelClassName: "p-menuitem-text",
|
|
iconClassName,
|
|
submenuIconClassName,
|
|
element: content,
|
|
props: this.props,
|
|
active,
|
|
};
|
|
|
|
content = ObjectUtils.getJSXElement(
|
|
item.template,
|
|
item,
|
|
defaultContentOptions
|
|
);
|
|
}
|
|
|
|
return (
|
|
<li
|
|
key={item.label + "_" + index}
|
|
role="none"
|
|
className={className}
|
|
style={item.style}
|
|
onMouseEnter={(event) => this.onItemMouseEnter(event, item)}
|
|
>
|
|
{content}
|
|
{submenu}
|
|
</li>
|
|
);
|
|
}
|
|
|
|
renderItem(item, index) {
|
|
if (!item) return null;
|
|
if (item.isSeparator) return this.renderSeparator(index);
|
|
else return this.renderMenuitem(item, index);
|
|
}
|
|
|
|
renderMenu() {
|
|
if (this.props.model) {
|
|
return this.props.model.map((item, index) => {
|
|
return this.renderItem(item, index);
|
|
});
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
render() {
|
|
const className = classNames({ "p-submenu-list": !this.props.root });
|
|
const submenu = this.renderMenu();
|
|
const isActive = this.isActive();
|
|
|
|
return (
|
|
<CSSTransition
|
|
nodeRef={this.submenuRef}
|
|
classNames="p-contextmenusub"
|
|
in={isActive}
|
|
timeout={{ enter: 0, exit: 0 }}
|
|
unmountOnExit={true}
|
|
onEnter={this.onEnter}
|
|
>
|
|
<ul ref={this.submenuRef} className={`${className} not-selectable`}>
|
|
{submenu}
|
|
</ul>
|
|
</CSSTransition>
|
|
);
|
|
}
|
|
}
|
|
|
|
ContextMenuSub.propTypes = {
|
|
model: PropTypes.any,
|
|
root: PropTypes.bool,
|
|
className: PropTypes.string,
|
|
resetMenu: PropTypes.bool,
|
|
onLeafClick: PropTypes.func,
|
|
};
|
|
|
|
ContextMenuSub.defaultProps = {
|
|
model: null,
|
|
root: false,
|
|
className: null,
|
|
resetMenu: false,
|
|
onLeafClick: null,
|
|
};
|
|
|
|
class ContextMenu extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
visible: false,
|
|
reshow: false,
|
|
resetMenu: false,
|
|
};
|
|
|
|
this.onMenuClick = this.onMenuClick.bind(this);
|
|
this.onLeafClick = this.onLeafClick.bind(this);
|
|
this.onMenuMouseEnter = this.onMenuMouseEnter.bind(this);
|
|
this.onEnter = this.onEnter.bind(this);
|
|
this.onEntered = this.onEntered.bind(this);
|
|
this.onExit = this.onExit.bind(this);
|
|
this.onExited = this.onExited.bind(this);
|
|
|
|
this.menuRef = React.createRef();
|
|
}
|
|
|
|
onMenuClick() {
|
|
this.setState({
|
|
resetMenu: false,
|
|
});
|
|
}
|
|
|
|
onMenuMouseEnter() {
|
|
this.setState({
|
|
resetMenu: false,
|
|
});
|
|
}
|
|
|
|
show(e) {
|
|
if (!(e instanceof Event)) {
|
|
e.persist();
|
|
}
|
|
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
this.currentEvent = e;
|
|
|
|
if (this.state.visible) {
|
|
this.setState({ reshow: true });
|
|
} else {
|
|
this.setState({ visible: true }, () => {
|
|
if (this.props.onShow) {
|
|
this.props.onShow(this.currentEvent);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState) {
|
|
if (this.state.visible && prevState.reshow !== this.state.reshow) {
|
|
let event = this.currentEvent;
|
|
this.setState(
|
|
{
|
|
visible: false,
|
|
reshow: false,
|
|
rePosition: false,
|
|
resetMenu: true,
|
|
},
|
|
() => this.show(event)
|
|
);
|
|
}
|
|
}
|
|
|
|
hide(e) {
|
|
if (!(e instanceof Event)) {
|
|
e.persist();
|
|
}
|
|
|
|
this.currentEvent = e;
|
|
this.setState({ visible: false, reshow: false }, () => {
|
|
if (this.props.onHide) {
|
|
this.props.onHide(this.currentEvent);
|
|
}
|
|
});
|
|
}
|
|
|
|
onEnter() {
|
|
if (this.props.autoZIndex) {
|
|
this.menuRef.current.style.zIndex = String(
|
|
this.props.baseZIndex + DomHelpers.generateZIndex()
|
|
);
|
|
}
|
|
|
|
this.position(this.currentEvent);
|
|
}
|
|
|
|
onEntered() {
|
|
this.bindDocumentListeners();
|
|
}
|
|
|
|
onExit() {
|
|
this.currentEvent = null;
|
|
this.unbindDocumentListeners();
|
|
}
|
|
|
|
onExited() {
|
|
DomHelpers.revertZIndex();
|
|
}
|
|
|
|
position(event) {
|
|
if (event) {
|
|
let left = event.pageX + 1;
|
|
let top = event.pageY + 1;
|
|
let width = this.menuRef.current.offsetParent
|
|
? this.menuRef.current.offsetWidth
|
|
: DomHelpers.getHiddenElementOuterWidth(this.menuRef.current);
|
|
let height = this.menuRef.current.offsetParent
|
|
? this.menuRef.current.offsetHeight
|
|
: DomHelpers.getHiddenElementOuterHeight(this.menuRef.current);
|
|
let viewport = DomHelpers.getViewport();
|
|
|
|
//flip
|
|
if (left + width - document.body.scrollLeft > viewport.width) {
|
|
left -= width;
|
|
}
|
|
|
|
//flip
|
|
if (top + height - document.body.scrollTop > viewport.height) {
|
|
top -= height;
|
|
}
|
|
|
|
//fit
|
|
if (left < document.body.scrollLeft) {
|
|
left = document.body.scrollLeft;
|
|
}
|
|
|
|
//fit
|
|
if (top < document.body.scrollTop) {
|
|
top = document.body.scrollTop;
|
|
}
|
|
|
|
this.menuRef.current.style.left = left + "px";
|
|
this.menuRef.current.style.top = top + "px";
|
|
}
|
|
}
|
|
|
|
onLeafClick(e) {
|
|
this.setState({
|
|
resetMenu: true,
|
|
});
|
|
|
|
this.hide(e);
|
|
|
|
e.stopPropagation();
|
|
}
|
|
|
|
isOutsideClicked(e) {
|
|
return (
|
|
this.menuRef &&
|
|
this.menuRef.current &&
|
|
!(
|
|
this.menuRef.current.isSameNode(e.target) ||
|
|
this.menuRef.current.contains(e.target)
|
|
)
|
|
);
|
|
}
|
|
|
|
bindDocumentListeners() {
|
|
this.bindDocumentResizeListener();
|
|
this.bindDocumentClickListener();
|
|
}
|
|
|
|
unbindDocumentListeners() {
|
|
this.unbindDocumentResizeListener();
|
|
this.unbindDocumentClickListener();
|
|
}
|
|
|
|
bindDocumentClickListener() {
|
|
if (!this.documentClickListener) {
|
|
this.documentClickListener = (e) => {
|
|
if (this.isOutsideClicked(e)) {
|
|
//TODO: (&& e.button !== 2) restore after global usage
|
|
this.hide(e);
|
|
|
|
this.setState({
|
|
resetMenu: true,
|
|
});
|
|
}
|
|
};
|
|
|
|
document.addEventListener("click", this.documentClickListener);
|
|
document.addEventListener("mousedown", this.documentClickListener);
|
|
}
|
|
}
|
|
|
|
bindDocumentContextMenuListener() {
|
|
if (!this.documentContextMenuListener) {
|
|
this.documentContextMenuListener = (e) => {
|
|
this.show(e);
|
|
};
|
|
|
|
document.addEventListener(
|
|
"contextmenu",
|
|
this.documentContextMenuListener
|
|
);
|
|
}
|
|
}
|
|
|
|
bindDocumentResizeListener() {
|
|
if (!this.documentResizeListener) {
|
|
this.documentResizeListener = (e) => {
|
|
if (this.state.visible) {
|
|
this.hide(e);
|
|
}
|
|
};
|
|
|
|
window.addEventListener("resize", this.documentResizeListener);
|
|
}
|
|
}
|
|
|
|
unbindDocumentClickListener() {
|
|
if (this.documentClickListener) {
|
|
document.removeEventListener("click", this.documentClickListener);
|
|
document.removeEventListener("mousedown", this.documentClickListener);
|
|
this.documentClickListener = null;
|
|
}
|
|
}
|
|
|
|
unbindDocumentContextMenuListener() {
|
|
if (this.documentContextMenuListener) {
|
|
document.removeEventListener(
|
|
"contextmenu",
|
|
this.documentContextMenuListener
|
|
);
|
|
this.documentContextMenuListener = null;
|
|
}
|
|
}
|
|
|
|
unbindDocumentResizeListener() {
|
|
if (this.documentResizeListener) {
|
|
window.removeEventListener("resize", this.documentResizeListener);
|
|
this.documentResizeListener = null;
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (this.props.global) {
|
|
this.bindDocumentContextMenuListener();
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.unbindDocumentListeners();
|
|
this.unbindDocumentContextMenuListener();
|
|
|
|
DomHelpers.revertZIndex();
|
|
}
|
|
|
|
renderContextMenu() {
|
|
const className = classNames(
|
|
"p-contextmenu p-component",
|
|
this.props.className
|
|
);
|
|
|
|
return (
|
|
<StyledContextMenu>
|
|
<CSSTransition
|
|
nodeRef={this.menuRef}
|
|
classNames="p-contextmenu"
|
|
in={this.state.visible}
|
|
timeout={{ enter: 250, exit: 0 }}
|
|
unmountOnExit
|
|
onEnter={this.onEnter}
|
|
onEntered={this.onEntered}
|
|
onExit={this.onExit}
|
|
onExited={this.onExited}
|
|
>
|
|
<div
|
|
ref={this.menuRef}
|
|
id={this.props.id}
|
|
className={className}
|
|
style={this.props.style}
|
|
onClick={this.onMenuClick}
|
|
onMouseEnter={this.onMenuMouseEnter}
|
|
>
|
|
<ContextMenuSub
|
|
model={this.props.model}
|
|
root
|
|
resetMenu={this.state.resetMenu}
|
|
onLeafClick={this.onLeafClick}
|
|
/>
|
|
</div>
|
|
</CSSTransition>
|
|
</StyledContextMenu>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const element = this.renderContextMenu();
|
|
|
|
return <Portal element={element} appendTo={this.props.appendTo} />;
|
|
}
|
|
}
|
|
|
|
ContextMenu.propTypes = {
|
|
/** Unique identifier of the element */
|
|
id: PropTypes.string,
|
|
/** An array of menuitems */
|
|
model: PropTypes.array,
|
|
/** Inline style of the component */
|
|
style: PropTypes.object,
|
|
/** Style class of the component */
|
|
className: PropTypes.string,
|
|
/** Attaches the menu to document instead of a particular item */
|
|
global: PropTypes.bool,
|
|
/** Base zIndex value to use in layering */
|
|
autoZIndex: PropTypes.bool,
|
|
/** Whether to automatically manage layering */
|
|
baseZIndex: PropTypes.number,
|
|
/** DOM element instance where the menu should be mounted */
|
|
appendTo: PropTypes.any,
|
|
/** Callback to invoke when a popup menu is shown */
|
|
onShow: PropTypes.func,
|
|
/** Callback to invoke when a popup menu is hidden */
|
|
onHide: PropTypes.func,
|
|
};
|
|
|
|
ContextMenu.defaultProps = {
|
|
id: null,
|
|
model: null,
|
|
style: null,
|
|
className: null,
|
|
global: false,
|
|
autoZIndex: true,
|
|
baseZIndex: 0,
|
|
appendTo: null,
|
|
onShow: null,
|
|
onHide: null,
|
|
};
|
|
|
|
export default ContextMenu;
|