import React from 'react' ; import type { CSSMotionProps } from 'rc-motion' ; import Menu , { ItemGroup as MenuItemGroup } from '../../src' ; import type { MenuProps } from '../../src' ; import '../../assets/index.less' ; import '../../assets/menu.less' ; import type { MenuInfo } from '@/interface' ; const collapseNode = ( ) => { return { height : 0 } ; } ; const expandNode = node => { return { height : node . scrollHeight } ; } ; const horizontalMotion = { motionName : 'rc-menu-open-slide-up' , motionAppear : true , motionEnter : true , motionLeave : true , } ; const verticalMotion = { motionName : 'rc-menu-open-zoom' , motionAppear : true , motionEnter : true , motionLeave : true , } ; const inlineMotion = { motionName : 'rc-menu-collapse' , motionAppear : true , onAppearStart : collapseNode , onAppearActive : expandNode , onEnterStart : collapseNode , onEnterActive : expandNode , onLeaveStart : expandNode , onLeaveActive : collapseNode , } ; const motionMap = { horizontal : horizontalMotion , inline : inlineMotion , vertical : verticalMotion , } ; export default ( ) => { const [ mode , setMode ] = React . useState < MenuProps [ 'mode' ] > ( 'horizontal' ) ; const [ narrow , setNarrow ] = React . useState ( false ) ; const [ inlineCollapsed , setInlineCollapsed ] = React . useState ( false ) ; const [ forceRender , setForceRender ] = React . useState ( false ) ; const [ openKeys , setOpenKeys ] = React . useState < string [ ] > ( [ ] ) ; const onRootClick = ( info ) => { console . log ( 'Root Menu Item Click:' , info ) ; } ; const onSubMenuClick = ( info ) => { console . log ( 'Sub Menu Item Click:' , info ) ; } ; const onClick = ( info ) => { console . log ( 'Menu Item Click:' , info ) ; } ; return ( < > < div > < select value = { mode } onChange = { e => setMode ( e . target . value as any ) } > < option value = "inline" > Inline < /option> < option value = "vertical" > Vertical < /option> < option value = "horizontal" > Horizontal < /option> < /select> { } < button onClick = { ( ) => { setNarrow ( ! narrow ) ; } } > Narrow : { String ( narrow ) } < /button> { } < button onClick = { ( ) => { setInlineCollapsed ( ! inlineCollapsed ) ; } } > Inline Collapsed : { String ( inlineCollapsed ) } < /button> { } < button onClick = { ( ) => { setForceRender ( ! forceRender ) ; } } > Force Render : { String ( forceRender ) } < /button> < /div> < div style = { { width : narrow ? 350 : undefined } } > < Menu defaultOpenKeys = { [ 'sub' , 'nest' ] } forceSubMenuRender = { forceRender } mode = { mode } style = { { width : mode === 'horizontal' ? undefined : 256 } } onClick = { onRootClick } defaultMotions = { motionMap } inlineCollapsed = { inlineCollapsed } onOpenChange = { newOpenKeys => setOpenKeys ( newOpenKeys ) } > < Menu . Item key = "mail" > < a href = "http://www.taobao.com" > Navigation One < /a> < /Menu.Item> < Menu . Item key = "next" onClick = { onClick } > Next Item < /Menu.Item> < Menu . SubMenu title = "Sub Menu" key = "sub" onClick = { onSubMenuClick } > < Menu . Item key = "sub1" onClick = { onClick } > Sub Item 1 < /Menu.Item> < Menu . Item key = "sub2" > Sub Item 2 < /Menu.Item> < Menu . SubMenu title = "Nest Menu" key = "nest" > < MenuItemGroup title = "group 1" key = "grp1" > < Menu . Item key = "21" > 2 < /Menu.Item> < Menu . Item key = "22" > 3 < /Menu.Item> < /MenuItemGroup> < MenuItemGroup title = "group 2" key = "grp2" > < Menu . Item key = "31" > 4 < /Menu.Item> < Menu . Item key = "32" > 5 < /Menu.Item> < /MenuItemGroup> < /Menu.SubMenu> < /Menu.SubMenu> < Menu . Item key = "disabled" disabled > Disabled Item < /Menu.Item> < Menu . SubMenu title = "Disabled Sub Menu" key = "disabled-sub" onClick = { onSubMenuClick } disabled > < Menu . Item key = "dis-sub1" onClick = { onClick } > Disabled Sub Item 1 < /Menu.Item> < /Menu.SubMenu> < /Menu> < /div> < />); } ;