feat: support extra option (#734)

Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: iceweb1999 <1999iceweb@polyhedra.network>
react-component · Aug 14, 2024 · a05da80 · a05da80
1 parent d386b34
commit a05da80
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 4 deletions.
diff --git a/assets/index.less b/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;

diff --git a/docs/examples/items.tsx b/docs/examples/items.tsx
@@ -11,6 +11,7 @@ export default () => (
         // MenuItem
         label: 'Top Menu Item',
         key: 'top',
+        extra: '⌘B',
       },
       {
         // MenuGroup

diff --git a/src/Menu.tsx b/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],
   );

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

diff --git a/src/utils/nodeUtil.tsx b/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);

diff --git a/tests/MenuItem.spec.tsx b/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();
+    });
   });
 });
diff --git a/tests/__snapshots__/MenuItem.spec.tsx.snap b/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"