From 9d14e99fa16a218f7b3878302f25b65025efaa3c Mon Sep 17 00:00:00 2001 From: RicardoErii <‘1974364190@qq.com’> Date: Sat, 3 Jun 2023 15:26:55 +0800 Subject: [PATCH 1/7] feat: support for submenu custom styles --- README.md | 10 ++++++++-- src/Menu.tsx | 3 +++ src/SubMenu/PopupTrigger.tsx | 2 ++ src/context/MenuContext.tsx | 1 + 4 files changed, 14 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4004fcd0..030144f8 100644 --- a/README.md +++ b/README.md @@ -55,8 +55,8 @@ ReactDOM.render( ## Compatibility | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| --- | --- | --- | --- | --- | -| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | ## API @@ -186,6 +186,12 @@ ReactDOM.render( 0.1 delay time to hide popup sub menu. unit: s + + subMenuStyle + Object + + the style of sub menu. unit: s + forceSubMenuRender Boolean diff --git a/src/Menu.tsx b/src/Menu.tsx index ef9db196..938b2025 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -100,6 +100,7 @@ export interface MenuProps // Popup subMenuOpenDelay?: number; subMenuCloseDelay?: number; + subMenuStyle?: React.CSSProperties; forceSubMenuRender?: boolean; triggerSubMenuAction?: TriggerSubMenuAction; builtinPlacements?: BuiltinPlacements; @@ -175,6 +176,7 @@ const Menu = React.forwardRef((props, ref) => { // Open subMenuOpenDelay = 0.1, subMenuCloseDelay = 0.1, + subMenuStyle, forceSubMenuRender, defaultOpenKeys, openKeys, @@ -617,6 +619,7 @@ const Menu = React.forwardRef((props, ref) => { // Popup subMenuOpenDelay={subMenuOpenDelay} subMenuCloseDelay={subMenuCloseDelay} + subMenuStyle={subMenuStyle} forceSubMenuRender={forceSubMenuRender} builtinPlacements={builtinPlacements} triggerSubMenuAction={triggerSubMenuAction} diff --git a/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx index 05b6f9e3..faa6a14a 100644 --- a/src/SubMenu/PopupTrigger.tsx +++ b/src/SubMenu/PopupTrigger.tsx @@ -43,6 +43,7 @@ export default function PopupTrigger({ rtl, subMenuOpenDelay, subMenuCloseDelay, + subMenuStyle, builtinPlacements, triggerSubMenuAction, forceSubMenuRender, @@ -108,6 +109,7 @@ export default function PopupTrigger({ popupPlacement={popupPlacement} popupVisible={innerVisible} popup={popup} + popupStyle={subMenuStyle} popupAlign={popupOffset && { offset: popupOffset }} action={disabled ? [] : [triggerSubMenuAction]} mouseEnterDelay={subMenuOpenDelay} diff --git a/src/context/MenuContext.tsx b/src/context/MenuContext.tsx index c34c4bdf..73d6a3bb 100644 --- a/src/context/MenuContext.tsx +++ b/src/context/MenuContext.tsx @@ -42,6 +42,7 @@ export interface MenuContextProps { // Popup subMenuOpenDelay: number; subMenuCloseDelay: number; + subMenuStyle?: React.CSSProperties; forceSubMenuRender?: boolean; builtinPlacements?: BuiltinPlacements; triggerSubMenuAction?: TriggerSubMenuAction; From 7d4aa5f0d150ce78e652688d03f83899fd724bdb Mon Sep 17 00:00:00 2001 From: RicardoErii <‘1974364190@qq.com’> Date: Mon, 5 Jun 2023 17:22:10 +0800 Subject: [PATCH 2/7] feat: support for submenu custom styles --- README.md | 4 ++-- src/Menu.tsx | 3 --- src/SubMenu/PopupTrigger.tsx | 2 -- src/context/MenuContext.tsx | 1 - 4 files changed, 2 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 030144f8..483b2793 100644 --- a/README.md +++ b/README.md @@ -55,8 +55,8 @@ ReactDOM.render( ## Compatibility | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | +| --- | --- | --- | --- | --- | +| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | ## API diff --git a/src/Menu.tsx b/src/Menu.tsx index 938b2025..ef9db196 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -100,7 +100,6 @@ export interface MenuProps // Popup subMenuOpenDelay?: number; subMenuCloseDelay?: number; - subMenuStyle?: React.CSSProperties; forceSubMenuRender?: boolean; triggerSubMenuAction?: TriggerSubMenuAction; builtinPlacements?: BuiltinPlacements; @@ -176,7 +175,6 @@ const Menu = React.forwardRef((props, ref) => { // Open subMenuOpenDelay = 0.1, subMenuCloseDelay = 0.1, - subMenuStyle, forceSubMenuRender, defaultOpenKeys, openKeys, @@ -619,7 +617,6 @@ const Menu = React.forwardRef((props, ref) => { // Popup subMenuOpenDelay={subMenuOpenDelay} subMenuCloseDelay={subMenuCloseDelay} - subMenuStyle={subMenuStyle} forceSubMenuRender={forceSubMenuRender} builtinPlacements={builtinPlacements} triggerSubMenuAction={triggerSubMenuAction} diff --git a/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx index faa6a14a..05b6f9e3 100644 --- a/src/SubMenu/PopupTrigger.tsx +++ b/src/SubMenu/PopupTrigger.tsx @@ -43,7 +43,6 @@ export default function PopupTrigger({ rtl, subMenuOpenDelay, subMenuCloseDelay, - subMenuStyle, builtinPlacements, triggerSubMenuAction, forceSubMenuRender, @@ -109,7 +108,6 @@ export default function PopupTrigger({ popupPlacement={popupPlacement} popupVisible={innerVisible} popup={popup} - popupStyle={subMenuStyle} popupAlign={popupOffset && { offset: popupOffset }} action={disabled ? [] : [triggerSubMenuAction]} mouseEnterDelay={subMenuOpenDelay} diff --git a/src/context/MenuContext.tsx b/src/context/MenuContext.tsx index 73d6a3bb..c34c4bdf 100644 --- a/src/context/MenuContext.tsx +++ b/src/context/MenuContext.tsx @@ -42,7 +42,6 @@ export interface MenuContextProps { // Popup subMenuOpenDelay: number; subMenuCloseDelay: number; - subMenuStyle?: React.CSSProperties; forceSubMenuRender?: boolean; builtinPlacements?: BuiltinPlacements; triggerSubMenuAction?: TriggerSubMenuAction; From 60dacdfe99d7e6a2eb809cbdcbaabc65efe1eb95 Mon Sep 17 00:00:00 2001 From: RicardoErii <‘1974364190@qq.com’> Date: Mon, 5 Jun 2023 17:28:30 +0800 Subject: [PATCH 3/7] feat: support for submenu custom styles --- src/Menu.tsx | 3 +++ src/SubMenu/PopupTrigger.tsx | 2 ++ src/context/MenuContext.tsx | 1 + 3 files changed, 6 insertions(+) diff --git a/src/Menu.tsx b/src/Menu.tsx index ef9db196..938b2025 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -100,6 +100,7 @@ export interface MenuProps // Popup subMenuOpenDelay?: number; subMenuCloseDelay?: number; + subMenuStyle?: React.CSSProperties; forceSubMenuRender?: boolean; triggerSubMenuAction?: TriggerSubMenuAction; builtinPlacements?: BuiltinPlacements; @@ -175,6 +176,7 @@ const Menu = React.forwardRef((props, ref) => { // Open subMenuOpenDelay = 0.1, subMenuCloseDelay = 0.1, + subMenuStyle, forceSubMenuRender, defaultOpenKeys, openKeys, @@ -617,6 +619,7 @@ const Menu = React.forwardRef((props, ref) => { // Popup subMenuOpenDelay={subMenuOpenDelay} subMenuCloseDelay={subMenuCloseDelay} + subMenuStyle={subMenuStyle} forceSubMenuRender={forceSubMenuRender} builtinPlacements={builtinPlacements} triggerSubMenuAction={triggerSubMenuAction} diff --git a/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx index 05b6f9e3..faa6a14a 100644 --- a/src/SubMenu/PopupTrigger.tsx +++ b/src/SubMenu/PopupTrigger.tsx @@ -43,6 +43,7 @@ export default function PopupTrigger({ rtl, subMenuOpenDelay, subMenuCloseDelay, + subMenuStyle, builtinPlacements, triggerSubMenuAction, forceSubMenuRender, @@ -108,6 +109,7 @@ export default function PopupTrigger({ popupPlacement={popupPlacement} popupVisible={innerVisible} popup={popup} + popupStyle={subMenuStyle} popupAlign={popupOffset && { offset: popupOffset }} action={disabled ? [] : [triggerSubMenuAction]} mouseEnterDelay={subMenuOpenDelay} diff --git a/src/context/MenuContext.tsx b/src/context/MenuContext.tsx index c34c4bdf..73d6a3bb 100644 --- a/src/context/MenuContext.tsx +++ b/src/context/MenuContext.tsx @@ -42,6 +42,7 @@ export interface MenuContextProps { // Popup subMenuOpenDelay: number; subMenuCloseDelay: number; + subMenuStyle?: React.CSSProperties; forceSubMenuRender?: boolean; builtinPlacements?: BuiltinPlacements; triggerSubMenuAction?: TriggerSubMenuAction; From 147ad54a3e3c2b161646df984274c1114937921b Mon Sep 17 00:00:00 2001 From: RicardoErii <‘1974364190@qq.com’> Date: Mon, 5 Jun 2023 20:36:58 +0800 Subject: [PATCH 4/7] docs: update docs --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 483b2793..8b7d4842 100644 --- a/README.md +++ b/README.md @@ -188,9 +188,9 @@ ReactDOM.render( subMenuStyle - Object + React.CSSProperties - the style of sub menu. unit: s + the style of sub menu. forceSubMenuRender From a7d4a96a9e426f8ce753de89897e7f7f2cf7696d Mon Sep 17 00:00:00 2001 From: RicardoErii <‘1974364190@qq.com’> Date: Wed, 14 Jun 2023 13:21:58 +0800 Subject: [PATCH 5/7] feat: support custom style --- README.md | 6 ------ src/Menu.tsx | 3 --- src/SubMenu/PopupTrigger.tsx | 5 +++-- src/SubMenu/index.tsx | 2 ++ src/context/MenuContext.tsx | 1 - src/interface.ts | 1 + 6 files changed, 6 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 8b7d4842..4004fcd0 100644 --- a/README.md +++ b/README.md @@ -186,12 +186,6 @@ ReactDOM.render( 0.1 delay time to hide popup sub menu. unit: s - - subMenuStyle - React.CSSProperties - - the style of sub menu. - forceSubMenuRender Boolean diff --git a/src/Menu.tsx b/src/Menu.tsx index 938b2025..ef9db196 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -100,7 +100,6 @@ export interface MenuProps // Popup subMenuOpenDelay?: number; subMenuCloseDelay?: number; - subMenuStyle?: React.CSSProperties; forceSubMenuRender?: boolean; triggerSubMenuAction?: TriggerSubMenuAction; builtinPlacements?: BuiltinPlacements; @@ -176,7 +175,6 @@ const Menu = React.forwardRef((props, ref) => { // Open subMenuOpenDelay = 0.1, subMenuCloseDelay = 0.1, - subMenuStyle, forceSubMenuRender, defaultOpenKeys, openKeys, @@ -619,7 +617,6 @@ const Menu = React.forwardRef((props, ref) => { // Popup subMenuOpenDelay={subMenuOpenDelay} subMenuCloseDelay={subMenuCloseDelay} - subMenuStyle={subMenuStyle} forceSubMenuRender={forceSubMenuRender} builtinPlacements={builtinPlacements} triggerSubMenuAction={triggerSubMenuAction} diff --git a/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx index faa6a14a..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, @@ -43,7 +45,6 @@ export default function PopupTrigger({ rtl, subMenuOpenDelay, subMenuCloseDelay, - subMenuStyle, builtinPlacements, triggerSubMenuAction, forceSubMenuRender, @@ -109,7 +110,7 @@ export default function PopupTrigger({ popupPlacement={popupPlacement} popupVisible={innerVisible} popup={popup} - popupStyle={subMenuStyle} + 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; From 57419354925d62c7006273901a6363f519f1b675 Mon Sep 17 00:00:00 2001 From: RicardoErii <‘1974364190@qq.com’> Date: Sat, 17 Jun 2023 22:47:36 +0800 Subject: [PATCH 6/7] docs: update docs --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) 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 From 657bb3a1b6309c1aa42cf14cf2e9d06003a35cd9 Mon Sep 17 00:00:00 2001 From: RicardoErii <‘1974364190@qq.com’> Date: Sun, 18 Jun 2023 22:37:00 +0800 Subject: [PATCH 7/7] test: add test case --- tests/SubMenu.spec.tsx | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) 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 */