feat: add api inlineMaxLevel

inline menu, specify at most a certain level of submenu, deeper submenu will right popover.

Author: z1399

README.md

@@ -219,6 +219,12 @@ ReactDOM.render(
             <th>24</th>
             <td>Padding level multiplier. Right or left padding depends on param "direction".</td>
         </tr>
+        <tr>
+            <td>inlineMaxLevel</td>
+            <td>Number</td>
+            <th></th>
+            <td>inline menu, specify at most a certain level of submenu, deeper submenu will right popover</td>
+        </tr>
     </tbody>
 </table>
 

assets/index.less

@@ -227,6 +227,21 @@
     }
   }
 
+  &-inline {
+    .@{menuPrefixCls}-submenu-multi {
+      .@{menuPrefixCls}-submenu-title {
+        .@{menuPrefixCls}-submenu-arrow {
+          transform: rotate(0);
+        }
+      }
+    }
+    .@{menuPrefixCls}-submenu-multi.@{menuPrefixCls}-submenu-open {
+      .@{menuPrefixCls}-submenu-title {
+        background-color: #eaf8fe;
+      }
+    }
+  }
+
   &-vertical&-sub,
   &-vertical-left&-sub,
   &-vertical-right&-sub {

docs/demo/antd-switch-multi.md

@@ -0,0 +1,5 @@
+## antd-switch-multi
+
+inline Menu, up to two level menus, more submenus right popover
+
+<code src="../examples/antd-switch-multi.tsx">

docs/examples/antd-switch-multi.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable no-console, react/require-default-props, no-param-reassign */
+
+import React from 'react';
+import { CommonMenu, inlineMotion } from './antd';
+import '../../assets/index.less';
+
+const Demo = () => {
+  const [inline, setInline] = React.useState(false);
+  const [openKeys, setOpenKey] = React.useState(['1']);
+
+  let restProps = {};
+  if (inline) {
+    restProps = { motion: inlineMotion };
+  } else {
+    restProps = { openAnimation: 'zoom' };
+  }
+
+  return (
+    <div style={{ margin: 20, width: 200 }}>
+      <label>
+        <input
+          type="checkbox"
+          checked={inline}
+          onChange={() => setInline(!inline)}
+        />{' '}
+        Inline
+      </label>
+      <CommonMenu
+        mode="inline"
+        inlineMaxLevel={2}
+        openKeys={openKeys}
+        onOpenChange={keys => {
+          console.error('Open Keys Changed:', keys);
+          setOpenKey(keys);
+        }}
+        inlineCollapsed={!inline}
+        {...restProps}
+      />
+    </div>
+  );
+};
+
+export default Demo;
+/* eslint-enable */

src/Menu.tsx

@@ -20,6 +20,7 @@ import { parseChildren } from './utils/nodeUtil';
 import MenuContextProvider from './context/MenuContext';
 import useMemoCallback from './hooks/useMemoCallback';
 import { warnItemProp } from './utils/warnUtil';
+import { genMultiMode } from './utils/multiModeUtil';
 import SubMenu from './SubMenu';
 import useAccessibility from './hooks/useAccessibility';
 import useUUID from './hooks/useUUID';
@@ -61,6 +62,7 @@ export interface MenuProps
 
   // Mode
   mode?: MenuMode;
+  inlineMaxLevel?: number;
   inlineCollapsed?: boolean;
 
   // Open control
@@ -130,6 +132,7 @@ const Menu: React.FC<MenuProps> = props => {
 
     // Mode
     mode = 'vertical',
+    inlineMaxLevel,
     inlineCollapsed,
 
     // Disabled
@@ -233,8 +236,9 @@ const Menu: React.FC<MenuProps> = props => {
   };
 
   // >>>>> Cache & Reset open keys when inlineCollapsed changed
-  const [inlineCacheOpenKeys, setInlineCacheOpenKeys] =
-    React.useState(mergedOpenKeys);
+  const [inlineCacheOpenKeys, setInlineCacheOpenKeys] = React.useState(
+    mergedOpenKeys,
+  );
 
   const isInlineMode = mergedMode === 'inline';
 
@@ -279,10 +283,9 @@ const Menu: React.FC<MenuProps> = props => {
     [registerPath, unregisterPath],
   );
 
-  const pathUserContext = React.useMemo(
-    () => ({ isSubPathKey }),
-    [isSubPathKey],
-  );
+  const pathUserContext = React.useMemo(() => ({ isSubPathKey }), [
+    isSubPathKey,
+  ]);
 
   React.useEffect(() => {
     refreshOverflowKeys(
@@ -369,6 +372,23 @@ const Menu: React.FC<MenuProps> = props => {
     if (!multiple && mergedOpenKeys.length && mergedMode !== 'inline') {
       triggerOpenKeys(EMPTY_LIST);
     }
+
+    const isMultiMode = genMultiMode(
+      mergedOpenKeys,
+      mergedMode,
+      inlineMaxLevel,
+    );
+    if (!multiple && isMultiMode.isMultiPopup) {
+      const inlineLevelPathKeys =
+        info.keyPath[info.keyPath.length - inlineMaxLevel + 1];
+      if (inlineLevelPathKeys) {
+        const subPathKeys = getSubPathKeys(inlineLevelPathKeys);
+        const newOpenKeys = mergedOpenKeys.filter(k => !subPathKeys.has(k));
+        triggerOpenKeys(newOpenKeys);
+      } else {
+        triggerOpenKeys(EMPTY_LIST);
+      }
+    }
   };
 
   // ========================= Open =========================
@@ -506,6 +526,7 @@ const Menu: React.FC<MenuProps> = props => {
       <MenuContextProvider
         prefixCls={prefixCls}
         mode={mergedMode}
+        inlineMaxLevel={inlineMaxLevel}
         openKeys={mergedOpenKeys}
         rtl={isRtl}
         // Disabled

src/SubMenu/index.tsx

@@ -17,6 +17,7 @@ import PopupTrigger from './PopupTrigger';
 import Icon from '../Icon';
 import useActive from '../hooks/useActive';
 import { warnItemProp } from '../utils/warnUtil';
+import { genMultiMode } from '../utils/multiModeUtil';
 import useDirectionStyle from '../hooks/useDirectionStyle';
 import InlineSubMenuList from './InlineSubMenuList';
 import {
@@ -104,6 +105,7 @@ const InternalSubMenu = (props: SubMenuProps) => {
   const {
     prefixCls,
     mode,
+    inlineMaxLevel,
     openKeys,
 
     // Disabled
@@ -129,6 +131,7 @@ const InternalSubMenu = (props: SubMenuProps) => {
 
   const { isSubPathKey } = React.useContext(PathUserContext);
   const connectedPath = useFullPath();
+  const isMultiMode = genMultiMode(connectedPath, mode, inlineMaxLevel);
 
   const subMenuPrefixCls = `${prefixCls}-submenu`;
   const mergedDisabled = contextDisabled || disabled;
@@ -168,25 +171,23 @@ const InternalSubMenu = (props: SubMenuProps) => {
     }
   };
 
-  const onInternalMouseEnter: React.MouseEventHandler<HTMLLIElement> =
-    domEvent => {
-      triggerChildrenActive(true);
+  const onInternalMouseEnter: React.MouseEventHandler<HTMLLIElement> = domEvent => {
+    triggerChildrenActive(true);
 
-      onMouseEnter?.({
-        key: eventKey,
-        domEvent,
-      });
-    };
+    onMouseEnter?.({
+      key: eventKey,
+      domEvent,
+    });
+  };
 
-  const onInternalMouseLeave: React.MouseEventHandler<HTMLLIElement> =
-    domEvent => {
-      triggerChildrenActive(false);
+  const onInternalMouseLeave: React.MouseEventHandler<HTMLLIElement> = domEvent => {
+    triggerChildrenActive(false);
 
-      onMouseLeave?.({
-        key: eventKey,
-        domEvent,
-      });
-    };
+    onMouseLeave?.({
+      key: eventKey,
+      domEvent,
+    });
+  };
 
   const mergedActive = React.useMemo(() => {
     if (active) {
@@ -233,6 +234,9 @@ const InternalSubMenu = (props: SubMenuProps) => {
     if (mode !== 'inline') {
       onOpenChange(eventKey, newVisible);
     }
+    if (isMultiMode.isMultiPopup) {
+      onOpenChange(eventKey, newVisible);
+    }
   };
 
   /**
@@ -287,6 +291,10 @@ const InternalSubMenu = (props: SubMenuProps) => {
     triggerModeRef.current = connectedPath.length > 1 ? 'vertical' : mode;
   }
 
+  if (isMultiMode.isMultiPopup) {
+    triggerModeRef.current = 'vertical';
+  }
+
   if (!overflowDisabled) {
     const triggerMode = triggerModeRef.current;
 
@@ -296,17 +304,23 @@ const InternalSubMenu = (props: SubMenuProps) => {
       <PopupTrigger
         mode={triggerMode}
         prefixCls={subMenuPrefixCls}
-        visible={!internalPopupClose && open && mode !== 'inline'}
+        visible={
+          !internalPopupClose &&
+          open &&
+          (mode !== 'inline' || isMultiMode.isMultiPopup)
+        }
         popupClassName={popupClassName}
         popupOffset={popupOffset}
         popup={
           <MenuContextProvider
             // Special handle of horizontal mode
             mode={triggerMode === 'horizontal' ? 'vertical' : triggerMode}
           >
-            <SubMenuList id={popupId} ref={popupRef}>
-              {children}
-            </SubMenuList>
+            {!isMultiMode.isMulti || isMultiMode.isPopup ? (
+              <SubMenuList id={popupId} ref={popupRef}>
+                {children}
+              </SubMenuList>
+            ) : null}
           </MenuContextProvider>
         }
         disabled={mergedDisabled}
@@ -339,6 +353,7 @@ const InternalSubMenu = (props: SubMenuProps) => {
             [`${subMenuPrefixCls}-active`]: mergedActive,
             [`${subMenuPrefixCls}-selected`]: childrenSelected,
             [`${subMenuPrefixCls}-disabled`]: mergedDisabled,
+            [`${subMenuPrefixCls}-multi`]: isMultiMode.isMultiPopup,
           },
         )}
         onMouseEnter={onInternalMouseEnter}
@@ -347,7 +362,7 @@ const InternalSubMenu = (props: SubMenuProps) => {
         {titleNode}
 
         {/* Inline mode */}
-        {!overflowDisabled && (
+        {!overflowDisabled && (!isMultiMode.isMulti || !isMultiMode.isPopup) && (
           <InlineSubMenuList id={popupId} open={open} keyPath={connectedPath}>
             {children}
           </InlineSubMenuList>

src/context/MenuContext.tsx

@@ -17,6 +17,7 @@ export interface MenuContextProps {
 
   // Mode
   mode: MenuMode;
+  inlineMaxLevel?: number;
 
   // Disabled
   disabled?: boolean;

src/utils/multiModeUtil.ts

@@ -0,0 +1,31 @@
+import type { MenuMode } from '../interface';
+
+export function genMultiMode(
+  keys: string[],
+  mode?: MenuMode,
+  inlineMaxLevel?: number,
+): {
+  isMulti: boolean;
+  isPopup: boolean;
+  isMultiPopup: boolean;
+} {
+  const multi = {
+    isMulti: false,
+    isPopup: false,
+    isMultiPopup: false,
+  };
+
+  if (mode === 'inline' && typeof inlineMaxLevel === 'number') {
+    multi.isMulti = true;
+  }
+
+  if (keys?.length >= inlineMaxLevel) {
+    multi.isPopup = true;
+  }
+
+  if (multi.isMulti && multi.isPopup) {
+    multi.isMultiPopup = true;
+  }
+
+  return multi;
+}