refactor: solve menu circular dependency issue (#655)

Author: kiner-tang

src/MenuItemGroup.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { MenuContext } from './context/MenuContext';
 import { useFullPath, useMeasure } from './context/PathContext';
 import type { MenuItemGroupType } from './interface';
-import { parseChildren } from './utils/nodeUtil';
+import { parseChildren } from './utils/commonUtil';
 
 export interface MenuItemGroupProps
   extends Omit<MenuItemGroupType, 'type' | 'children' | 'label'> {

src/SubMenu/index.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import Overflow from 'rc-overflow';
 import warning from 'rc-util/lib/warning';
 import SubMenuList from './SubMenuList';
-import { parseChildren } from '../utils/nodeUtil';
+import { parseChildren } from '../utils/commonUtil';
 import type { MenuInfo, SubMenuType } from '../interface';
 import MenuContextProvider, { MenuContext } from '../context/MenuContext';
 import useMemoCallback from '../hooks/useMemoCallback';

src/utils/commonUtil.ts

@@ -0,0 +1,33 @@
+import toArray from "rc-util/lib/Children/toArray";
+import * as React from 'react';
+
+export function parseChildren(
+    children: React.ReactNode | undefined,
+    keyPath: string[],
+  ) {
+    return toArray(children).map((child, index) => {
+      if (React.isValidElement(child)) {
+        const { key } = child;
+        let eventKey = (child.props as any)?.eventKey ?? key;
+  
+        const emptyKey = eventKey === null || eventKey === undefined;
+  
+        if (emptyKey) {
+          eventKey = `tmp_key-${[...keyPath, index].join('-')}`;
+        }
+  
+        const cloneProps = {
+          key: eventKey,
+          eventKey,
+        } as any;
+  
+        if (process.env.NODE_ENV !== 'production' && emptyKey) {
+          cloneProps.warnKey = true;
+        }
+  
+        return React.cloneElement(child, cloneProps);
+      }
+  
+      return child;
+    });
+  }

src/utils/nodeUtil.tsx

@@ -1,38 +1,11 @@
 import * as React from 'react';
-import toArray from 'rc-util/lib/Children/toArray';
 import type { ItemType } from '../interface';
-import { Divider, MenuItem, MenuItemGroup, SubMenu } from '..';
+import MenuItemGroup from '../MenuItemGroup';
+import SubMenu from '../SubMenu';
+import Divider from '../Divider';
+import MenuItem from '../MenuItem';
+import { parseChildren } from './commonUtil';
 
-export function parseChildren(
-  children: React.ReactNode | undefined,
-  keyPath: string[],
-) {
-  return toArray(children).map((child, index) => {
-    if (React.isValidElement(child)) {
-      const { key } = child;
-      let eventKey = (child.props as any)?.eventKey ?? key;
-
-      const emptyKey = eventKey === null || eventKey === undefined;
-
-      if (emptyKey) {
-        eventKey = `tmp_key-${[...keyPath, index].join('-')}`;
-      }
-
-      const cloneProps = {
-        key: eventKey,
-        eventKey,
-      } as any;
-
-      if (process.env.NODE_ENV !== 'production' && emptyKey) {
-        cloneProps.warnKey = true;
-      }
-
-      return React.cloneElement(child, cloneProps);
-    }
-
-    return child;
-  });
-}
 
 function convertItemsToNodes(list: ItemType[]) {
   return (list || [])