Skip to content
This repository has been archived by the owner on Sep 1, 2020. It is now read-only.

Commit

Permalink
Merge pull request #113 from codeart1st/master
Browse files Browse the repository at this point in the history 
Key control fixes
  • Loading branch information
@vkbansal
vkbansal authored May 20, 2017
2 parents ae387e7 + 9a0eb89 commit 9243b9c
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 16 deletions.
23 changes: 16 additions & 7 deletions docs/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,18 +47,27 @@ 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`. |

### `<SubMenu />`

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. |
8 changes: 5 additions & 3 deletions src/MenuItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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) => {
Expand Down
17 changes: 11 additions & 6 deletions src/SubMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,24 @@ 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 = {
disabled: false,
hoverDelay: 500,
className: '',
rtl: false,
selected: false
selected: false,
onMouseMove: () => null,
onMouseOut: () => null,
forceOpen: false,
forceClose: () => null,
parentKeyNavigationHandler: () => null
};

constructor(props) {
Expand Down

0 comments on commit 9243b9c

Please sign in to comment.