Fix inlineCollpased Menu remains inline mode instead of vertical

close ant-design/ant-design-pro#2783
close ant-design/ant-design-pro#2782
close ant-design/ant-design-pro#2786
This commit is contained in:
afc163 2018-11-07 11:36:05 +08:00
parent 5fa67a90bc
commit 85a758c7ec

View File

@ -131,14 +131,21 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
this.inlineOpenKeys = [];
}
}
restoreModeVerticalFromInline() {
if (this.switchingModeFromInline) {
this.switchingModeFromInline = false;
this.setState({});
}
}
handleTransitionEnd = (e: TransitionEvent) => {
// when inlineCollapsed menu width animation finished
// https://github.com/ant-design/ant-design/issues/12864
if (e.propertyName === 'width' &&
e.target === e.currentTarget &&
this.switchingModeFromInline) {
this.switchingModeFromInline = false;
this.setState({});
const widthCollapsed = e.propertyName === 'width' && e.target === e.currentTarget;
// Fix for <Menu style={{ width: '100%' }} />, the width transition won't trigger when menu is collapsed
// https://github.com/ant-design/ant-design-pro/issues/2783
const iconScaled = e.propertyName === 'font-size' && (e.target as HTMLElement).className.indexOf('anticon') >= 0;
if (widthCollapsed || iconScaled) {
this.restoreModeVerticalFromInline();
}
}
handleClick = (e: ClickParam) => {