Skip to content

Commit 6cd311c

Browse files
heiyu4585heiyu4585
authored
add rootClassName (#445)
1 parent 1b5cbab commit 6cd311c

File tree

6 files changed

+183
-1
lines changed

6 files changed

+183
-1
lines changed

‎src/Menu.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export interface MenuProps
5353
'onClick' | 'onSelect' | 'dir'
5454
> {
5555
prefixCls?: string;
56-
56+
rootClassName?: string;
5757
items?: ItemType[];
5858
/** @deprecated Please use `items` instead */
5959
children?: React.ReactNode;
@@ -153,6 +153,7 @@ interface LegacyMenuProps extends MenuProps {
153153
const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
154154
const {
155155
prefixCls = 'rc-menu',
156+
rootClassName,
156157
style,
157158
className,
158159
tabIndex = 0,
@@ -518,6 +519,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
518519
[`${prefixCls}-inline-collapsed`]: mergedInlineCollapsed,
519520
[`${prefixCls}-rtl`]: isRtl,
520521
},
522+
rootClassName,
521523
)}
522524
dir={direction}
523525
style={style}
@@ -564,6 +566,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
564566
<IdContext.Provider value={uuid}>
565567
<MenuContextProvider
566568
prefixCls={prefixCls}
569+
rootClassName={rootClassName}
567570
mode={mergedMode}
568571
openKeys={mergedOpenKeys}
569572
rtl={isRtl}

‎src/SubMenu/PopupTrigger.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export default function PopupTrigger({
4646
builtinPlacements,
4747
triggerSubMenuAction,
4848
forceSubMenuRender,
49+
rootClassName,
4950

5051
// Motion
5152
motion,
@@ -90,6 +91,7 @@ export default function PopupTrigger({
9091
[`${prefixCls}-rtl`]: rtl,
9192
},
9293
popupClassName,
94+
rootClassName,
9395
)}
9496
stretch={mode === 'horizontal' ? 'minWidth' : null}
9597
getPopupContainer={getPopupContainer}

‎src/context/MenuContext.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import type {
1212

1313
export interface MenuContextProps {
1414
prefixCls: string;
15+
rootClassName?: string;
1516
openKeys: string[];
1617
rtl?: boolean;
1718

‎src/interface.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export interface SubMenuType extends ItemSharedProps {
1515

1616
key: string;
1717

18+
rootClassName?: string;
19+
1820
// >>>>> Icon
1921
itemIcon?: RenderIconType;
2022
expandIcon?: RenderIconType;

‎tests/SubMenu.spec.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -439,5 +439,48 @@ describe('SubMenu', () => {
439439

440440
jest.useRealTimers();
441441
});
442+
443+
it('should support rootClassName', () => {
444+
const wrapper = mount(
445+
<Menu rootClassName="custom-className" defaultOpenKeys={['1', '1-1']}>
446+
<SubMenu key="1" title="submenu1">
447+
<MenuItem key="1-1" role="option">
448+
submenu7
449+
</MenuItem>
450+
</SubMenu>
451+
<MenuItem key="2" role="option">
452+
2
453+
</MenuItem>
454+
<MenuItem key="3" role="option">
455+
3
456+
</MenuItem>
457+
</Menu>,
458+
);
459+
expect(wrapper.render()).toMatchSnapshot();
460+
461+
expect(
462+
wrapper.find('ul.rc-menu-root').at(0).hasClass('custom-className'),
463+
).toBe(true);
464+
expect(wrapper.find('.rc-menu-submenu-popup').length).toBe(0);
465+
466+
act(() => {
467+
jest.runAllTimers();
468+
wrapper.update();
469+
});
470+
471+
// Enter
472+
wrapper.find('.rc-menu-submenu-title').first().simulate('mouseEnter');
473+
474+
act(() => {
475+
jest.runAllTimers();
476+
wrapper.update();
477+
});
478+
479+
expect(
480+
wrapper.find('.rc-menu-submenu-popup').at(0).hasClass('custom-className'),
481+
).toBe(true);
482+
483+
expect(wrapper.render()).toMatchSnapshot();
484+
});
442485
});
443486
/* eslint-enable */

‎tests/__snapshots__/SubMenu.spec.js.snap‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`SubMenu should support rootClassName 1`] = `
4+
Array [
5+
<ul
6+
class="rc-menu rc-menu-root rc-menu-vertical custom-className"
7+
data-menu-list="true"
8+
role="menu"
9+
tabindex="0"
10+
>
11+
<li
12+
class="rc-menu-submenu rc-menu-submenu-vertical rc-menu-submenu-open"
13+
role="none"
14+
>
15+
<div
16+
aria-controls="rc-menu-uuid-test-1-popup"
17+
aria-expanded="true"
18+
aria-haspopup="true"
19+
class="rc-menu-submenu-title"
20+
data-menu-id="rc-menu-uuid-test-1"
21+
role="menuitem"
22+
tabindex="-1"
23+
title="submenu1"
24+
>
25+
submenu1
26+
<i
27+
class="rc-menu-submenu-arrow"
28+
/>
29+
</div>
30+
</li>
31+
<li
32+
aria-selected="false"
33+
class="rc-menu-item"
34+
data-menu-id="rc-menu-uuid-test-2"
35+
role="option"
36+
tabindex="-1"
37+
>
38+
2
39+
</li>
40+
<li
41+
aria-selected="false"
42+
class="rc-menu-item"
43+
data-menu-id="rc-menu-uuid-test-3"
44+
role="option"
45+
tabindex="-1"
46+
>
47+
3
48+
</li>
49+
</ul>,
50+
<div
51+
aria-hidden="true"
52+
style="display: none;"
53+
/>,
54+
]
55+
`;
56+
57+
exports[`SubMenu should support rootClassName 2`] = `
58+
Array [
59+
<ul
60+
class="rc-menu rc-menu-root rc-menu-vertical custom-className"
61+
data-menu-list="true"
62+
role="menu"
63+
tabindex="0"
64+
>
65+
<li
66+
class="rc-menu-submenu rc-menu-submenu-vertical rc-menu-submenu-open rc-menu-submenu-active"
67+
role="none"
68+
>
69+
<div
70+
aria-controls="rc-menu-uuid-test-1-popup"
71+
aria-expanded="true"
72+
aria-haspopup="true"
73+
class="rc-menu-submenu-title"
74+
data-menu-id="rc-menu-uuid-test-1"
75+
role="menuitem"
76+
tabindex="-1"
77+
title="submenu1"
78+
>
79+
submenu1
80+
<i
81+
class="rc-menu-submenu-arrow"
82+
/>
83+
</div>
84+
<div>
85+
<div
86+
class="rc-menu-submenu rc-menu-submenu-popup custom-className"
87+
style="opacity: 0; pointer-events: none;"
88+
>
89+
<ul
90+
class="rc-menu rc-menu-sub rc-menu-vertical"
91+
data-menu-list="true"
92+
id="rc-menu-uuid-test-1-popup"
93+
>
94+
<li
95+
aria-selected="false"
96+
class="rc-menu-item"
97+
data-menu-id="rc-menu-uuid-test-1-1"
98+
role="option"
99+
tabindex="-1"
100+
>
101+
submenu7
102+
</li>
103+
</ul>
104+
</div>
105+
</div>
106+
</li>
107+
<li
108+
aria-selected="false"
109+
class="rc-menu-item"
110+
data-menu-id="rc-menu-uuid-test-2"
111+
role="option"
112+
tabindex="-1"
113+
>
114+
2
115+
</li>
116+
<li
117+
aria-selected="false"
118+
class="rc-menu-item"
119+
data-menu-id="rc-menu-uuid-test-3"
120+
role="option"
121+
tabindex="-1"
122+
>
123+
3
124+
</li>
125+
</ul>,
126+
<div
127+
aria-hidden="true"
128+
style="display: none;"
129+
/>,
130+
]
131+
`;

0 commit comments

Comments
 (0)