feat: support extra option (#734)

Co-authored-by: afc163 <[email protected]>
Co-authored-by: iceweb1999 <[email protected]>

Author: 3 people

assets/index.less

@@ -99,6 +99,17 @@
       color: #777 !important;
     }
   }
+
+  &-item {
+    display: flex;
+    align-items: center;
+
+    .@{menuPrefixCls}-extra {
+      margin-left: auto;
+      font-size: 14px;
+    }
+  }
+
   &-item-divider {
     height: 1px;
     margin: 1px 0;

docs/examples/items.tsx

@@ -11,6 +11,7 @@ export default () => (
         // MenuItem
         label: 'Top Menu Item',
         key: 'top',
+        extra: '⌘B',
       },
       {
         // MenuGroup

src/Menu.tsx

@@ -248,8 +248,8 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
     measureChildList: React.ReactElement[],
   ] = React.useMemo(
     () => [
-      parseItems(children, items, EMPTY_LIST, _internalComponents),
-      parseItems(children, items, EMPTY_LIST, {}),
+      parseItems(children, items, EMPTY_LIST, _internalComponents, prefixCls),
+      parseItems(children, items, EMPTY_LIST, {}, prefixCls),
     ],
     [children, items, _internalComponents],
   );

src/interface.ts

@@ -49,6 +49,8 @@ export interface MenuItemType extends ItemSharedProps {
 
   itemIcon?: RenderIconType;
 
+  extra?: React.ReactNode;
+
   key: React.Key;
 
   // >>>>> Active

src/utils/nodeUtil.tsx

@@ -9,6 +9,7 @@ import { parseChildren } from './commonUtil';
 function convertItemsToNodes(
   list: ItemType[],
   components: Required<Components>,
+  prefixCls?: string,
 ) {
   const {
     item: MergedMenuItem,
@@ -20,7 +21,7 @@ function convertItemsToNodes(
   return (list || [])
     .map((opt, index) => {
       if (opt && typeof opt === 'object') {
-        const { label, children, key, type, ...restProps } = opt as any;
+        const { label, children, key, type, extra, ...restProps } = opt as any;
         const mergedKey = key ?? `tmp-${index}`;
 
         // MenuItemGroup & SubMenuItem
@@ -50,6 +51,9 @@ function convertItemsToNodes(
         return (
           <MergedMenuItem key={mergedKey} {...restProps}>
             {label}
+            {(!!extra || extra === 0) && (
+              <span className={`${prefixCls}-extra`}>{extra}</span>
+            )}
           </MergedMenuItem>
         );
       }
@@ -64,6 +68,7 @@ export function parseItems(
   items: ItemType[] | undefined,
   keyPath: string[],
   components: Components,
+  prefixCls?: string,
 ) {
   let childNodes = children;
 
@@ -76,7 +81,7 @@ export function parseItems(
   };
 
   if (items) {
-    childNodes = convertItemsToNodes(items, mergedComponents);
+    childNodes = convertItemsToNodes(items, mergedComponents, prefixCls);
   }
 
   return parseChildren(childNodes, keyPath);

tests/MenuItem.spec.tsx

@@ -190,5 +190,21 @@ describe('MenuItem', () => {
 
       expect(container.querySelector('li')).toMatchSnapshot();
     });
+
+    it('should set extra to option', () => {
+      const { container } = render(
+        <Menu
+          items={[
+            {
+              label: 'Top Menu Item',
+              key: 'top',
+              extra: '⌘B',
+            },
+          ]}
+        />,
+      );
+
+      expect(container.querySelector('li')).toMatchSnapshot();
+    });
   });
 });

tests/__snapshots__/MenuItem.spec.tsx.snap

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`MenuItem overwrite default role should set extra to option 1`] = `
+<li
+  class="rc-menu-item"
+  data-menu-id="rc-menu-uuid-test-top"
+  role="menuitem"
+  tabindex="-1"
+>
+  Top Menu Item
+  <span
+    class="rc-menu-extra"
+  >
+    ⌘B
+  </span>
+</li>
+`;
+
 exports[`MenuItem overwrite default role should set role to listitem 1`] = `
 <li
   class="rc-menu-item"