Changes on submenu onclick behavior (#282)

* SubMenu click close the context menu

* Updated .d.ts file to add onClick for SubMenu

* Updated the API doc to reflect changes on SubMenu

* Fixed the import group

Author: loic-martinez-freelance

docs/api.md

@@ -71,8 +71,10 @@ A component for using submenus within the contextmenu.
 | className   | String   |           |         | Custom `className` applied to root element of the context-menu.             |
 | attributes  | Object   |           |         | The attributes will be passed directly passed to the root element of `SubMenu`. Use this to customize it like adding custom classes (`className`, `disabledClassName`, `visibleClassName`, `selectedClassName` and `listClassName`), etc.    |
 | selected    | boolean  |           | `false` | **Internal Prop**: will be set from the surrounded context `ContextMenu` or `SubMenu`. If set to `true` the css class `react-contextmenu-item--selected` will be added to associated element.           |
+| onClick      | Function |          |         | The function to be called on click of `SubMenu`. The function will receive three parameters. The first is `event` object. The second is the merged data passed using `props.data` and collect from `ContextMenuTrigger`. The third is the element on which right-click occured. |
 | onMouseMove | Function |           |         | **Internal Prop**: will be directly passed to associated element, so the surrounded context `ContextMenu` or `SubMenu` can handle the interactions to pass the correct `selected` state. Also the surrounded context can store the current selected `SubMenu` entry.    |
 | onMouseOut  | Function |           |         | **Internal Prop**: will be directly passed to associated element, so the surrounded context `ContextMenu` or `SubMenu` can handle the interactions to pass the correct `selected` state. Also the surrounded context can store the current selected `SubMenu` entry.    |
+| preventCloseOnClick | Boolean  |           | `false` | Prevent the context-menu to close when clicking on this `SubMenu`. |
 | forceOpen   | boolean  |           | `false` | **Internal Prop**: if the user hits enter or the right arrow key on a selected `SubMenu` entry, the surrounded context will pass `true` to this flag. The `SubMenu` stays open until this flag is `false`.    |
 | forceClose  | Function |           |         | **Internal Prop**: if the user hits the escape key during an open `SubMenu`, this function will be called to indicate the surrounding context to reset the `forceOpen` flag.    |
 | parentKeyNavigationHandler | Function |           |         | **Internal Prop**: the `keydown` handler from the surrounding context will be passed to every open `SubMenu`. Then the `Submenu` will unregister the referenced handler and use it's own for key control. When the `SubMenu` hides again the original handler will be restored.    |

src/SubMenu.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import assign from 'object-assign';
 
+import { hideMenu } from './actions';
 import AbstractMenu from './AbstractMenu';
 import { callIfExists, cssClasses, hasOwnProp, store } from './helpers';
 import listener from './globalEventListener';
@@ -47,7 +48,7 @@ export default class SubMenu extends AbstractMenu {
     }
 
     componentDidMount() {
-        this.listenId = listener.register(() => {}, this.hideMenu);
+        this.listenId = listener.register(() => {}, this.hideSubMenu);
     }
 
     getSubMenuType() { // eslint-disable-line class-methods-use-this
@@ -151,7 +152,7 @@ export default class SubMenu extends AbstractMenu {
         return position;
     }
 
-    hideMenu = (e) => {
+    hideSubMenu = (e) => {
         // avoid closing submenus of a different menu tree
         if (e.detail && e.detail.id && this.menu && e.detail.id !== this.menu.id) {
             return;
@@ -175,6 +176,10 @@ export default class SubMenu extends AbstractMenu {
             assign({}, this.props.data, store.data),
             store.target
         );
+
+        if (!this.props.onClick || this.props.preventCloseOnClick) return;
+
+        hideMenu();
     }
 
     handleMouseEnter = () => {

src/index.d.ts

@@ -36,6 +36,8 @@ declare module "react-contextmenu" {
         disabled?: boolean,
         hoverDelay?: number,
         rtl?: boolean,
+        preventCloseOnClick?: boolean,
+        onClick?: {(event: React.TouchEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>, data: Object, target: HTMLElement): void} | Function,
     }
 
     module ReactContextmenu {