feat: Support custom rendering

Author: meet-student

docs/examples/items.tsx

@@ -13,6 +13,20 @@ export default () => (
         key: 'top',
         extra: '⌘B',
       },
+      {
+        key: 'ToOriginNode',
+        label: 'Navigation Two',
+        render: originNode => (
+          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+            {originNode}
+          </a>
+        ),
+      },
+      {
+        key: 'ToOriginNode',
+        label: 'SubMenu',
+        render: (_originNode, item) => <p>item: extra: {JSON.stringify(item)}</p>,
+      },
       {
         // MenuGroup
         type: 'group',

src/interface.ts

@@ -6,6 +6,7 @@ interface ItemSharedProps {
   ref?: React.Ref<HTMLLIElement | null>;
   style?: React.CSSProperties;
   className?: string;
+  render?: (originalNode: React.ReactNode, item: ItemType) => React.ReactNode;
 }
 
 export interface SubMenuType extends ItemSharedProps {

src/utils/nodeUtil.tsx

@@ -21,41 +21,47 @@ function convertItemsToNodes(
   return (list || [])
     .map((opt, index) => {
       if (opt && typeof opt === 'object') {
-        const { label, children, key, type, extra, ...restProps } = opt as any;
+        const { label, children, key, type, extra, render, ...restProps } = opt as any;
         const mergedKey = key ?? `tmp-${index}`;
 
-        // MenuItemGroup & SubMenuItem
+        let originNode: React.ReactNode = null;
+
+        // MenuItemGroup & SubMenu
         if (children || type === 'group') {
           if (type === 'group') {
-            // Group
-            return (
+            originNode = (
               <MergedMenuItemGroup key={mergedKey} {...restProps} title={label}>
                 {convertItemsToNodes(children, components, prefixCls)}
               </MergedMenuItemGroup>
             );
+          } else {
+            originNode = (
+              <MergedSubMenu key={mergedKey} {...restProps} title={label}>
+                {convertItemsToNodes(children, components, prefixCls)}
+              </MergedSubMenu>
+            );
           }
-
-          // Sub Menu
-          return (
-            <MergedSubMenu key={mergedKey} {...restProps} title={label}>
-              {convertItemsToNodes(children, components, prefixCls)}
-            </MergedSubMenu>
+        }
+        // Divider
+        else if (type === 'divider') {
+          originNode = <MergedDivider key={mergedKey} {...restProps} />;
+        }
+        // MenuItem
+        else {
+          originNode = (
+            <MergedMenuItem key={mergedKey} {...restProps} extra={extra}>
+              {label}
+              {(!!extra || extra === 0) && (
+                <span className={`${prefixCls}-item-extra`}>{extra}</span>
+              )}
+            </MergedMenuItem>
           );
         }
 
-        // MenuItem & Divider
-        if (type === 'divider') {
-          return <MergedDivider key={mergedKey} {...restProps} />;
+        if (typeof render === 'function') {
+          return render(originNode, opt);
         }
-
-        return (
-          <MergedMenuItem key={mergedKey} {...restProps} extra={extra}>
-            {label}
-            {(!!extra || extra === 0) && (
-              <span className={`${prefixCls}-item-extra`}>{extra}</span>
-            )}
-          </MergedMenuItem>
-        );
+        return originNode;
       }
 
       return null;

tests/MenuItem.spec.tsx

@@ -228,5 +228,37 @@ describe('MenuItem', () => {
 
       expect(container.querySelector('li')).toMatchSnapshot();
     });
+
+    it('should wrap originNode with custom render', () => {
+      const { container } = render(
+        <Menu
+          items={[
+            {
+              key: 'mail',
+              label: 'Navigation One',
+            },
+            {
+              key: 'app',
+              label: 'Navigation Two',
+              render: originNode => (
+                <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+                  {originNode}
+                </a>
+              ),
+            },
+            {
+              key: 'upload',
+              label: 'Upload File',
+              render: () => <div id="upload">extra</div>,
+            },
+          ]}
+        />,
+      );
+
+      const link = container.querySelector('a');
+      expect(link).toHaveAttribute('href', 'https://ant.design');
+
+      expect(container.querySelector('#upload')).toHaveTextContent('extra');
+    });
   });
 });