fix(Nav): correct inline level when iconOnly switched, close #1676

Author: youluna

src/menu/view/menu.jsx

@@ -82,7 +82,7 @@ const addIndicators = ({ children, lastVisibleIndex, prefix, renderMore }) => {
     return arr;
 };
 
-const getNewChildren = ({ children, root, lastVisibleIndex, hozInLine, prefix, renderMore }) => {
+const getNewChildren = ({ children, root, mode, lastVisibleIndex, hozInLine, prefix, renderMore }) => {
     const k2n = {};
     const p2n = {};
 
@@ -144,7 +144,7 @@ const getNewChildren = ({ children, root, lastVisibleIndex, hozInLine, prefix, r
                 // parent know children's inlineLevel
                 // if parent's mode is popup, then children's inlineLevel must be 1;
                 // else inlineLevel should add 1
-                const childLevel = (child.props.mode || props.root.props.mode) === 'popup' ? 1 : inlineLevel + 1;
+                const childLevel = (child.props.mode || mode) === 'popup' ? 1 : inlineLevel + 1;
 
                 switch (child.type.menuChildType) {
                     case 'submenu':
@@ -400,10 +400,7 @@ class Menu extends Component {
 
         const { newChildren, _k2n, _p2n } = getNewChildren({
             root: this,
-            hozInLine,
-            prefix,
-            children,
-            renderMore,
+            ...this.props,
         });
 
         const tabbableKey = focusable ? getFirstAvaliablelChildKey('0', _p2n) : undefined;
@@ -445,14 +442,10 @@ class Menu extends Component {
             state.focusedKey = nextProps.focusedKey;
         }
 
-        const { hozInLine, children, prefix, renderMore } = nextProps;
         const { newChildren, _k2n, _p2n } = getNewChildren({
             root: prevState.root,
-            hozInLine,
             lastVisibleIndex: prevState.lastVisibleIndex,
-            prefix,
-            children,
-            renderMore,
+            ...nextProps,
         });
 
         state.newChildren = newChildren;
@@ -592,15 +585,11 @@ class Menu extends Component {
 
     getUpdateChildren = () => {
         const { root, lastVisibleIndex } = this.state;
-        const { prefix, hozInLine, children, renderMore } = this.props;
 
         return getNewChildren({
             root,
-            hozInLine,
             lastVisibleIndex,
-            prefix,
-            children,
-            renderMore,
+            ...this.props,
         });
     };
 

test/nav/index-spec.js

@@ -411,6 +411,42 @@ describe('Nav', () => {
         }, 500);
     });
 
+    it('should support iconOnly switch state', (done) => {
+        wrapper = render(
+            <Nav iconOnly={false} mode={"inline"} style={{ width: '200px' }} openKeys="icononly-switch-subnav">
+                <SubNav icon="account" label="SubNav label" key="icononly-switch-subnav">
+                    <Item icon="account" key="1" id="icononly-switch-item-1">
+                        First
+                    </Item>
+                    <Item icon="account" key="2" id="icononly-switch-item-2">
+                        Second
+                    </Item>
+                </SubNav>
+            </Nav>
+        );
+
+        assert(document.getElementById("icononly-switch-item-1").style.paddingLeft === '40px');
+        assert(document.getElementById("icononly-switch-item-2").style.paddingLeft === '40px');
+
+        wrapper.setProps({
+            iconOnly: true,
+            mode: "popup"
+        });
+
+        assert(document.getElementById("icononly-switch-item-1").style.paddingLeft === '');
+        assert(document.getElementById("icononly-switch-item-2").style.paddingLeft === '');
+
+        wrapper.setProps({
+            iconOnly: false,
+            mode: "inline"
+        });
+
+        assert(document.getElementById("icononly-switch-item-1").style.paddingLeft === '40px');
+        assert(document.getElementById("icononly-switch-item-2").style.paddingLeft === '40px');
+
+        done();
+    });
+
     it('should support fixed', (done) => {
         wrapper = render(
             <Nav
@@ -439,13 +475,10 @@ describe('Nav', () => {
             </Nav>
         );
 
-        setTimeout(() => {
-            const popup = document.querySelectorAll('.fixed-popup-sub3');
-            assert(popup[0].style.top === '80px');
-            assert(popup[0].style.left === '68px');
-
-            done();
-        }, 500);
+        const popup = document.querySelectorAll('.fixed-popup-sub3');
+        assert(popup[0].style.top === '80px');
+        assert(popup[0].style.left === '68px');
 
+        done();
     });
 });