Permalink
Browse files

Implement core context menu handling logic

  • Loading branch information...
markerikson committed Jul 16, 2017
1 parent 18de585 commit 4fc3f4d88c03a22c4b817b71f97935ea324a1d22
@@ -0,0 +1,42 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import AbsolutePosition from "common/components/AbsolutePosition";
import {hideContextMenu} from "./contextMenuActions";
const actions = {hideContextMenu};
export class ContextMenu extends Component {
componentDidMount() {
document.addEventListener('click', this.handleClickOutside, true);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside, true);
}
handleClickOutside = (e) => {
if (!this.node || !this.node.contains(e.target) ) {
this.props.hideContextMenu();
}
}
render() {
const {location} = this.props;
return (
<AbsolutePosition
left={location.x + 2}
top={location.y}
className="contextMenu"
nodeRef={node => this.node = node}
>
{this.props.children}
</AbsolutePosition>
)
}
}
export default connect(null, actions)(ContextMenu);
@@ -0,0 +1,46 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import Portal from 'react-portal';
import ContextMenu from "./ContextMenu";
import {selectContextMenu} from "./contextMenuSelectors";
const menuTypes = {
};
export function contextMenuManagerMapState(state) {
return {
contextMenu : selectContextMenu(state)
};
}
export class ContextMenuManager extends Component {
render() {
const {contextMenu} = this.props;
const {show, location, type, menuArgs = {}} = contextMenu;
let menu = null;
if(show) {
let MenuComponent = menuTypes[type];
if(MenuComponent) {
menu = (
<Portal isOpened={true}>
<ContextMenu location={location}>
<MenuComponent {...menuArgs} />
</ContextMenu>
</Portal>
)
}
}
return menu;
}
}
export default connect(contextMenuManagerMapState)(ContextMenuManager);
@@ -0,0 +1,22 @@
import {CONTEXT_MENU_HIDE, CONTEXT_MENU_SHOW} from "./contextMenuConstants";
export function showContextMenu(x, y, type, menuArgs) {
return {
type : CONTEXT_MENU_SHOW,
payload : {
location : {
x,
y
},
type,
menuArgs
}
}
}
export function hideContextMenu() {
return {
type : CONTEXT_MENU_HIDE
}
}
@@ -0,0 +1,2 @@
export const CONTEXT_MENU_SHOW = "CONTEXT_MENU_SHOW";
export const CONTEXT_MENU_HIDE = "CONTEXT_MENU_HIDE";
@@ -0,0 +1,36 @@
import {createReducer} from "common/utils/reducerUtils";
import {
CONTEXT_MENU_SHOW,
CONTEXT_MENU_HIDE,
} from "./contextMenuConstants";
const contextMenuInitialState = {
show : false,
location : {
x : null,
y : null,
},
type : null,
menuArgs : undefined,
}
function showContextMenu(state, payload) {
return {
...state,
show : true,
...payload
};
}
function hideContextMenu(state, payload) {
return {
...contextMenuInitialState
}
};
export default createReducer(contextMenuInitialState, {
[CONTEXT_MENU_SHOW] : showContextMenu,
[CONTEXT_MENU_HIDE] : hideContextMenu
});
@@ -0,0 +1 @@
export const selectContextMenu = state => state.contextMenu;

0 comments on commit 4fc3f4d

Please sign in to comment.