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
| [](http://godban.github.io/browsers-support-badges/)
IE / Edge | [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome | [](http://godban.github.io/browsers-support-badges/)
Safari | [](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
| [](http://godban.github.io/browsers-support-badges/)
IE / Edge | [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome | [](http://godban.github.io/browsers-support-badges/)
Safari | [](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(
+ ,
+ );
+
+ 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 */