From 32a6222dcffc46cf11f36c7103d31432bc280ef8 Mon Sep 17 00:00:00 2001 From: zombiej Date: Mon, 3 May 2021 17:22:58 +0800 Subject: [PATCH 1/3] 9.0.0-alpha.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 63e45566..d834f4bf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-menu", - "version": "9.0.0-alpha.1", + "version": "9.0.0-alpha.2", "description": "menu ui component for react", "keywords": [ "react", From 2abd58946436cbbed8f969b0f53f2effd653861b Mon Sep 17 00:00:00 2001 From: zombiej Date: Thu, 6 May 2021 11:40:57 +0800 Subject: [PATCH 2/3] chore: Rename context to pathContext --- docs/examples/debug.tsx | 3 ++- src/Divider.tsx | 2 +- src/Menu.tsx | 2 +- src/MenuItem.tsx | 6 +----- src/MenuItemGroup.tsx | 5 +---- src/SubMenu/index.tsx | 2 +- src/context/{MeasureContext.tsx => PathContext.tsx} | 0 7 files changed, 7 insertions(+), 13 deletions(-) rename src/context/{MeasureContext.tsx => PathContext.tsx} (100%) 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 () => {
Date: Thu, 6 May 2021 12:00:42 +0800 Subject: [PATCH 3/3] test: Fix test case --- src/Menu.tsx | 3 +- src/MenuItem.tsx | 7 ++--- src/MenuItemGroup.tsx | 4 +-- src/SubMenu/index.tsx | 33 ++++++++++++---------- src/context/PathContext.tsx | 20 ++++++------- tests/__snapshots__/Keyboard.spec.tsx.snap | 2 +- 6 files changed, 35 insertions(+), 34 deletions(-) diff --git a/src/Menu.tsx b/src/Menu.tsx index b4a78216..f6969ec8 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -277,9 +277,8 @@ const Menu: React.FC = 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 78c45935..11e220d8 100644 --- a/src/MenuItem.tsx +++ b/src/MenuItem.tsx @@ -15,7 +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/PathContext'; +import { useFullPath, useMeasure } from './context/PathContext'; import { useMenuId } from './context/IdContext'; export interface MenuItemProps @@ -118,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 = ( @@ -236,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 42dfc78c..c27c3f5d 100644 --- a/src/MenuItemGroup.tsx +++ b/src/MenuItemGroup.tsx @@ -2,7 +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/PathContext'; +import { useFullPath, useMeasure } from './context/PathContext'; export interface MenuItemGroupProps { className?: string; @@ -45,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 71e3b6bb..6caec568 100644 --- a/src/SubMenu/index.tsx +++ b/src/SubMenu/index.tsx @@ -19,9 +19,9 @@ import { warnItemProp } from '../utils/warnUtil'; import useDirectionStyle from '../hooks/useDirectionStyle'; import InlineSubMenuList from './InlineSubMenuList'; import { - PathConnectContext, + PathTrackerContext, PathUserContext, - useKeyPath, + useFullPath, useMeasure, } from '../context/PathContext'; import { useMenuId } from '../context/IdContext'; @@ -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/PathContext.tsx b/src/context/PathContext.tsx index ff870422..6ebadbeb 100644 --- a/src/context/PathContext.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`] = `