feat: support items (#438)

* chore: popout interface

* chore: popup convert

* docs: demo update

* chore: fix compile

* test: add test case

* test: coverage

* test: covearege

* refactor: to items

Author: zombieJ

.eslintrc.js

@@ -15,5 +15,6 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 0,
     'jsx-a11y/label-has-associated-control': 0,
     'jsx-a11y/label-has-for': 0,
+    '@typescript-eslint/no-empty-interface': "off",
   },
 };

docs/demo/options.md

@@ -0,0 +1,3 @@
+## options
+
+<code src="../examples/options.tsx">

docs/examples/options.tsx

@@ -0,0 +1,68 @@
+/* eslint no-console:0 */
+
+import React from 'react';
+import Menu from '../../src';
+import '../../assets/index.less';
+
+export default () => (
+  <Menu
+    options={[
+      {
+        // MenuItem
+        title: 'Top Menu Item',
+        key: 'top',
+      },
+      {
+        // MenuGroup
+        type: 'group',
+        title: 'Top Menu Group without children',
+      },
+      {
+        // MenuGroup
+        type: 'group',
+        title: 'Top Menu Group with children',
+        children: [
+          {
+            // MenuItem
+            title: 'Menu Item 1',
+            key: 'inner1',
+          },
+          {
+            // Divider
+            type: 'divider',
+          },
+          {
+            // MenuItem
+            title: 'Menu Item 2',
+            key: 'inner2',
+          },
+        ],
+      },
+      {
+        // SubMenu
+        title: 'SubMenu',
+        key: 'sub1',
+        children: [
+          {
+            // MenuItem
+            title: 'Menu Item 1-1',
+            key: 'inner11',
+          },
+
+          {
+            // SubMenu
+            title: 'SubMenu inner',
+            key: 'sub1-1',
+            children: [
+              {
+                // MenuItem
+                title: 'Menu Item 111',
+                key: 'inner1-1-1',
+              },
+            ],
+          },
+        ],
+      },
+    ]}
+  />
+);

src/Divider.tsx

@@ -2,11 +2,9 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { MenuContext } from './context/MenuContext';
 import { useMeasure } from './context/PathContext';
+import type { MenuDividerType } from './interface';
 
