diff --git a/components/layout/style/index.less b/components/layout/style/index.less index 78b3619ad7..7304a330a5 100644 --- a/components/layout/style/index.less +++ b/components/layout/style/index.less @@ -40,7 +40,7 @@ } &-sider { - transition: all .15s @ease-in-out; + transition: all .2s; position: relative; background: @layout-sider-background; diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md index 0138526272..df9a560137 100755 --- a/components/menu/demo/sider-current.md +++ b/components/menu/demo/sider-current.md @@ -9,56 +9,37 @@ title: 点击菜单,收起其他展开的所有菜单,保持菜单聚焦简洁。 -> 该用法要求 antd@2.0+ - ## en-US Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact. -> This demo is for antd@2.0+. - ````jsx import { Menu, Icon } from 'antd'; const SubMenu = Menu.SubMenu; class Sider extends React.Component { + // submenu keys of first level + rootSubmenuKeys = ['sub1', 'sub2', 'sub4']; state = { - current: '1', - openKeys: [], - } - handleClick = (e) => { - console.log('Clicked: ', e); - this.setState({ current: e.key }); - } + openKeys: ['sub1'], + }; onOpenChange = (openKeys) => { - const state = this.state; - const latestOpenKey = openKeys.find(key => !(state.openKeys.indexOf(key) > -1)); - const latestCloseKey = state.openKeys.find(key => !(openKeys.indexOf(key) > -1)); - - let nextOpenKeys = []; - if (latestOpenKey) { - nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey); + const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1); + if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) { + this.setState({ openKeys }); + } else { + this.setState({ + openKeys: latestOpenKey ? [latestOpenKey] : [], + }); } - if (latestCloseKey) { - nextOpenKeys = this.getAncestorKeys(latestCloseKey); - } - this.setState({ openKeys: nextOpenKeys }); - } - getAncestorKeys = (key) => { - const map = { - sub3: ['sub2'], - }; - return map[key] || []; } render() { return ( Navigation One}> Option 1 diff --git a/components/menu/index.tsx b/components/menu/index.tsx index 629aa3ee5a..32b9df4ab8 100644 --- a/components/menu/index.tsx +++ b/components/menu/index.tsx @@ -137,7 +137,7 @@ export default class Menu extends React.Component { } getRealMenuMode() { const inlineCollapsed = this.getInlineCollapsed(); - if (this.switchModeFromInline && inlineCollapsed && !('openKeys' in this.props)) { + if (this.switchModeFromInline && inlineCollapsed) { return 'inline'; } const { mode } = this.props; diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 9002fcad24..c547bdd3dc 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -14,7 +14,7 @@ color: @text-color; background: @component-background; line-height: 46px; - transition: background .3s @ease-in-out, width .15s @ease-in-out; + transition: background .3s, width .2s; &-hidden { display: none;