Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: retire deprecated api #745

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+2,449 −1,052
Open

feat: retire deprecated api #745

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c9d197d
feat: retire deprecated api
aojunhao123 Jan 5, 2025
ddc21d2
chore: update demo
aojunhao123 Jan 6, 2025
7e3eecf
chore: update demo
aojunhao123 Jan 6, 2025
cf03f2b
fix: test error
aojunhao123 Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions src/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,6 @@ export interface MenuProps
rootClassName?: string;
items?: ItemType[];

/** @deprecated Please use `items` instead */
children?: React.ReactNode;

disabled?: boolean;
/** @private Disable auto overflow. Pls note the prop name may refactor since we do not final decided. */
disabledOverflow?: boolean;
Expand Down Expand Up @@ -173,7 +170,6 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
className,
tabIndex = 0,
items,
children,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Menu 里有个 aria-hidden 的元素用来收集 children 结构的数据，现在不需要就可以一起删了。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PathRegisterContext 这个相关的代码都不需要了

direction,

id,
Expand Down Expand Up @@ -248,10 +244,10 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
measureChildList: React.ReactElement[],
] = React.useMemo(
() => [
parseItems(children, items, EMPTY_LIST, _internalComponents, prefixCls),
parseItems(children, items, EMPTY_LIST, {}, prefixCls),
parseItems(items, EMPTY_LIST, _internalComponents, prefixCls),
parseItems(items, EMPTY_LIST, {}, prefixCls),
],
[children, items, _internalComponents],
[items, _internalComponents],
);

const [mounted, setMounted] = React.useState(false);
Expand Down
3 changes: 0 additions & 3 deletions src/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,6 @@ export interface MenuItemProps

/** @private Do not use. Private warning empty usage */
warnKey?: boolean;

/** @deprecated No place to use this. Should remove */
attribute?: Record<string, string>;
}

