inherit props

src/MenuItem.jsx

@@ -5,7 +5,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import classNames from 'classnames';
 import scrollIntoView from 'dom-scroll-into-view';
 import { connect } from 'mini-store';
-import { noop } from './util';
+import { noop, menuAllProps } from './util';
 
 /* eslint react/no-is-mounted:0 */
 
@@ -139,7 +139,7 @@ export class MenuItem extends React.Component {
   }
 
   render() {
-    const props = this.props;
+    const props = { ...this.props };
     const className = classNames(this.getPrefixCls(), props.className, {
       [this.getActiveClassName()]: !props.disabled && props.active,
       [this.getSelectedClassName()]: props.isSelected,
@@ -167,8 +167,10 @@ export class MenuItem extends React.Component {
     if (props.mode === 'inline') {
       style.paddingLeft = props.inlineIndent * props.level;
     }
+    menuAllProps.forEach(key => delete props[key]);
     return (
       <li
+        {...props}
         {...attrs}
         {...mouseEvent}
         style={style}

src/MenuItemGroup.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { menuAllProps } from './util';
 
 class MenuItemGroup extends React.Component {
   static propTypes = {
@@ -20,20 +21,22 @@ class MenuItemGroup extends React.Component {
   }
 
   render() {
-    const props = this.props;
+    const { ...props } = this.props;
     const { className = '', rootPrefixCls } = props;
     const titleClassName = `${rootPrefixCls}-item-group-title`;
     const listClassName = `${rootPrefixCls}-item-group-list`;
+    const { title, children } = props;
+    menuAllProps.forEach(key => delete props[key]);
     return (
-      <li className={`${className} ${rootPrefixCls}-item-group`}>
+      <li {...props} className={`${className} ${rootPrefixCls}-item-group`}>
         <div
           className={titleClassName}
-          title={typeof props.title === 'string' ? props.title : undefined}
+          title={typeof title === 'string' ? title : undefined}
         >
-          {props.title}
+          {title}
         </div>
         <ul className={listClassName}>
-          {React.Children.map(props.children, this.renderInnerMenuItem)}
+          {React.Children.map(children, this.renderInnerMenuItem)}
         </ul>
       </li>
     );

src/SubMenu.jsx

@@ -12,6 +12,7 @@ import {
   noop,
   loopMenuItemRecursively,
   getMenuIdFromSubMenuEventKey,
+  menuAllProps,
 } from './util';
 
 let guid = 0;
@@ -404,7 +405,7 @@ export class SubMenu extends React.Component {
   }
 
   render() {
-    const props = this.props;
+    const props = { ...this.props };
     const isOpen = props.isOpen;
     const prefixCls = this.getPrefixCls();
     const isInlineMode = props.mode === 'inline';
@@ -469,9 +470,16 @@ export class SubMenu extends React.Component {
       props.parentMenu.props.getPopupContainer : triggerNode => triggerNode.parentNode;
     const popupPlacement = popupPlacementMap[props.mode];
     const popupClassName = props.mode === 'inline' ? '' : props.popupClassName;
-
+    const {
+      disabled,
+      triggerSubMenuAction,
+      subMenuOpenDelay,
+      forceSubMenuRender,
+      subMenuCloseDelay,
+    } = props;
+    menuAllProps.forEach(key => delete props[key]);
     return (
-      <li {...mouseEvents} className={className} style={props.style}>
+      <li {...props} {...mouseEvents} className={className}>
         {isInlineMode && title}
         {isInlineMode && children}
         {!isInlineMode && (
@@ -483,11 +491,11 @@ export class SubMenu extends React.Component {
             popupPlacement={popupPlacement}
             popupVisible={isOpen}
             popup={children}
-            action={props.disabled ? [] : [props.triggerSubMenuAction]}
-            mouseEnterDelay={props.subMenuOpenDelay}
-            mouseLeaveDelay={props.subMenuCloseDelay}
+            action={disabled ? [] : [triggerSubMenuAction]}
+            mouseEnterDelay={subMenuOpenDelay}
+            mouseLeaveDelay={subMenuCloseDelay}
             onPopupVisibleChange={this.onPopupVisibleChange}
-            forceRender={props.forceSubMenuRender}
+            forceRender={forceSubMenuRender}
           >
             {title}
           </Trigger>

src/SubPopupMenu.js

@@ -4,7 +4,7 @@ import { connect } from 'mini-store';
 import KeyCode from 'rc-util/lib/KeyCode';
 import createChainedFunction from 'rc-util/lib/createChainedFunction';
 import classNames from 'classnames';
-import { getKeyFromChildrenIndex, loopMenuItem, noop } from './util';
+import { getKeyFromChildrenIndex, loopMenuItem, noop, menuAllProps } from './util';
 import DOMWrap from './DOMWrap';
 
 function allDisabled(arr) {
@@ -87,7 +87,7 @@ export class SubPopupMenu extends React.Component {
     level: PropTypes.number,
     mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']),
     triggerSubMenuAction: PropTypes.oneOf(['click', 'hover']),
-    inlineIndent: PropTypes.oneOfType(PropTypes.number, PropTypes.string),
+    inlineIndent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     manualRef: PropTypes.func,
   };
 
@@ -270,7 +270,10 @@ export class SubPopupMenu extends React.Component {
       eventKey: key,
       active: !childProps.disabled && isActive,
       multiple: props.multiple,
-      onClick: this.onClick,
+      onClick: (e) => {
+        (childProps.onClick || noop)(e);
+        this.onClick(e);
+      },
       onItemHover: this.onItemHover,
       openTransitionName: this.getOpenTransitionName(),
       openAnimation: props.openAnimation,
@@ -304,7 +307,7 @@ export class SubPopupMenu extends React.Component {
   };
 
   render() {
-    const props = this.props;
+    const { ...props } = this.props;
     this.instanceArray = [];
     const className = classNames(
       props.prefixCls,
@@ -323,19 +326,21 @@ export class SubPopupMenu extends React.Component {
       domProps.tabIndex = '0';
       domProps.onKeyDown = this.onKeyDown;
     }
+    const { prefixCls, eventKey, visible } = props;
+    menuAllProps.forEach(key => delete props[key]);
     return (
       // ESLint is not smart enough to know that the type of `children` was checked.
       /* eslint-disable */
       <DOMWrap
-        style={props.style}
+        {...props}
         tag="ul"
-        hiddenClassName={`${props.prefixCls}-hidden`}
-        visible={props.visible}
+        hiddenClassName={`${prefixCls}-hidden`}
+        visible={visible}
         {...domProps}
       >
         {React.Children.map(
           props.children,
-          (c, i) => this.renderMenuItem(c, i, props.eventKey || '0-menu-'),
+          (c, i) => this.renderMenuItem(c, i, eventKey || '0-menu-'),
         )}
       </DOMWrap>
       /*eslint-enable */

src/util.js

@@ -36,8 +36,8 @@ export function loopMenuItemRecursively(children, keys, ret) {
     if (c) {
       const construct = c.type;
       if (!construct
-            ||
-          !(construct.isSubMenu || construct.isMenuItem || construct.isMenuItemGroup)
+        ||
+        !(construct.isSubMenu || construct.isMenuItem || construct.isMenuItemGroup)
       ) {
         return;
       }
@@ -49,3 +49,48 @@ export function loopMenuItemRecursively(children, keys, ret) {
     }
   });
 }
+
+export const menuAllProps = [
+  'defaultSelectedKeys',
+  'selectedKeys',
+  'defaultOpenKeys',
+  'openKeys',
+  'mode',
+  'getPopupContainer',
+  'onSelect',
+  'onDeselect',
+  'onDestroy',
+  'openTransitionName',
+  'openAnimation',
+  'subMenuOpenDelay',
+  'subMenuCloseDelay',
+  'forceSubMenuRender',
+  'triggerSubMenuAction',
+  'level',
+  'selectable',
+  'multiple',
+  'onOpenChange',
+  'visible',
+  'focusable',
+  'defaultActiveFirst',
+  'prefixCls',
+  'inlineIndent',
+  'parentMenu',
+  'title',
+  'rootPrefixCls',
+  'eventKey',
+  'active',
+  'onItemHover',
+  'onTitleMouseEnter',
+  'onTitleMouseLeave',
+  'onTitleClick',
+  'isOpen',
+  'renderMenuItem',
+  'manualRef',
+  'subMenuKey',
+  'disabled',
+  'index',
+  'isSelected',
+  'store',
+  'activeKey',
+];

tests/MenuItem.spec.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
-import Menu, { MenuItem } from '../src';
+import Menu, { MenuItem, MenuItemGroup, SubMenu } from '../src';
 
 import { MenuItem as NakedMenuItem } from '../src/MenuItem';
 
@@ -81,4 +81,35 @@ describe('MenuItem', () => {
       expect(onMouseLeave).toHaveBeenCalledWith({ key, domEvent });
     });
   });
+
+  describe('rest props', () => {
+    it('can render all props to sub component', () => {
+      const onClick = jest.fn();
+      const restProps = {
+        onClick,
+        'data-whatever': 'whatever',
+        title: 'title',
+        className: 'className',
+        style: { fontSize: 20 },
+      };
+      const wrapper = mount(
+        <Menu mode="inline" activeKey="1">
+          <MenuItem key="1" {...restProps}>1</MenuItem>
+          <SubMenu {...restProps}>
+            <MenuItem key="2" {...restProps}>3</MenuItem>
+          </SubMenu>
+          <MenuItemGroup {...restProps}>
+            <MenuItem key="3" {...restProps}>4</MenuItem>
+          </MenuItemGroup>
+        </Menu>
+      );
+      expect(wrapper.render()).toMatchSnapshot();
+      wrapper.find('MenuItem').at(0).simulate('click');
+      expect(onClick).toHaveBeenCalledTimes(1);
+      wrapper.find('SubMenu').at(0).simulate('click');
+      expect(onClick).toHaveBeenCalledTimes(2);
+      wrapper.find('MenuItemGroup').at(0).simulate('click');
+      expect(onClick).toHaveBeenCalledTimes(3);
+    });
+  });
 });

tests/__snapshots__/MenuItem.spec.js.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuItem rest props can render all props to sub component 1`] = `
+<ul
+  aria-activedescendant=""
+  class="rc-menu  rc-menu-root rc-menu-inline"
+  role="menu"
+  tabindex="0"
+>
+  <li
+    aria-selected="false"
+    class="rc-menu-item className rc-menu-item-active"
+    data-whatever="whatever"
+    role="menuitem"
+    style="font-size: 20px; padding-left: 24px;"
+    title="title"
+  >
+    1
+  </li>
+  <li
+    class="rc-menu-submenu rc-menu-submenu-inline className"
+    data-whatever="whatever"
+    style="font-size: 20px;"
+  >
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-owns="item_1$Menu"
+      class="rc-menu-submenu-title"
+      style="padding-left: 24px;"
+      title="title"
+    >
+      title
+      <i
+        class="rc-menu-submenu-arrow"
+      />
+    </div>
+    <div />
+  </li>
+  <li
+    class="className rc-menu-item-group"
+    data-whatever="whatever"
+    style="font-size: 20px;"
+  >
+    <div
+      class="rc-menu-item-group-title"
+      title="title"
+    >
+      title
+    </div>
+    <ul
+      class="rc-menu-item-group-list"
+    >
+      <li
+        aria-selected="false"
+        class="rc-menu-item className"
+        data-whatever="whatever"
+        role="menuitem"
+        style="font-size: 20px; padding-left: 24px;"
+        title="title"
+      >
+        4
+      </li>
+    </ul>
+  </li>
+</ul>
+`;