ant-design/components/menu/index.tsx
Mehmet Salih Yavuz 4cfde375a5
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
refactor(menu): replace component interface with type (#51715)
2024-12-26 09:54:42 +08:00

71 lines
2.1 KiB
TypeScript

import * as React from 'react';
import { forwardRef, useImperativeHandle, useRef } from 'react';
import type { MenuRef as RcMenuRef } from 'rc-menu';
import { ItemGroup } from 'rc-menu';
import { SiderContext } from '../layout/Sider';
import type { ItemType, MenuItemType } from './interface';
import type { MenuProps } from './menu';
import InternalMenu from './menu';
import type { MenuTheme } from './MenuContext';
import MenuDivider from './MenuDivider';
import Item from './MenuItem';
import type { MenuItemProps } from './MenuItem';
import SubMenu from './SubMenu';
import type { SubMenuProps } from './SubMenu';
export type { MenuItemGroupProps } from 'rc-menu';
export type { MenuDividerProps } from './MenuDivider';
export type { MenuItemProps, MenuProps, MenuTheme, SubMenuProps };
export type MenuRef = {
menu: RcMenuRef | null;
focus: (options?: FocusOptions) => void;
};
type ComponentProps = MenuProps & React.RefAttributes<MenuRef>;
type GenericItemType<T = unknown> = T extends infer U extends MenuItemType
? unknown extends U
? ItemType
: ItemType<U>
: ItemType;
type GenericComponentProps<T = unknown> = Omit<ComponentProps, 'items'> & {
items?: GenericItemType<T>[];
};
type CompoundedComponent = React.ForwardRefExoticComponent<GenericComponentProps> & {
Item: typeof Item;
SubMenu: typeof SubMenu;
Divider: typeof MenuDivider;
ItemGroup: typeof ItemGroup;
};
type GenericComponent = Omit<CompoundedComponent, ''> &
(<T extends MenuItemType>(props: GenericComponentProps<T>) => ReturnType<CompoundedComponent>);
const Menu = forwardRef<MenuRef, MenuProps>((props, ref) => {
const menuRef = useRef<RcMenuRef>(null);
const context = React.useContext(SiderContext);
useImperativeHandle(ref, () => ({
menu: menuRef.current,
focus: (options) => {
menuRef.current?.focus(options);
},
}));
return <InternalMenu ref={menuRef} {...props} {...context} />;
}) as GenericComponent;
Menu.Item = Item;
Menu.SubMenu = SubMenu;
Menu.Divider = MenuDivider;
Menu.ItemGroup = ItemGroup;
if (process.env.NODE_ENV !== 'production') {
Menu.displayName = 'Menu';
}
export default Menu;