feat: update code

Author: meet-student

docs/examples/items.tsx

@@ -6,7 +6,7 @@ import '../../assets/index.less';
 
 export default () => (
   <Menu
-    itemRender={(originNode, item) => {
+    itemRender={(originNode, { item }) => {
       if (item.type === 'item') {
         return (
           <a href="https://ant.design" target="_blank" rel="noopener noreferrer">

src/Divider.tsx

@@ -3,12 +3,15 @@ import classNames from 'classnames';
 import { MenuContext } from './context/MenuContext';
 import { useMeasure } from './context/PathContext';
 import type { MenuDividerType } from './interface';
+import { useFullPath } from './context/PathContext';
 
 export type DividerProps = Omit<MenuDividerType, 'type'>;
 
-export default function Divider({ className, style, itemRender }: DividerProps) {
-  const { prefixCls } = React.useContext(MenuContext);
+export default function Divider(props: DividerProps) {
+  const { className, style, itemRender: propItemRender } = props;
+  const { prefixCls, itemRender: contextItemRender } = React.useContext(MenuContext);
   const measure = useMeasure();
+  const connectedKeyPath = useFullPath();
 
   if (measure) {
     return null;
@@ -22,8 +25,13 @@ export default function Divider({ className, style, itemRender }: DividerProps)
     />
   );
 
-  if (typeof itemRender === 'function') {
-    return itemRender(renderNode);
+  const mergedItemRender = propItemRender || contextItemRender;
+
+  if (typeof mergedItemRender === 'function') {
+    return mergedItemRender(renderNode, {
+      item: { type: 'divider', ...props },
+      keys: connectedKeyPath,
+    });
   }
 
   return renderNode;

src/Menu.tsx

@@ -28,6 +28,7 @@ import type {
   SelectInfo,
   TriggerSubMenuAction,
   PopupRender,
+  ItemRenderType,
 } from './interface';
 import MenuItem from './MenuItem';
 import type { SemanticName } from './SubMenu';
@@ -159,7 +160,7 @@ export interface MenuProps
 
   popupRender?: PopupRender;
 
-  itemRender?: (originNode: React.ReactNode, item: NonNullable<ItemType>) => React.ReactNode;
+  itemRender?: ItemRenderType;
 }
 
 interface LegacyMenuProps extends MenuProps {
@@ -255,8 +256,8 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
     measureChildList: React.ReactElement[],
   ] = React.useMemo(
     () => [
-      parseItems(children, items, EMPTY_LIST, _internalComponents, prefixCls, itemRender),
-      parseItems(children, items, EMPTY_LIST, {}, prefixCls, itemRender),
+      parseItems(children, items, EMPTY_LIST, _internalComponents, prefixCls),
+      parseItems(children, items, EMPTY_LIST, {}, prefixCls),
     ],
     [children, items, _internalComponents, prefixCls],
   );
@@ -660,6 +661,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
           onItemClick={onInternalClick}
           onOpenChange={onInternalOpenChange}
           popupRender={popupRender}
+          itemRender={itemRender}
         >
           <PathUserContext.Provider value={pathUserContext}>{container}</PathUserContext.Provider>
 

src/MenuItem.tsx

@@ -12,7 +12,7 @@ import PrivateContext from './context/PrivateContext';
 import useActive from './hooks/useActive';
 import useDirectionStyle from './hooks/useDirectionStyle';
 import Icon from './Icon';
-import type { MenuInfo, MenuItemType } from './interface';
+import type { MenuInfo, MenuItemType, ItemType } from './interface';
 import { warnItemProp } from './utils/warnUtil';
 
 export interface MenuItemProps
@@ -89,7 +89,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
 
     onFocus,
 
-    itemRender,
+    itemRender: propItemRender,
 
     ...restProps
   } = props;
@@ -111,8 +111,12 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
 
     // Active
     onActive,
+
+    itemRender: contextItemRender,
   } = React.useContext(MenuContext);
 
+  const mergedItemRender = propItemRender || contextItemRender;
+
   const { _internalRenderMenuItem } = React.useContext(PrivateContext);
 
   const itemCls = `${prefixCls}-item`;
@@ -200,7 +204,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
     optionRoleProps['aria-selected'] = selected;
   }
 
-  let renderNode = (
+  let renderNode: React.ReactElement = (
     <LegacyMenuItem
       ref={legacyMenuItemRef}
       elementRef={mergedEleRef}
@@ -240,8 +244,14 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
     </LegacyMenuItem>
   );
 
-  if (typeof itemRender === 'function') {
-    renderNode = itemRender(renderNode);
+  if (typeof mergedItemRender === 'function') {
+    renderNode = mergedItemRender(renderNode, {
+      item: {
+        type: 'item',
+        ...props,
+      } as ItemType,
+      keys: connectedKeys,
+    }) as React.ReactElement;
   }
 
   if (_internalRenderMenuItem) {

src/MenuItemGroup.tsx

@@ -3,7 +3,7 @@ import omit from '@rc-component/util/lib/omit';
 import * as React from 'react';
 import { MenuContext } from './context/MenuContext';
 import { useFullPath, useMeasure } from './context/PathContext';
-import type { MenuItemGroupType } from './interface';
+import type { MenuItemGroupType, ItemType } from './interface';
 import { parseChildren } from './utils/commonUtil';
 
 export interface MenuItemGroupProps extends Omit<MenuItemGroupType, 'type' | 'children' | 'label'> {
@@ -52,18 +52,28 @@ const InternalMenuItemGroup = React.forwardRef<HTMLLIElement, MenuItemGroupProps
 });
 
 const MenuItemGroup = React.forwardRef<HTMLLIElement, MenuItemGroupProps>((props, ref) => {
-  const { eventKey, children, itemRender } = props;
+  const { eventKey, children, itemRender: propItemRender } = props;
   const connectedKeyPath = useFullPath(eventKey);
   const childList: React.ReactElement[] = parseChildren(children, connectedKeyPath);
+  const { itemRender: contextItemRender } = React.useContext(MenuContext);
 
   const measure = useMeasure();
   if (measure) {
     return childList as any as React.ReactElement;
   }
 
+  const mergedItemRender = propItemRender || contextItemRender;
   return (
     <InternalMenuItemGroup ref={ref} {...omit(props, ['warnKey'])}>
-      {typeof itemRender === 'function' ? itemRender(childList) : childList}
+      {typeof mergedItemRender === 'function'
+        ? mergedItemRender(childList, {
+            item: {
+              type: 'group',
+              ...props,
+            } as ItemType,
+            keys: connectedKeyPath,
+          })
+        : childList}
     </InternalMenuItemGroup>
   );
 });

src/SubMenu/index.tsx

@@ -4,7 +4,7 @@ import Overflow from 'rc-overflow';
 import warning from '@rc-component/util/lib/warning';
 import SubMenuList from './SubMenuList';
 import { parseChildren } from '../utils/commonUtil';
-import type { MenuInfo, SubMenuType, PopupRender } from '../interface';
+import type { MenuInfo, SubMenuType, PopupRender, ItemType } from '../interface';
 import MenuContextProvider, { MenuContext } from '../context/MenuContext';
 import useMemoCallback from '../hooks/useMemoCallback';
 import PopupTrigger from './PopupTrigger';
@@ -407,7 +407,16 @@ const SubMenu = React.forwardRef<HTMLLIElement, SubMenuProps>((props, ref) => {
 
   // ======================== Render ========================
 
-  const childListNode = typeof itemRender === 'function' ? itemRender(childList) : childList;
+  const childListNode =
+    typeof itemRender === 'function'
+      ? itemRender(childList, {
+          item: {
+            type: 'submenu',
+            ...props,
+          } as ItemType,
+          keys: connectedKeyPath,
+        })
+      : childList;
 
   if (measure) {
     renderNode = childListNode;

src/context/MenuContext.tsx

@@ -9,6 +9,7 @@ import type {
   RenderIconType,
   TriggerSubMenuAction,
   PopupRender,
+  ItemRenderType,
 } from '../interface';
 import { SubMenuProps } from '..';
 
@@ -53,6 +54,8 @@ export interface MenuContextProps {
 
   popupRender?: PopupRender;
 
+  itemRender?: ItemRenderType;
+
   // Icon
   itemIcon?: RenderIconType;
   expandIcon?: RenderIconType;

src/interface.ts

@@ -1,12 +1,15 @@
 import type * as React from 'react';
 import type { SubMenuProps } from './SubMenu';
+import type { MenuItemProps } from './MenuItem';
+import type { MenuItemGroupProps } from './MenuItemGroup';
+import type { DividerProps } from './Divider';
 
 // ========================= Options =========================
 interface ItemSharedProps {
   ref?: React.Ref<HTMLLIElement | null>;
   style?: React.CSSProperties;
   className?: string;
-  itemRender?: (originNode: React.ReactNode) => React.ReactNode;
+  itemRender?: ItemRenderType;
 }
 
 export interface SubMenuType extends ItemSharedProps {
@@ -141,3 +144,8 @@ export type PopupRender = (
   node: React.ReactElement,
   info: { item: SubMenuProps; keys: string[] },
 ) => React.ReactNode;
+
+export type ItemRenderType = (
+  node: React.ReactElement | React.ReactElement<any, string | React.JSXElementConstructor<any>>[],
+  info: { item: ItemType; keys: string[] },
+) => React.ReactNode | React.ReactElement;

src/utils/nodeUtil.tsx

@@ -10,7 +10,6 @@ function convertItemsToNodes(
   list: ItemType[],
   components: Required<Components>,
   prefixCls?: string,
-  itemRender?: (originNode: React.ReactNode, item: NonNullable<ItemType>) => React.ReactElement,
 ) {
   const {
     item: MergedMenuItem,
@@ -21,9 +20,6 @@ function convertItemsToNodes(
 
   return (list || [])
     .map((opt, index) => {
-      const renderNodeWrapper = node => {
-        return typeof itemRender === 'function' ? itemRender(node, opt as any) : node;
-      };
       if (opt && typeof opt === 'object') {
         const { label, children, key, type, extra, ...restProps } = opt as any;
         const mergedKey = key ?? `tmp-${index}`;
@@ -33,42 +29,27 @@ function convertItemsToNodes(
           if (type === 'group') {
             // Group
             return (
-              <MergedMenuItemGroup
-                key={mergedKey}
-                {...restProps}
-                itemRender={renderNodeWrapper}
-                title={label}
-              >
-                {convertItemsToNodes(children, components, prefixCls, itemRender)}
+              <MergedMenuItemGroup key={mergedKey} {...restProps} title={label}>
+                {convertItemsToNodes(children, components, prefixCls)}
               </MergedMenuItemGroup>
             );
           }
 
           // Sub Menu
           return (
-            <MergedSubMenu
-              key={mergedKey}
-              {...restProps}
-              itemRender={renderNodeWrapper}
-              title={label}
-            >
-              {convertItemsToNodes(children, components, prefixCls, itemRender)}
+            <MergedSubMenu key={mergedKey} {...restProps} title={label}>
+              {convertItemsToNodes(children, components, prefixCls)}
             </MergedSubMenu>
           );
         }
 
         // MenuItem & Divider
         if (type === 'divider') {
-          return <MergedDivider key={mergedKey} {...restProps} itemRender={renderNodeWrapper} />;
+          return <MergedDivider key={mergedKey} {...restProps} />;
         }
 
         return (
-          <MergedMenuItem
-            key={mergedKey}
-            {...restProps}
-            extra={extra}
-            itemRender={renderNodeWrapper}
-          >
+          <MergedMenuItem key={mergedKey} {...restProps} extra={extra}>
             {label}
             {(!!extra || extra === 0) && <span className={`${prefixCls}-item-extra`}>{extra}</span>}
           </MergedMenuItem>
@@ -86,7 +67,6 @@ export function parseItems(
   keyPath: string[],
   components: Components,
   prefixCls?: string,
-  itemRender?: (originNode: React.ReactNode, item?: NonNullable<ItemType>) => React.ReactElement,
 ) {
   let childNodes = children;
 
@@ -99,7 +79,7 @@ export function parseItems(
   };
 
   if (items) {
-    childNodes = convertItemsToNodes(items, mergedComponents, prefixCls, itemRender);
+    childNodes = convertItemsToNodes(items, mergedComponents, prefixCls);
   }
 
   return parseChildren(childNodes, keyPath);

tests/MenuItem.spec.tsx

@@ -232,7 +232,7 @@ describe('MenuItem', () => {
     it('should wrap originNode with custom render', () => {
       const { container } = render(
         <Menu
-          itemRender={(originNode, item) => {
+          itemRender={(originNode, { item }) => {
             if (item.type === 'item') {
               return (
                 <a href="https://ant.design" target="_blank" rel="noopener noreferrer">