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,108 +36,87 @@ type InternalMenuProps = MenuProps &
     collapsedWidth?: string | number;
   };
 
-class InternalMenu extends React.Component<InternalMenuProps> {
-  static defaultProps: Partial<MenuProps> = {
-    theme: 'light', // or dark
-  };
+function InternalMenu(props: InternalMenuProps) {
+  const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext);
 
-  constructor(props: InternalMenuProps) {
-    super(props);
+  const rootPrefixCls = getPrefixCls();
 
-    devWarning(
-      !('inlineCollapsed' in props && props.mode !== 'inline'),
-      'Menu',
-      '`inlineCollapsed` should only be used when `mode` is inline.',
-    );
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    theme = 'light',
+    expandIcon,
+    _internalDisableMenuItemTitleTooltip,
+    inlineCollapsed,
+    siderCollapsed,
+    ...restProps
+  } = props;
 
-    devWarning(
-      !(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
-      'Menu',
-      '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
-    );
-  }
+  const passedProps = omit(restProps, ['collapsedWidth']);
 
-  getInlineCollapsed() {
-    const { inlineCollapsed, siderCollapsed } = this.props;
+  // ======================== Warning ==========================
+  devWarning(
+    !('inlineCollapsed' in props && props.mode !== 'inline'),
+    'Menu',
+    '`inlineCollapsed` should only be used when `mode` is inline.',
+  );
+
+  devWarning(
+    !(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
+    'Menu',
+    '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
+  );
+
+  // ======================== Collapsed ========================
+  // 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` },
-      inline: collapseMotion,
-      other: { motionName: `${rootPrefixCls}-zoom-big` },
-    };
-
-    const prefixCls = getPrefixCls('menu', customizePrefixCls);
-    const menuClassName = classNames(`${prefixCls}-${theme}`, className);
-
-    // TODO: refactor menu with function component
-    const contextValue = this.getMemoizedContextValue(
-      prefixCls,
-      inlineCollapsed,
-      theme,
-      direction,
-      _internalDisableMenuItemTitleTooltip,
-    );
-
-    return (
-      <MenuContext.Provider value={contextValue}>
-        <RcMenu
-          getPopupContainer={getPopupContainer}
-          overflowedIndicator={<EllipsisOutlined />}
-          overflowedIndicatorPopupClassName={`${prefixCls}-${theme}`}
-          {...passedProps}
-          inlineCollapsed={inlineCollapsed}
-          className={menuClassName}
-          prefixCls={prefixCls}
-          direction={direction}
-          defaultMotions={defaultMotions}
-          expandIcon={cloneElement(expandIcon, {
-            className: `${prefixCls}-submenu-expand-icon`,
-          })}
-        />
-      </MenuContext.Provider>
-    );
+  const defaultMotions = {
+    horizontal: { motionName: `${rootPrefixCls}-slide-up` },
+    inline: collapseMotion,
+    other: { motionName: `${rootPrefixCls}-zoom-big` },
   };
 
-  render() {
-    return <ConfigConsumer>{this.renderMenu}</ConfigConsumer>;
-  }
+  const prefixCls = getPrefixCls('menu', customizePrefixCls);
+  const menuClassName = classNames(`${prefixCls}-${theme}`, className);
+
+  // ======================== Context ==========================
+  const contextValue = React.useMemo(
+    () => ({
+      prefixCls,
+      inlineCollapsed: mergedInlineCollapsed || false,
+      antdMenuTheme: theme,
+      direction,
+      firstLevel: true,
+      disableMenuItemTitleTooltip: _internalDisableMenuItemTitleTooltip,
+    }),
+    [prefixCls, mergedInlineCollapsed, theme, direction, _internalDisableMenuItemTitleTooltip],
+  );
+
+  // ========================= Render ==========================
+  return (
+    <MenuContext.Provider value={contextValue}>
+      <RcMenu
+        getPopupContainer={getPopupContainer}
+        overflowedIndicator={<EllipsisOutlined />}
+        overflowedIndicatorPopupClassName={`${prefixCls}-${theme}`}
+        {...passedProps}
+        inlineCollapsed={mergedInlineCollapsed}
+        className={menuClassName}
+        prefixCls={prefixCls}
+        direction={direction}
+        defaultMotions={defaultMotions}
+        expandIcon={cloneElement(expandIcon, {
+          className: `${prefixCls}-submenu-expand-icon`,
+        })}
+      />
+    </MenuContext.Provider>
+  );
 }
 
 // We should keep this as ref-able