-export interface DividerProps {
-  className?: string;
-  style?: React.CSSProperties;
-}
+export type DividerProps = Omit<MenuDividerType, 'type'>;
 
 export default function Divider({ className, style }: DividerProps) {
   const { prefixCls } = React.useContext(MenuContext);

src/Menu.tsx

@@ -14,9 +14,10 @@ import type {
   TriggerSubMenuAction,
   SelectInfo,
   RenderIconType,
+  ItemType,
 } from './interface';
 import MenuItem from './MenuItem';
-import { parseChildren } from './utils/nodeUtil';
+import { parseItems } from './utils/nodeUtil';
 import MenuContextProvider from './context/MenuContext';
 import useMemoCallback from './hooks/useMemoCallback';
 import { warnItemProp } from './utils/warnUtil';
@@ -52,6 +53,8 @@ export interface MenuProps
   > {
   prefixCls?: string;
 
+  items?: ItemType[];
+  /** @deprecated Please use `items` instead */
   children?: React.ReactNode;
 
   disabled?: boolean;
@@ -152,6 +155,7 @@ const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => {
     style,
     className,
     tabIndex = 0,
+    items,
     children,
     direction,
 
@@ -220,7 +224,11 @@ const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => {
     ...restProps
   } = props as LegacyMenuProps;
 
-  const childList: React.ReactElement[] = parseChildren(children, EMPTY_LIST);
+  const childList: React.ReactElement[] = parseItems(
+    children,
+    items,
+    EMPTY_LIST,
+  );
   const [mounted, setMounted] = React.useState(false);
 
   const containerRef = React.useRef<HTMLUListElement>();

src/MenuItem.tsx

@@ -4,12 +4,7 @@ import Overflow from 'rc-overflow';
 import warning from 'rc-util/lib/warning';
 import KeyCode from 'rc-util/lib/KeyCode';
 import omit from 'rc-util/lib/omit';
-import type {
-  MenuClickEventHandler,
-  MenuInfo,
-  MenuHoverEventHandler,
-  RenderIconType,
-} from './interface';
+import type { MenuInfo, MenuItemType } from './interface';
 import { MenuContext } from './context/MenuContext';
 import useActive from './hooks/useActive';
 import { warnItemProp } from './utils/warnUtil';
@@ -20,10 +15,11 @@ import { useMenuId } from './context/IdContext';
 import PrivateContext from './context/PrivateContext';
 
 export interface MenuItemProps
-  extends Omit<
-    React.HTMLAttributes<HTMLLIElement>,
-    'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'
-  > {
+  extends Omit<MenuItemType, 'title' | 'key'>,
+    Omit<
+      React.HTMLAttributes<HTMLLIElement>,
+      'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'
+    > {
   children?: React.ReactNode;
 
   /** @private Internal filled key. Do not set it directly */
@@ -32,18 +28,8 @@ export interface MenuItemProps
   /** @private Do not use. Private warning empty usage */
   warnKey?: boolean;
 
-  disabled?: boolean;
-
-  itemIcon?: RenderIconType;
-
   /** @deprecated No place to use this. Should remove */
   attribute?: Record<string, string>;
-  // >>>>> Active
-  onMouseEnter?: MenuHoverEventHandler;
-  onMouseLeave?: MenuHoverEventHandler;
-
-  // >>>>> Events
-  onClick?: MenuClickEventHandler;
 }
 
 // Since Menu event provide the `info.item` which point to the MenuItem node instance.

src/MenuItemGroup.tsx

@@ -4,10 +4,10 @@ import omit from 'rc-util/lib/omit';
 import { parseChildren } from './utils/nodeUtil';
 import { MenuContext } from './context/MenuContext';
 import { useFullPath, useMeasure } from './context/PathContext';
+import type { MenuItemGroupType } from './interface';
 
-export interface MenuItemGroupProps {
-  className?: string;
-  title?: React.ReactNode;
+export interface MenuItemGroupProps
+  extends Omit<MenuItemGroupType, 'type' | 'children'> {
   children?: React.ReactNode;
 
   /** @private Internal filled key. Do not set it directly */

src/SubMenu/index.tsx

@@ -4,13 +4,7 @@ import Overflow from 'rc-overflow';
 import warning from 'rc-util/lib/warning';
 import SubMenuList from './SubMenuList';
 import { parseChildren } from '../utils/nodeUtil';
-import type {
-  MenuClickEventHandler,
-  MenuHoverEventHandler,
-  MenuInfo,
-  MenuTitleInfo,
-  RenderIconType,
-} from '../interface';
+import type { MenuInfo, SubMenuType } from '../interface';
 import MenuContextProvider, { MenuContext } from '../context/MenuContext';
 import useMemoCallback from '../hooks/useMemoCallback';
 import PopupTrigger from './PopupTrigger';
@@ -28,14 +22,9 @@ import {
 import { useMenuId } from '../context/IdContext';
 import PrivateContext from '../context/PrivateContext';
 
-export interface SubMenuProps {
-  style?: React.CSSProperties;
-  className?: string;
-
-  title?: React.ReactNode;
+export interface SubMenuProps extends Omit<SubMenuType, 'key' | 'children'> {
   children?: React.ReactNode;
 
-  disabled?: boolean;
   /** @private Used for rest popup. Do not use in your prod */
   internalPopupClose?: boolean;
 
@@ -45,24 +34,6 @@ export interface SubMenuProps {
   /** @private Do not use. Private warning empty usage */
   warnKey?: boolean;
 
-  // >>>>> Icon
-  itemIcon?: RenderIconType;
-  expandIcon?: RenderIconType;
-
-  // >>>>> Active
-  onMouseEnter?: MenuHoverEventHandler;
-  onMouseLeave?: MenuHoverEventHandler;
-
-  // >>>>> Popup
-  popupClassName?: string;
-  popupOffset?: number[];
-
-  // >>>>> Events
-  onClick?: MenuClickEventHandler;
-  onTitleClick?: (info: MenuTitleInfo) => void;
-  onTitleMouseEnter?: MenuHoverEventHandler;
-  onTitleMouseLeave?: MenuHoverEventHandler;
-
   // >>>>>>>>>>>>>>>>>>>>> Next  Round <<<<<<<<<<<<<<<<<<<<<<<
   // onDestroy?: DestroyEventHandler;
 }

src/interface.ts

@@ -1,5 +1,74 @@
 import type * as React from 'react';
 
+// ========================= Options =========================
+interface ItemSharedProps {
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export interface SubMenuType extends ItemSharedProps {
+  title?: React.ReactNode;
+
+  children: ItemType[];
+
+  disabled?: boolean;
+
+  key: string;
+
+  // >>>>> Icon
+  itemIcon?: RenderIconType;
+  expandIcon?: RenderIconType;
+
+  // >>>>> Active
+  onMouseEnter?: MenuHoverEventHandler;
+  onMouseLeave?: MenuHoverEventHandler;
+
+  // >>>>> Popup
+  popupClassName?: string;
+  popupOffset?: number[];
+
+  // >>>>> Events
+  onClick?: MenuClickEventHandler;
+  onTitleClick?: (info: MenuTitleInfo) => void;
+  onTitleMouseEnter?: MenuHoverEventHandler;
+  onTitleMouseLeave?: MenuHoverEventHandler;
+}
+
+export interface MenuItemType extends ItemSharedProps {
+  title?: React.ReactNode;
+
+  disabled?: boolean;
+
+  itemIcon?: RenderIconType;
+
+  key: string;
+
+  // >>>>> Active
+  onMouseEnter?: MenuHoverEventHandler;
+  onMouseLeave?: MenuHoverEventHandler;
+
+  // >>>>> Events
+  onClick?: MenuClickEventHandler;
+}
+
+export interface MenuItemGroupType extends ItemSharedProps {
+  type: 'group';
+
+  title?: React.ReactNode;
+
+  children?: ItemType[];
+}
+
+export interface MenuDividerType extends ItemSharedProps {
+  type: 'divider';
+}
+
+export type ItemType =
+  | SubMenuType
+  | MenuItemType
+  | MenuItemGroupType
+  | MenuDividerType;
+
 // ========================== Basic ==========================
 export type MenuMode = 'horizontal' | 'vertical' | 'inline';