fix(Nav): subNav should be selected if it has selected child, close #520

alibaba-fusion · Aug 7, 2019 · 3eca52f · 3eca52f
1 parent 57f7b2f
commit 3eca52f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/src/menu/view/sub-menu.jsx b/src/menu/view/sub-menu.jsx
@@ -87,6 +87,19 @@ export default class SubMenu extends Component {
         return openKeys.indexOf(_key) > -1;
     }
 
+    getChildSelected() {
+        const { _key, root } = this.props;
+        const { selectMode } = root.props;
+        const { selectedKeys } = root.state;
+
+        const _keyPos = root.k2n[_key].pos;
+
+        return (
+            !!selectMode &&
+            selectedKeys.some(key => root.k2n[key].pos.indexOf(_keyPos) > -1)
+        );
+    }
+
     handleMouseEnter(e) {
         this.handleOpen(true);
 
@@ -150,6 +163,8 @@ export default class SubMenu extends Component {
         } = root.props;
         const triggerType = propsTriggerType || rootTriggerType;
         const open = this.getOpen();
+        const isChildSelected = this.getChildSelected();
+
         const others = obj.pickOthers(
             Object.keys(SubMenu.propTypes),
             this.props
@@ -169,6 +184,10 @@ export default class SubMenu extends Component {
             type: 'submenu',
             component: 'div',
             parentMode,
+            className: cx({
+                [`${prefix}opened`]: open,
+                [`${prefix}child-selected`]: isChildSelected,
+            }),
         };
         const arrorProps = {
             type:
@@ -194,9 +213,6 @@ export default class SubMenu extends Component {
         } else {
             itemProps.onClick = this.handleClick;
         }
-        if (open) {
-            itemProps.className = `${prefix}opened`;
-        }
 
         const newSubMenuContentClassName = cx({
             [`${prefix}menu-sub-menu`]: true,

diff --git a/src/nav/scss/mixin.scss b/src/nav/scss/mixin.scss
@@ -128,6 +128,10 @@
             background-color: $openedBgColor;
             color: $openedColor;
         }
+        &.#{$css-prefix}child-selected {
+            background-color: $openedBgColor;
+            color: $openedColor;
+        }
 
         &:before {
             background-color: $activeColor;

diff --git a/test/nav/index-spec.js b/test/nav/index-spec.js
@@ -209,6 +209,21 @@ describe('Nav', () => {
         assert(wrapper.find('li.next-nav-group-label').length === 1);
     });
 
+    it('should support showChildSelected', () => {
+        wrapper = mount(
+            <Nav showChildSelected selectedKeys="1">
+                <SubNav label="Group label">
+                    <Item key="1">First</Item>
+                    <Item key="2">Second</Item>
+                </SubNav>
+            </Nav>
+        );
+
+        const subNavItem = wrapper.find('li.next-nav-sub-nav-item').at(0);
+
+        assert(subNavItem.find('.next-nav-item').hasClass('next-child-selected'));
+    });
+
     it('should support iconOnly', done => {
         wrapper = mount(
             <Nav iconOnly style={{ width: '200px' }}>