chore: refactor internal menu with hooks (#34433)

* chore: refactor menu with hooks

* chore: clean up

components/menu/index.tsx

@@ -3,15 +3,14 @@ import RcMenu, { ItemGroup, MenuProps as RcMenuProps } from 'rc-menu';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
-import memoize from 'memoize-one';
 import SubMenu, { SubMenuProps } from './SubMenu';
 import Item, { MenuItemProps } from './MenuItem';
-import { ConfigConsumer, ConfigConsumerProps, DirectionType } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
 import { SiderContext, SiderContextProps } from '../layout/Sider';
 import collapseMotion from '../_util/motion';
 import { cloneElement } from '../_util/reactNode';
-import MenuContext, { MenuTheme, MenuContextProps } from './MenuContext';
+import MenuContext, { MenuTheme } from './MenuContext';
 import MenuDivider from './MenuDivider';
 
 export { MenuDividerProps } from './MenuDivider';
@@ -37,14 +36,25 @@ type InternalMenuProps = MenuProps &
     collapsedWidth?: string | number;
   };
 
-class InternalMenu extends React.Component<InternalMenuProps> {
+function InternalMenu(props: InternalMenuProps) {
-  static defaultProps: Partial<MenuProps> = {
+  const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext);
-    theme: 'light', // or dark
-  };
 
-  constructor(props: InternalMenuProps) {
+  const rootPrefixCls = getPrefixCls();
-    super(props);
 
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    theme = 'light',
+    expandIcon,
+    _internalDisableMenuItemTitleTooltip,
+    inlineCollapsed,
+    siderCollapsed,
+    ...restProps
+  } = props;
+
+  const passedProps = omit(restProps, ['collapsedWidth']);
+
+  // ======================== Warning ==========================
   devWarning(
     !('inlineCollapsed' in props && props.mode !== 'inline'),
     'Menu',
@@ -56,47 +66,15 @@ class InternalMenu extends React.Component<InternalMenuProps> {
     'Menu',
     '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
   );
-  }
 
-  getInlineCollapsed() {
+  // ======================== Collapsed ========================
-    const { inlineCollapsed, siderCollapsed } = this.props;
+  // Inline Collapsed
+  const mergedInlineCollapsed = React.useMemo(() => {
     if (siderCollapsed !== undefined) {
       return siderCollapsed;
     }
     return inlineCollapsed;
-  }
+  }, [inlineCollapsed, siderCollapsed]);
-
-  getMemoizedContextValue = memoize(
-    (
-      cls: string,
-      collapsed: boolean | undefined,
-      the: MenuTheme | undefined,
-      dir: DirectionType,
-      disableMenuItemTitleTooltip: boolean | undefined,
-    ): MenuContextProps => ({
-      prefixCls: cls,
-      inlineCollapsed: collapsed || false,
-      antdMenuTheme: the,
-      direction: dir,
-      firstLevel: true,
-      disableMenuItemTitleTooltip,
-    }),
-  );
-
-  renderMenu = ({ getPopupContainer, getPrefixCls, direction }: ConfigConsumerProps) => {
-    const rootPrefixCls = getPrefixCls();
-
-    const {
-      prefixCls: customizePrefixCls,
-      className,
-      theme,
-      expandIcon,
-      _internalDisableMenuItemTitleTooltip,
-      ...restProps
-    } = this.props;
-
-    const passedProps = omit(restProps, ['siderCollapsed', 'collapsedWidth']);
-    const inlineCollapsed = this.getInlineCollapsed();
 
   const defaultMotions = {
     horizontal: { motionName: `${rootPrefixCls}-slide-up` },
@@ -107,15 +85,20 @@ class InternalMenu extends React.Component<InternalMenuProps> {
   const prefixCls = getPrefixCls('menu', customizePrefixCls);
   const menuClassName = classNames(`${prefixCls}-${theme}`, className);
 
-    // TODO: refactor menu with function component
+  // ======================== Context ==========================
-    const contextValue = this.getMemoizedContextValue(
+  const contextValue = React.useMemo(
+    () => ({
       prefixCls,
-      inlineCollapsed,
+      inlineCollapsed: mergedInlineCollapsed || false,
-      theme,
+      antdMenuTheme: theme,
       direction,
-      _internalDisableMenuItemTitleTooltip,
+      firstLevel: true,
+      disableMenuItemTitleTooltip: _internalDisableMenuItemTitleTooltip,
+    }),
+    [prefixCls, mergedInlineCollapsed, theme, direction, _internalDisableMenuItemTitleTooltip],
   );
 
+  // ========================= Render ==========================
   return (
     <MenuContext.Provider value={contextValue}>
       <RcMenu
@@ -123,7 +106,7 @@ class InternalMenu extends React.Component<InternalMenuProps> {
         overflowedIndicator={<EllipsisOutlined />}
         overflowedIndicatorPopupClassName={`${prefixCls}-${theme}`}
         {...passedProps}
-          inlineCollapsed={inlineCollapsed}
+        inlineCollapsed={mergedInlineCollapsed}
         className={menuClassName}
         prefixCls={prefixCls}
         direction={direction}
@@ -134,11 +117,6 @@ class InternalMenu extends React.Component<InternalMenuProps> {
       />
     </MenuContext.Provider>
   );
-  };
-
-  render() {
-    return <ConfigConsumer>{this.renderMenu}</ConfigConsumer>;
-  }
 }
 
 // We should keep this as ref-able