diff --git a/assets/index.less b/assets/index.less index b571d3c1..2f433814 100644 --- 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 index d50f70de..a0044731 100644 --- 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 index 41ecec5f..edad0c5b 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -248,8 +248,8 @@ const Menu = React.forwardRef((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 index 59419342..f47873d1 100644 --- 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 index 21079fc5..4be4d599 100644 --- a/src/utils/nodeUtil.tsx +++ b/src/utils/nodeUtil.tsx @@ -9,6 +9,7 @@ import { parseChildren } from './commonUtil'; function convertItemsToNodes( list: ItemType[], components: Required, + 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 ( {label} + {(!!extra || extra === 0) && ( + {extra} + )} ); } @@ -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 index 702aa512..c028f003 100644 --- 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( + , + ); + + expect(container.querySelector('li')).toMatchSnapshot(); + }); }); }); diff --git a/tests/__snapshots__/MenuItem.spec.tsx.snap b/tests/__snapshots__/MenuItem.spec.tsx.snap index b015c04c..5b876969 100644 --- 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`] = ` + +`; + exports[`MenuItem overwrite default role should set role to listitem 1`] = `