diff --git a/README.md b/README.md index 4004fcd0..16b5278f 100644 --- a/README.md +++ b/README.md @@ -300,6 +300,12 @@ ReactDOM.render( additional css class of root dom node + + popupStyle + CSSProperties + + additional css style of root dom node + title String/ReactElement diff --git a/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx index 05b6f9e3..e7ec45af 100644 --- a/src/SubMenu/PopupTrigger.tsx +++ b/src/SubMenu/PopupTrigger.tsx @@ -21,6 +21,7 @@ export interface PopupTriggerProps { visible: boolean; children: React.ReactElement; popup: React.ReactNode; + popupStyle?: React.CSSProperties; popupClassName?: string; popupOffset?: number[]; disabled: boolean; @@ -32,6 +33,7 @@ export default function PopupTrigger({ visible, children, popup, + popupStyle, popupClassName, popupOffset, disabled, @@ -108,6 +110,7 @@ export default function PopupTrigger({ popupPlacement={popupPlacement} popupVisible={innerVisible} popup={popup} + popupStyle={popupStyle} popupAlign={popupOffset && { offset: popupOffset }} action={disabled ? [] : [triggerSubMenuAction]} mouseEnterDelay={subMenuOpenDelay} diff --git a/src/SubMenu/index.tsx b/src/SubMenu/index.tsx index 231e6ac1..907b0496 100644 --- a/src/SubMenu/index.tsx +++ b/src/SubMenu/index.tsx @@ -62,6 +62,7 @@ const InternalSubMenu = (props: SubMenuProps) => { // Popup popupClassName, popupOffset, + popupStyle, // Events onClick, @@ -280,6 +281,7 @@ const InternalSubMenu = (props: SubMenuProps) => { visible={!internalPopupClose && open && mode !== 'inline'} popupClassName={popupClassName} popupOffset={popupOffset} + popupStyle={popupStyle} popup={ >>>> Popup popupClassName?: string; popupOffset?: number[]; + popupStyle?: React.CSSProperties; // >>>>> Events onClick?: MenuClickEventHandler; diff --git a/tests/SubMenu.spec.tsx b/tests/SubMenu.spec.tsx index 03463e7b..f33f2426 100644 --- a/tests/SubMenu.spec.tsx +++ b/tests/SubMenu.spec.tsx @@ -6,7 +6,7 @@ import Menu, { MenuItem, SubMenu } from '../src'; import { isActive, last } from './util'; jest.mock('@rc-component/trigger', () => { - const react = require('react'); + const react = require('react'); let Trigger = jest.requireActual('@rc-component/trigger/lib/mock'); Trigger = Trigger.default || Trigger; @@ -17,7 +17,7 @@ jest.mock('@rc-component/trigger', () => { }); jest.mock('../src/SubMenu/PopupTrigger', () => { - const react = require('react'); + const react = require('react'); let PopupTrigger = jest.requireActual('../src/SubMenu/PopupTrigger'); PopupTrigger = PopupTrigger.default || PopupTrigger; @@ -480,5 +480,24 @@ describe('SubMenu', () => { expect(container.children).toMatchSnapshot(); }); + + it('submenu should support popupStyle', () => { + const { container } = render( + + + 1 + + , + ); + + fireEvent.mouseEnter(container.querySelector('.rc-menu-submenu-title')); + runAllTimer(); + expect((container.querySelector('.rc-menu-submenu-popup') as HTMLElement).style.zIndex).toEqual('100'); + expect((container.querySelector('.rc-menu-submenu-popup') as HTMLElement).style.width).toEqual('150px'); + }); }); /* eslint-enable */