Skip to content

Commit c9d197d

Browse files
aojunhao123aojunhao123
committed
feat: retire deprecated api
1 parent f94aec3 commit c9d197d

16 files changed

+1708
-665
lines changed

‎src/Menu.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,6 @@ export interface MenuProps
6262
rootClassName?: string;
6363
items?: ItemType[];
6464

65-
/** @deprecated Please use `items` instead */
66-
children?: React.ReactNode;
67-
6865
disabled?: boolean;
6966
/** @private Disable auto overflow. Pls note the prop name may refactor since we do not final decided. */
7067
disabledOverflow?: boolean;
@@ -173,7 +170,6 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
173170
className,
174171
tabIndex = 0,
175172
items,
176-
children,
177173
direction,
178174

179175
id,
@@ -248,10 +244,10 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
248244
measureChildList: React.ReactElement[],
249245
] = React.useMemo(
250246
() => [
251-
parseItems(children, items, EMPTY_LIST, _internalComponents, prefixCls),
252-
parseItems(children, items, EMPTY_LIST, {}, prefixCls),
247+
parseItems(items, EMPTY_LIST, _internalComponents, prefixCls),
248+
parseItems(items, EMPTY_LIST, {}, prefixCls),
253249
],
254-
[children, items, _internalComponents],
250+
[items, _internalComponents],
255251
);
256252

257253
const [mounted, setMounted] = React.useState(false);

‎src/MenuItem.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,6 @@ export interface MenuItemProps
2828

2929
/** @private Do not use. Private warning empty usage */
3030
warnKey?: boolean;
31-
32-
/** @deprecated No place to use this. Should remove */
33-
attribute?: Record<string, string>;
3431
}
3532

3633
// Since Menu event provide the `info.item` which point to the MenuItem node instance.

