feat: support for submenu custom styles (#645)

* feat: support for submenu custom styles

* feat: support for submenu custom styles

* feat: support for submenu custom styles

* docs: update docs

* feat: support custom style

* docs: update docs

* test: add test case

---------

Co-authored-by: RicardoErii <‘[email protected]’>

Author: yangxiuxiu1115

README.md

@@ -300,6 +300,12 @@ ReactDOM.render(
           <td></td>
           <td>additional css class of root dom node</td>
         </tr>
+        <tr>
+          <td>popupStyle</td>
+          <td>CSSProperties</td>
+          <td></td>
+          <td>additional css style of root dom node</td>
+        </tr>
         <tr>
           <td>title</td>
           <td>String/ReactElement</td>

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}

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={
           <MenuContextProvider
             // Special handle of horizontal mode

src/interface.ts

@@ -28,6 +28,7 @@ export interface SubMenuType extends ItemSharedProps {
   // >>>>> Popup
   popupClassName?: string;
   popupOffset?: number[];
+  popupStyle?: React.CSSProperties;
 
   // >>>>> Events
   onClick?: MenuClickEventHandler;

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(
+      <Menu>
+        <SubMenu
+          key="s1"
+          title="submenu1"
+          popupStyle={{ zIndex: 100, width: 150 }}
+        >
+          <MenuItem key="s1-1">1</MenuItem>
+        </SubMenu>
+      </Menu>,
+    );
+
+    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 */