chore: add _internalRenderSubMenuItem

Author: zombieJ

src/Menu.tsx

@@ -121,6 +121,14 @@ export interface MenuProps
     originNode: React.ReactElement,
     menuItemProps: any,
   ) => React.ReactElement;
+  /***
+   * @private Only used for `pro-layout`. Do not use in your prod directly
+   * and we do not promise any compatibility for this.
+   */
+  _internalRenderSubMenuItem?: (
+    originNode: React.ReactElement,
+    subMenuItemProps: any,
+  ) => React.ReactElement;
 }
 
 interface LegacyMenuProps extends MenuProps {
@@ -197,6 +205,7 @@ const Menu: React.FC<MenuProps> = props => {
 
     // Internal
     _internalRenderMenuItem,
+    _internalRenderSubMenuItem,
 
     ...restProps
   } = props as LegacyMenuProps;
@@ -444,8 +453,9 @@ const Menu: React.FC<MenuProps> = props => {
   const privateContext = React.useMemo(
     () => ({
       _internalRenderMenuItem,
+      _internalRenderSubMenuItem,
     }),
-    [_internalRenderMenuItem],
+    [_internalRenderMenuItem, _internalRenderSubMenuItem],
   );
 
   // ======================== Render ========================

src/SubMenu/index.tsx

@@ -26,6 +26,7 @@ import {
   useMeasure,
 } from '../context/PathContext';
 import { useMenuId } from '../context/IdContext';
+import PrivateContext from '../context/PrivateContext';
 
 export interface SubMenuProps {
   style?: React.CSSProperties;
@@ -127,6 +128,8 @@ const InternalSubMenu = (props: SubMenuProps) => {
     onActive,
   } = React.useContext(MenuContext);
 
+  const { _internalRenderSubMenuItem } = React.useContext(PrivateContext);
+
   const { isSubPathKey } = React.useContext(PathUserContext);
   const connectedPath = useFullPath();
 
@@ -168,25 +171,27 @@ const InternalSubMenu = (props: SubMenuProps) => {
     }
   };
 
-  const onInternalMouseEnter: React.MouseEventHandler<HTMLLIElement> =
-    domEvent => {
-      triggerChildrenActive(true);
+  const onInternalMouseEnter: React.MouseEventHandler<
+    HTMLLIElement
+  > = domEvent => {
+    triggerChildrenActive(true);
 
-      onMouseEnter?.({
-        key: eventKey,
-        domEvent,
-      });
-    };
+    onMouseEnter?.({
+      key: eventKey,
+      domEvent,
+    });
+  };
 
-  const onInternalMouseLeave: React.MouseEventHandler<HTMLLIElement> =
-    domEvent => {
-      triggerChildrenActive(false);
+  const onInternalMouseLeave: React.MouseEventHandler<
+    HTMLLIElement
+  > = domEvent => {
+    triggerChildrenActive(false);
 
-      onMouseLeave?.({
-        key: eventKey,
-        domEvent,
-      });
-    };
+    onMouseLeave?.({
+      key: eventKey,
+      domEvent,
+    });
+  };
 
   const mergedActive = React.useMemo(() => {
     if (active) {
@@ -317,6 +322,42 @@ const InternalSubMenu = (props: SubMenuProps) => {
     );
   }
 
+  // >>>>> List node
+  let listNode = (
+    <Overflow.Item
+      role="none"
+      {...restProps}
+      component="li"
+      style={style}
+      className={classNames(
+        subMenuPrefixCls,
+        `${subMenuPrefixCls}-${mode}`,
+        className,
+        {
+          [`${subMenuPrefixCls}-open`]: open,
+          [`${subMenuPrefixCls}-active`]: mergedActive,
+          [`${subMenuPrefixCls}-selected`]: childrenSelected,
+          [`${subMenuPrefixCls}-disabled`]: mergedDisabled,
+        },
+      )}
+      onMouseEnter={onInternalMouseEnter}
+      onMouseLeave={onInternalMouseLeave}
+    >
+      {titleNode}
+
+      {/* Inline mode */}
+      {!overflowDisabled && (
+        <InlineSubMenuList id={popupId} open={open} keyPath={connectedPath}>
+          {children}
+        </InlineSubMenuList>
+      )}
+    </Overflow.Item>
+  );
+
+  if (_internalRenderSubMenuItem) {
+    listNode = _internalRenderSubMenuItem(listNode, props);
+  }
+
   // >>>>> Render
   return (
     <MenuContextProvider
@@ -325,34 +366,7 @@ const InternalSubMenu = (props: SubMenuProps) => {
       itemIcon={mergedItemIcon}
       expandIcon={mergedExpandIcon}
     >
-      <Overflow.Item
-        role="none"
-        {...restProps}
-        component="li"
-        style={style}
-        className={classNames(
-          subMenuPrefixCls,
-          `${subMenuPrefixCls}-${mode}`,
-          className,
-          {
-            [`${subMenuPrefixCls}-open`]: open,
-            [`${subMenuPrefixCls}-active`]: mergedActive,
-            [`${subMenuPrefixCls}-selected`]: childrenSelected,
-            [`${subMenuPrefixCls}-disabled`]: mergedDisabled,
-          },
-        )}
-        onMouseEnter={onInternalMouseEnter}
-        onMouseLeave={onInternalMouseLeave}
-      >
-        {titleNode}
-
-        {/* Inline mode */}
-        {!overflowDisabled && (
-          <InlineSubMenuList id={popupId} open={open} keyPath={connectedPath}>
-            {children}
-          </InlineSubMenuList>
-        )}
-      </Overflow.Item>
+      {listNode}
     </MenuContextProvider>
   );
 };

src/context/PrivateContext.ts

@@ -3,6 +3,7 @@ import type { MenuProps } from '../Menu';
 
 export interface PrivateContextProps {
   _internalRenderMenuItem?: MenuProps['_internalRenderMenuItem'];
+  _internalRenderSubMenuItem?: MenuProps['_internalRenderSubMenuItem'];
 }
 
 const PrivateContext = React.createContext<PrivateContextProps>({});

tests/Private.spec.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import classnames from 'classnames';
-import Menu, { MenuItem } from '../src';
+import Menu, { MenuItem, SubMenu } from '../src';
 
 describe('Private Props', () => {
   it('_internalRenderMenuItem', () => {
@@ -18,7 +18,25 @@ describe('Private Props', () => {
       </Menu>,
     );
 
-    console.log(wrapper.html());
+    expect(wrapper.exists('.inject-cls')).toBeTruthy();
+  });
+
+  it('_internalRenderSubMenuItem', () => {
+    const wrapper = mount(
+      <Menu
+        mode="inline"
+        openKeys={['1']}
+        _internalRenderSubMenuItem={node =>
+          React.cloneElement(node, {
+            className: classnames(node.props.className, 'inject-cls'),
+          })
+        }
+      >
+        <SubMenu key="1" title="1">
+          <MenuItem key="1-1">1-1</MenuItem>
+        </SubMenu>
+      </Menu>,
+    );
 
     expect(wrapper.exists('.inject-cls')).toBeTruthy();
   });