‎src/interface.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@ export interface MenuItemType extends ItemSharedProps {
5353

5454
key: React.Key;
5555

56+
title?: string;
57+
58+
role?: React.AriaRole;
59+
5660
// >>>>> Active
5761
onMouseEnter?: MenuHoverEventHandler;
5862
onMouseLeave?: MenuHoverEventHandler;
@@ -62,6 +66,8 @@ export interface MenuItemType extends ItemSharedProps {
6266
}
6367

6468
export interface MenuItemGroupType extends ItemSharedProps {
69+
key?: React.Key;
70+
6571
type: 'group';
6672

6773
label?: React.ReactNode;
@@ -139,4 +145,6 @@ export type MenuRef = {
139145
// ======================== Component ========================
140146
export type ComponentType = 'submenu' | 'item' | 'group' | 'divider';
141147

142-
export type Components = Partial<Record<ComponentType, React.ComponentType<any>>>;
148+
export type Components = Partial<
149+
Record<ComponentType, React.ComponentType<any>>
150+
>;

‎src/utils/nodeUtil.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,12 @@ function convertItemsToNodes(
6464
}
6565

6666
export function parseItems(
67-
children: React.ReactNode | undefined,
6867
items: ItemType[] | undefined,
6968
keyPath: string[],
7069
components: Components,
7170
prefixCls?: string,
7271
) {
73-
let childNodes = children;
72+
let childNodes;
7473

7574
const mergedComponents: Required<Components> = {
7675
divider: Divider,

‎tests/Collapsed.spec.tsx

Lines changed: 172 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable no-undef, react/no-multi-comp, react/jsx-curly-brace-presence */
22
import { act, fireEvent, render } from '@testing-library/react';
33
import React from 'react';
4-
import Menu, { MenuItem, SubMenu } from '../src';
4+
import Menu from '../src';
55

66
describe('Menu.Collapsed', () => {
77
describe('inlineCollapse and siderCollapsed', () => {
@@ -15,13 +15,31 @@ describe('Menu.Collapsed', () => {
1515

1616
it('should always follow openKeys when mode is switched', () => {
1717
const genMenu = (props?) => (
18-
<Menu openKeys={['1']} mode="inline" {...props}>
19-
<SubMenu key="1" title="submenu1">
20-
<MenuItem key="submenu1">Option 1</MenuItem>
21-
<MenuItem key="submenu2">Option 2</MenuItem>
22-
</SubMenu>
23-
<MenuItem key="2">menu2</MenuItem>
24-
</Menu>
18+
<Menu
19+
openKeys={['1']}
20+
mode="inline"
21+
{...props}
22+
items={[
23+
{
24+
key: '1',
25+
label: 'submenu1',
26+
children: [
27+
{
28+
key: 'submenu1',
29+
label: 'Option 1',
30+
},
31+
{
32+
key: 'submenu2',
33+
label: 'Option 2',
34+
},
35+
],
36+
},
37+
{
38+
key: '2',
39+
label: 'menu2',
40+
},
41+
]}
42+
/>
2543
);
2644

2745
const { container, rerender } = render(genMenu());
@@ -49,13 +67,28 @@ describe('Menu.Collapsed', () => {
4967

5068
it('should always follow submenu popup hidden when mode is switched', () => {
5169
const genMenu = (props?) => (
52-
<Menu mode="vertical" {...props}>
53-
<SubMenu key="1" title="submenu1">
54-
<SubMenu key="1-1" title="submenu1-1">
55-
<MenuItem key="Option-1">Option 1</MenuItem>
56-
</SubMenu>
57-
</SubMenu>
58-
</Menu>
70+
<Menu
71+
mode="vertical"
72+
{...props}
73+
items={[
74+
{
75+
key: '1',
76+
label: 'submenu1',
77+
children: [
78+
{
79+
key: '1-1',
80+
label: 'submenu1-1',
81+
children: [
82+
{
83+
key: 'Option-1',
84+
label: 'Option 1',
85+
},
86+
],
87+
},
88+
],
89+
},
90+
]}
91+
/>
5992
);
6093

6194
const { container, rerender } = render(genMenu());
@@ -102,15 +135,31 @@ describe('Menu.Collapsed', () => {
102135

103136
it('should always follow openKeys when inlineCollapsed is switched', () => {
104137
const genMenu = (props?) => (
105-
<Menu defaultOpenKeys={['1']} mode="inline" {...props}>
106-
<MenuItem key="menu1">
107-
<span>Option</span>
108-
</MenuItem>
109-
<SubMenu key="1" title="submenu1">
110-
<MenuItem key="submenu1">Option</MenuItem>
111-
<MenuItem key="submenu2">Option</MenuItem>
112-
</SubMenu>
113-
</Menu>
138+
<Menu
139+
defaultOpenKeys={['1']}
140+
mode="inline"
141+
{...props}
142+
items={[
143+
{
144+
key: 'menu1',
145+
label: <span>Option</span>,
146+
},
147+
{
148+
key: '1',
149+
label: 'submenu1',
150+
children: [
151+
{
152+
key: 'submenu1',
153+
label: 'Option',
154+
},
155+
{
156+
key: 'submenu2',
157+
label: 'Option',
158+
},
159+
],
160+
},
161+
]}
162+
/>
114163
);
115164

116165
const { container, rerender } = render(genMenu());
@@ -155,15 +204,31 @@ describe('Menu.Collapsed', () => {
155204

156205
it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
157206
const genMenu = (props?) => (
158-
<Menu defaultOpenKeys={['not-existed']} mode="inline" {...props}>
159-
<MenuItem key="menu1">
160-
<span>Option</span>
161-
</MenuItem>
162-
<SubMenu key="1" title="submenu1">
163-
<MenuItem key="submenu1">Option</MenuItem>
164-
<MenuItem key="submenu2">Option</MenuItem>
165-
</SubMenu>
166-
</Menu>
207+
<Menu
208+
defaultOpenKeys={['not-existed']}
209+
mode="inline"
210+
{...props}
211+
items={[
212+
{
213+
key: 'menu1',
214+
label: <span>Option</span>,
215+
},
216+
{
217+
key: '1',
218+
label: 'submenu1',
219+
children: [
220+
{
221+
key: 'submenu1',
222+
label: 'Option',
223+
},
224+
{
225+
key: 'submenu2',
226+
label: 'Option',
227+
},
228+
],
229+
},
230+
]}
231+
/>
167232
);
168233

169234
const { container, rerender } = render(genMenu());
@@ -176,9 +241,6 @@ describe('Menu.Collapsed', () => {
176241
jest.runAllTimers();
177242
});
178243

179-
// wrapper
180-
// .find('Overflow')
181-
// .simulate('transitionEnd', { propertyName: 'width' });
182244
fireEvent.transitionEnd(container.querySelector('.rc-menu-root'), {
183245
propertyName: 'width',
184246
});
@@ -189,7 +251,6 @@ describe('Menu.Collapsed', () => {
189251
});
190252

191253
// Hover to show
192-
// wrapper.find('.rc-menu-submenu-title').at(0).simulate('mouseEnter');
193254
fireEvent.mouseEnter(container.querySelector('.rc-menu-submenu-title'));
194255

195256
act(() => {
@@ -222,24 +283,38 @@ describe('Menu.Collapsed', () => {
222283
mode="inline"
223284
inlineCollapsed
224285
getPopupContainer={node => node.parentNode as HTMLElement}
225-
>
226-
<MenuItem key="menu1">item</MenuItem>
227-
<MenuItem key="menu2" title="title">
228-
item
229-
</MenuItem>
230-
<MenuItem key="menu3" title={undefined}>
231-
item
232-
</MenuItem>
233-
<MenuItem key="menu4" title={null}>
234-
item
235-
</MenuItem>
236-
<MenuItem key="menu5" title="">
237-
item
238-
</MenuItem>
239-
<MenuItem key="menu6" title={false as unknown as string}>
240-
item
241-
</MenuItem>
242-
</Menu>,
286+
items={[
287+
{
288+
key: 'menu1',
289+
label: 'item',
290+
},
291+
{
292+
key: 'menu2',
293+
label: 'item',
294+
title: 'title',
295+
},
296+
{
297+
key: 'menu3',
298+
label: 'item',
299+
title: undefined,
300+
},
301+
{
302+
key: 'menu4',
303+
label: 'item',
304+
title: null,
305+
},
306+
{
307+
key: 'menu5',
308+
label: 'item',
309+
title: '',
310+
},
311+
{
312+
key: 'menu6',
313+
label: 'item',
314+
title: false as unknown as string,
315+
},
316+
]}
317+
/>,
243318
);
244319

245320
expect(
@@ -259,13 +334,27 @@ describe('Menu.Collapsed', () => {
259334
defaultSelectedKeys={['1']}
260335
openKeys={['3']}
261336
{...props}
262-
>
263-
<MenuItem key="1">Option 1</MenuItem>
264-
<MenuItem key="2">Option 2</MenuItem>
265-
<SubMenu key="3" title="Option 3">
266-
<MenuItem key="4">Option 4</MenuItem>
267-
</SubMenu>
268-
</Menu>
337+
items={[
338+
{
339+
key: '1',
340+
label: 'Option 1',
341+
},
342+
{
343+
key: '2',
344+
label: 'Option 2',
345+
},
346+
{
347+
key: '3',
348+
label: 'Option 3',
349+
children: [
350+
{
351+
key: '4',
352+
label: 'Option 4',
353+
},
354+
],
355+
},
356+
]}
357+
/>
269358
);
270359

271360
const { container, rerender } = render(genMenu());
@@ -305,13 +394,27 @@ describe('Menu.Collapsed', () => {
305394
defaultSelectedKeys={['1']}
306395
openKeys={['3']}
307396
{...props}
308-
>
309-
<MenuItem key="1">Option 1</MenuItem>
310-
<MenuItem key="2">Option 2</MenuItem>
311-
<SubMenu key="3" title="Option 3">
312-
<MenuItem key="4">Option 4</MenuItem>
313-
</SubMenu>
314-
</Menu>
397+
items={[
398+
{
399+
key: '1',
400+
label: 'Option 1',
401+
},
402+
{
403+
key: '2',
404+
label: 'Option 2',
405+
},
406+
{
407+
key: '3',
408+
label: 'Option 3',
409+
children: [
410+
{
411+
key: '4',
412+
label: 'Option 4',
413+
},
414+
],
415+
},
416+
]}
417+
/>
315418
);
316419

317420
const { container, rerender } = render(genMenu());

0 commit comments

Comments
 (0)