Hide menu when collapsedWidth is 0, close ant-design#8587

lovekonakona · Dec 15, 2017 · 754d330 · 754d330
1 parent 7521348
commit 754d330
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
@@ -79,6 +79,7 @@ export default class Sider extends React.Component<SiderProps, SliderState> {
 
   static childContextTypes = {
     siderCollapsed: PropTypes.bool,
+    collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   };
 
   static contextTypes = {
@@ -113,6 +114,7 @@ export default class Sider extends React.Component<SiderProps, SliderState> {
   getChildContext() {
     return {
       siderCollapsed: this.state.collapsed,
+      collapsedWidth: this.props.collapsedWidth,
     };
   }
 
@@ -182,7 +184,7 @@ export default class Sider extends React.Component<SiderProps, SliderState> {
       'defaultCollapsed', 'onCollapse', 'breakpoint']);
     const siderWidth = this.state.collapsed ? collapsedWidth : width;
     // special trigger when collapsedWidth == 0
-    const zeroWidthTrigger = collapsedWidth === 0 || collapsedWidth === '0' ? (
+    const zeroWidthTrigger = collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px' ? (
       <span onClick={this.toggle} className={`${prefixCls}-zero-width-trigger`}>
         <Icon type="bars" />
       </span>
@@ -212,7 +214,7 @@ export default class Sider extends React.Component<SiderProps, SliderState> {
       [`${prefixCls}-collapsed`]: !!this.state.collapsed,
       [`${prefixCls}-has-trigger`]: !!trigger,
       [`${prefixCls}-below`]: !!this.state.below,
-      [`${prefixCls}-zero-width`]: siderWidth === 0 || siderWidth === '0',
+      [`${prefixCls}-zero-width`]: siderWidth === 0 || siderWidth === '0' || siderWidth === '0px',
     });
     return (
       <div className={siderCls} {...divProps} style={divStyle}>

diff --git a/components/menu/index.tsx b/components/menu/index.tsx
@@ -68,6 +68,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
   };
   static contextTypes = {
     siderCollapsed: PropTypes.bool,
+    collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   };
   switchModeFromInline: boolean;
   inlineOpenKeys: string[] = [];
@@ -225,6 +226,15 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
       menuProps.openAnimation = menuOpenAnimation;
     }
 
+    // https://github.com/ant-design/ant-design/issues/8587
+    const { collapsedWidth } = this.context;
+    if (
+      this.getInlineCollapsed() &&
+      (collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px')
+    ) {
+      return null;
+    }
+
     return <RcMenu {...this.props} {...menuProps} />;
   }
 }