diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 052b27d7..5e28af13 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -47,7 +47,7 @@ const motionMap: Record = { }; export default () => { - const [mode, setMode] = React.useState('horizontal'); + const [mode, setMode] = React.useState('inline'); const [narrow, setNarrow] = React.useState(false); const [inlineCollapsed, setInlineCollapsed] = React.useState(false); const [forceRender, setForceRender] = React.useState(false); @@ -105,6 +105,7 @@ export default () => {
= props => { [registerPath, unregisterPath], ); - const pathUserContext = React.useMemo(() => ({ isSubPathKey, getKeyPath }), [ + const pathUserContext = React.useMemo(() => ({ isSubPathKey }), [ isSubPathKey, - getKeyPath, ]); React.useEffect(() => { diff --git a/src/MenuItem.tsx b/src/MenuItem.tsx index 275b36f6..11e220d8 100644 --- a/src/MenuItem.tsx +++ b/src/MenuItem.tsx @@ -15,11 +15,7 @@ import useActive from './hooks/useActive'; import { warnItemProp } from './utils/warnUtil'; import Icon from './Icon'; import useDirectionStyle from './hooks/useDirectionStyle'; -import { - PathUserContext, - useKeyPath, - useMeasure, -} from './context/MeasureContext'; +import { useFullPath, useMeasure } from './context/PathContext'; import { useMenuId } from './context/IdContext'; export interface MenuItemProps @@ -122,8 +118,7 @@ const InternalMenuItem = (props: MenuItemProps) => { const elementRef = React.useRef(); const mergedDisabled = contextDisabled || disabled; - const { getKeyPath } = React.useContext(PathUserContext); - const connectedKeys = getKeyPath(eventKey); + const connectedKeys = useFullPath(eventKey); // ============================= Info ============================= const getEventInfo = ( @@ -240,7 +235,7 @@ function MenuItem(props: MenuItemProps): React.ReactElement { // ==================== Record KeyPath ==================== const measure = useMeasure(); - const connectedKeyPath = useKeyPath(eventKey); + const connectedKeyPath = useFullPath(eventKey); // eslint-disable-next-line consistent-return React.useEffect(() => { diff --git a/src/MenuItemGroup.tsx b/src/MenuItemGroup.tsx index bf28b3af..c27c3f5d 100644 --- a/src/MenuItemGroup.tsx +++ b/src/MenuItemGroup.tsx @@ -2,10 +2,7 @@ import * as React from 'react'; import classNames from 'classnames'; import { parseChildren } from './utils/nodeUtil'; import { MenuContext } from './context/MenuContext'; -import { - useKeyPath, - useMeasure, -} from './context/MeasureContext'; +import { useFullPath, useMeasure } from './context/PathContext'; export interface MenuItemGroupProps { className?: string; @@ -48,7 +45,7 @@ export default function MenuItemGroup({ children, ...props }: MenuItemGroupProps): React.ReactElement { - const connectedKeyPath = useKeyPath(props.eventKey); + const connectedKeyPath = useFullPath(props.eventKey); const childList: React.ReactElement[] = parseChildren( children, connectedKeyPath, diff --git a/src/SubMenu/index.tsx b/src/SubMenu/index.tsx index a9c657b5..6caec568 100644 --- a/src/SubMenu/index.tsx +++ b/src/SubMenu/index.tsx @@ -19,11 +19,11 @@ import { warnItemProp } from '../utils/warnUtil'; import useDirectionStyle from '../hooks/useDirectionStyle'; import InlineSubMenuList from './InlineSubMenuList'; import { - PathConnectContext, + PathTrackerContext, PathUserContext, - useKeyPath, + useFullPath, useMeasure, -} from '../context/MeasureContext'; +} from '../context/PathContext'; import { useMenuId } from '../context/IdContext'; export interface SubMenuProps { @@ -122,8 +122,8 @@ const InternalSubMenu = (props: SubMenuProps) => { onActive, } = React.useContext(MenuContext); - const { isSubPathKey, getKeyPath } = React.useContext(PathUserContext); - const keyPath = getKeyPath(eventKey); + const { isSubPathKey } = React.useContext(PathUserContext); + const connectedPath = useFullPath(); const subMenuPrefixCls = `${prefixCls}-submenu`; const mergedDisabled = contextDisabled || disabled; @@ -189,7 +189,7 @@ const InternalSubMenu = (props: SubMenuProps) => { }, [mode, active, activeKey, childrenActive, eventKey, isSubPathKey]); // ========================== DirectionStyle ========================== - const directionStyle = useDirectionStyle(keyPath.length); + const directionStyle = useDirectionStyle(connectedPath.length); // =============================== Events =============================== // >>>> Title click @@ -319,7 +319,7 @@ const InternalSubMenu = (props: SubMenuProps) => { {/* Inline mode */} {!overflowDisabled && ( - + {children} )} @@ -331,7 +331,7 @@ const InternalSubMenu = (props: SubMenuProps) => { export default function SubMenu(props: SubMenuProps) { const { eventKey, children } = props; - const connectedKeyPath = useKeyPath(eventKey); + const connectedKeyPath = useFullPath(eventKey); const childList: React.ReactElement[] = parseChildren( children, connectedKeyPath, @@ -351,15 +351,18 @@ export default function SubMenu(props: SubMenuProps) { } }, [connectedKeyPath]); - if (measure) { - return ( - - {childList} - - ); - } + let renderNode: React.ReactNode; // ======================== Render ======================== + if (measure) { + renderNode = childList; + } else { + renderNode = {childList}; + } - return {childList}; + return ( + + {renderNode} + + ); } diff --git a/src/context/MeasureContext.tsx b/src/context/PathContext.tsx similarity index 66% rename from src/context/MeasureContext.tsx rename to src/context/PathContext.tsx index ff870422..6ebadbeb 100644 --- a/src/context/MeasureContext.tsx +++ b/src/context/PathContext.tsx @@ -16,21 +16,21 @@ export function useMeasure() { return React.useContext(PathRegisterContext); } -// ========================= Path Connect ========================== -export const PathConnectContext = React.createContext(EmptyList); - -export function useKeyPath(eventKey: string) { - const parentKeyPath = React.useContext(PathConnectContext); - return React.useMemo(() => [...parentKeyPath, eventKey], [ - parentKeyPath, - eventKey, - ]); +// ========================= Path Tracker ========================== +export const PathTrackerContext = React.createContext(EmptyList); + +export function useFullPath(eventKey?: string) { + const parentKeyPath = React.useContext(PathTrackerContext); + return React.useMemo( + () => + eventKey !== undefined ? [...parentKeyPath, eventKey] : parentKeyPath, + [parentKeyPath, eventKey], + ); } // =========================== Path User =========================== export interface PathUserContextProps { isSubPathKey: (pathKeys: string[], eventKey: string) => boolean; - getKeyPath: (eventKey: string) => string[]; } export const PathUserContext = React.createContext(null); diff --git a/tests/__snapshots__/Keyboard.spec.tsx.snap b/tests/__snapshots__/Keyboard.spec.tsx.snap index b14ee2e7..32635ef6 100644 --- a/tests/__snapshots__/Keyboard.spec.tsx.snap +++ b/tests/__snapshots__/Keyboard.spec.tsx.snap @@ -32,7 +32,7 @@ exports[`Menu.Keyboard no data-menu-id by init 1`] = `