// Since Menu event provide the `info.item` which point to the MenuItem node instance.
Expand Down
10 changes: 9 additions & 1 deletion src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@ export interface MenuItemType extends ItemSharedProps {

key: React.Key;

title?: string;

role?: React.AriaRole;

// >>>>> Active
onMouseEnter?: MenuHoverEventHandler;
onMouseLeave?: MenuHoverEventHandler;
Expand All @@ -62,6 +66,8 @@ export interface MenuItemType extends ItemSharedProps {
}

export interface MenuItemGroupType extends ItemSharedProps {
key?: React.Key;

type: 'group';

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

export type Components = Partial<Record<ComponentType, React.ComponentType<any>>>;
export type Components = Partial<
Record<ComponentType, React.ComponentType<any>>
>;
3 changes: 1 addition & 2 deletions src/utils/nodeUtil.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,12 @@ function convertItemsToNodes(
}

export function parseItems(
children: React.ReactNode | undefined,
items: ItemType[] | undefined,
keyPath: string[],
components: Components,
prefixCls?: string,
) {
let childNodes = children;
let childNodes;

const mergedComponents: Required<Components> = {
divider: Divider,
Expand Down
241 changes: 172 additions & 69 deletions tests/Collapsed.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable no-undef, react/no-multi-comp, react/jsx-curly-brace-presence */
import { act, fireEvent, render } from '@testing-library/react';
import React from 'react';
import Menu, { MenuItem, SubMenu } from '../src';
import Menu from '../src';

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

it('should always follow openKeys when mode is switched', () => {
const genMenu = (props?) => (
<Menu openKeys={['1']} mode="inline" {...props}>
<SubMenu key="1" title="submenu1">
<MenuItem key="submenu1">Option 1</MenuItem>
<MenuItem key="submenu2">Option 2</MenuItem>
</SubMenu>
<MenuItem key="2">menu2</MenuItem>
</Menu>
<Menu
openKeys={['1']}
mode="inline"
{...props}
items={[
{
key: '1',
label: 'submenu1',
children: [
{
key: 'submenu1',
label: 'Option 1',
},
{
key: 'submenu2',
label: 'Option 2',
},
],
},
{
key: '2',
label: 'menu2',
},
]}
/>
);

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

it('should always follow submenu popup hidden when mode is switched', () => {
const genMenu = (props?) => (
<Menu mode="vertical" {...props}>
<SubMenu key="1" title="submenu1">
<SubMenu key="1-1" title="submenu1-1">
<MenuItem key="Option-1">Option 1</MenuItem>
</SubMenu>
</SubMenu>
</Menu>
<Menu
mode="vertical"
{...props}
items={[
{
key: '1',
label: 'submenu1',
children: [
{
key: '1-1',
label: 'submenu1-1',
children: [
{
key: 'Option-1',
label: 'Option 1',
},
],
},
],
},
]}
/>
);

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

it('should always follow openKeys when inlineCollapsed is switched', () => {
const genMenu = (props?) => (
<Menu defaultOpenKeys={['1']} mode="inline" {...props}>
<MenuItem key="menu1">
<span>Option</span>
</MenuItem>
<SubMenu key="1" title="submenu1">
<MenuItem key="submenu1">Option</MenuItem>
<MenuItem key="submenu2">Option</MenuItem>
</SubMenu>
</Menu>
<Menu
defaultOpenKeys={['1']}
mode="inline"
{...props}
items={[
{
key: 'menu1',
label: <span>Option</span>,
},
{
key: '1',
label: 'submenu1',
children: [
{
key: 'submenu1',
label: 'Option',
},
{
key: 'submenu2',
label: 'Option',
},
],
},
]}
/>
);

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

it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
const genMenu = (props?) => (
<Menu defaultOpenKeys={['not-existed']} mode="inline" {...props}>
<MenuItem key="menu1">
<span>Option</span>
</MenuItem>
<SubMenu key="1" title="submenu1">
<MenuItem key="submenu1">Option</MenuItem>
<MenuItem key="submenu2">Option</MenuItem>
</SubMenu>
</Menu>
<Menu
defaultOpenKeys={['not-existed']}
mode="inline"
{...props}
items={[
{
key: 'menu1',
label: <span>Option</span>,
},
{
key: '1',
label: 'submenu1',
children: [
{
key: 'submenu1',
label: 'Option',
},
{
key: 'submenu2',
label: 'Option',
},
],
},
]}
/>
);

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

// wrapper
// .find('Overflow')
// .simulate('transitionEnd', { propertyName: 'width' });
fireEvent.transitionEnd(container.querySelector('.rc-menu-root'), {
propertyName: 'width',
});
Expand All @@ -189,7 +251,6 @@ describe('Menu.Collapsed', () => {
});

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

act(() => {
Expand Down Expand Up @@ -222,24 +283,38 @@ describe('Menu.Collapsed', () => {
mode="inline"
inlineCollapsed
getPopupContainer={node => node.parentNode as HTMLElement}
>
<MenuItem key="menu1">item</MenuItem>
<MenuItem key="menu2" title="title">
item
</MenuItem>
<MenuItem key="menu3" title={undefined}>
item
</MenuItem>
<MenuItem key="menu4" title={null}>
item
</MenuItem>
<MenuItem key="menu5" title="">
item
</MenuItem>
<MenuItem key="menu6" title={false as unknown as string}>
item
</MenuItem>
</Menu>,
items={[
{
key: 'menu1',
label: 'item',
},
{
key: 'menu2',
label: 'item',
title: 'title',
},
{
key: 'menu3',
label: 'item',
title: undefined,
},
{
key: 'menu4',
label: 'item',
title: null,
},
{
key: 'menu5',
label: 'item',
title: '',
},
{
key: 'menu6',
label: 'item',
title: false as unknown as string,
},
]}
/>,
);

expect(
Expand All @@ -259,13 +334,27 @@ describe('Menu.Collapsed', () => {
defaultSelectedKeys={['1']}
openKeys={['3']}
{...props}
>
<MenuItem key="1">Option 1</MenuItem>
<MenuItem key="2">Option 2</MenuItem>
<SubMenu key="3" title="Option 3">
<MenuItem key="4">Option 4</MenuItem>
</SubMenu>
</Menu>
items={[
{
key: '1',
label: 'Option 1',
},
{
key: '2',
label: 'Option 2',
},
{
key: '3',
label: 'Option 3',
children: [
{
key: '4',
label: 'Option 4',
},
],
},
]}
/>
);

const { container, rerender } = render(genMenu());
Expand Down Expand Up @@ -305,13 +394,27 @@ describe('Menu.Collapsed', () => {
defaultSelectedKeys={['1']}
openKeys={['3']}
{...props}
>
<MenuItem key="1">Option 1</MenuItem>
<MenuItem key="2">Option 2</MenuItem>
<SubMenu key="3" title="Option 3">
<MenuItem key="4">Option 4</MenuItem>
</SubMenu>
</Menu>
items={[
{
key: '1',
label: 'Option 1',
},
{
key: '2',
label: 'Option 2',
},
{
key: '3',
label: 'Option 3',
children: [
{
key: '4',
label: 'Option 4',
},
],
},
]}
/>
);

const { container, rerender } = render(genMenu());
Expand Down
Loading