import * as React from 'react' ; import CSSMotion from 'rc-motion' ; import { getMotion } from '../utils/motionUtil' ; import MenuContextProvider , { MenuContext } from '../context/MenuContext' ; import SubMenuList from './SubMenuList' ; import type { MenuMode } from '../interface' ; export interface InlineSubMenuListProps { id ? : string ; open : boolean ; keyPath : string [ ] ; children : React . ReactNode ; } export default function InlineSubMenuList ( { id , open , keyPath , children , } ) { const fixedMode = 'inline' ; const { prefixCls , forceSubMenuRender , motion , defaultMotions , mode , } = React . useContext ( MenuContext ) ; const sameModeRef = React . useRef ( false ) ; sameModeRef . current = mode === fixedMode ; const [ destroy , setDestroy ] = React . useState ( ! sameModeRef . current ) ; const mergedOpen = sameModeRef . current ? open : false ; React . useEffect ( ( ) => { if ( sameModeRef . current ) { setDestroy ( false ) ; } } , [ mode ] ) ; const mergedMotion = { ... getMotion ( fixedMode , motion , defaultMotions ) } ; if ( keyPath . length > 1 ) { mergedMotion . motionAppear = false ; } const originOnVisibleChanged = mergedMotion . onVisibleChanged ; mergedMotion . onVisibleChanged = newVisible => { if ( ! sameModeRef . current && ! newVisible ) { setDestroy ( true ) ; } return originOnVisibleChanged ?. ( newVisible ) ; } ; if ( destroy ) { return null ; } return ( < MenuContextProvider mode = { fixedMode } locked = { ! sameModeRef . current } > < CSSMotion visible = { mergedOpen } { ... mergedMotion } forceRender = { forceSubMenuRender } removeOnLeave = { false } leavedClassName = { `${ prefixCls }-hidden` } > { ( { className : motionClassName , style : motionStyle } ) => { return ( < SubMenuList id = { id } className = { motionClassName } style = { motionStyle } > { children } < /SubMenuList>); } } < /CSSMotion> < /MenuContextProvider>); }