diff --git a/docs/api.md b/docs/api.md index 110a84d0..bad77188 100644 --- a/docs/api.md +++ b/docs/api.md @@ -47,8 +47,11 @@ A Simple Component for menu items. | onClick | Function | ✓ | | The function to be called on click of item. 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. | | data | Object | | `{}` | The extra data (if required) to be passed to `onClick` event. | | disabled | Boolean | | `false` | If `true`, disables the click event and adds `.disabled` class. | -| preventClose | Boolean | | false | By default, the context menu is closed as soon as an item is clicked. Set this prop to control this behavior. | +| preventClose | Boolean | | `false` | By default, the context menu is closed as soon as an item is clicked. Set this prop to control this behavior. | | attributes | Object | | | The attributes will be passed directly passed to the root element of `MenuItem`. Use this to customize it like adding custom classes, 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. | +| 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 `MenuItem`. | +| onMouseLeave | 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 `MenuItem`. | ### `` @@ -56,9 +59,15 @@ A component for using submenus within the contextmenu. #### PropTypes -| Property | Type | Required? | Default | Description | -|------------|---------|-----------|---------|-----------------------------------------------------------------------------| -| title | String | ✓ | | The content to be displayed in parent menu. | -| disabled | Boolean | | `false` | If `true`, disables the menu from opening and adds `.disabled` class. | -| hoverDelay | Number | | `500` | The time (in ms) after which the menu is to be displayed when hovered upon. | -| classNames | String | | | Custom `className` applied to root element of the context-menu. | +| Property | Type | Required? | Default | Description | +|-------------|----------|-----------|---------|-----------------------------------------------------------------------------| +| title | String | ✓ | | The content to be displayed in parent menu. | +| disabled | Boolean | | `false` | If `true`, disables the menu from opening and adds `.disabled` class. | +| hoverDelay | Number | | `500` | The time (in ms) after which the menu is to be displayed when hovered upon. | +| classNames | String | | | Custom `className` applied to root element of the context-menu. | +| 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. | +| 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. | +| 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. | diff --git a/src/MenuItem.js b/src/MenuItem.js index 54f8739c..d63caba2 100644 --- a/src/MenuItem.js +++ b/src/MenuItem.js @@ -16,8 +16,8 @@ export default class MenuItem extends Component { preventClose: PropTypes.bool, onClick: PropTypes.func, selected: PropTypes.bool, - onMouseMove: PropTypes.func.isRequired, - onMouseLeave: PropTypes.func.isRequired + onMouseMove: PropTypes.func, + onMouseLeave: PropTypes.func }; static defaultProps = { @@ -28,7 +28,9 @@ export default class MenuItem extends Component { preventClose: false, onClick() { return null; }, children: null, - selected: false + selected: false, + onMouseMove: () => null, + onMouseLeave: () => null }; handleClick = (event) => { diff --git a/src/SubMenu.js b/src/SubMenu.js index 6a5d3608..e0878fd1 100644 --- a/src/SubMenu.js +++ b/src/SubMenu.js @@ -14,11 +14,11 @@ export default class SubMenu extends AbstractMenu { hoverDelay: PropTypes.number, rtl: PropTypes.bool, selected: PropTypes.bool, - onMouseMove: PropTypes.func.isRequired, - onMouseOut: PropTypes.func.isRequired, - forceOpen: PropTypes.bool.isRequired, - forceClose: PropTypes.func.isRequired, - parentKeyNavigationHandler: PropTypes.func.isRequired + onMouseMove: PropTypes.func, + onMouseOut: PropTypes.func, + forceOpen: PropTypes.bool, + forceClose: PropTypes.func, + parentKeyNavigationHandler: PropTypes.func }; static defaultProps = { @@ -26,7 +26,12 @@ export default class SubMenu extends AbstractMenu { hoverDelay: 500, className: '', rtl: false, - selected: false + selected: false, + onMouseMove: () => null, + onMouseOut: () => null, + forceOpen: false, + forceClose: () => null, + parentKeyNavigationHandler: () => null }; constructor(props) {