fix(Menu): fix horizontal mode without selectinng styles.

uiwjs · Apr 5, 2018 · d4ad53f · d4ad53f
1 parent b819d1c
commit d4ad53f
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/src/menu/SubMenu.js b/src/menu/SubMenu.js
@@ -3,6 +3,26 @@ import { PropTypes } from '../utils/';
 import MixinComponent from './MixinComponent';
 import Icon from '../icon';
 
+/**
+ * getMenuKeyList 获取菜单选中的，一条线的所有key
+ * @param {String} key 当前选中的 key
+ * @param {Array} menus 菜单
+ * @param {Array} keys 返回 key 的数组 => ['1','1-2','1-2-3'];
+ */
+function getMenuKeyList(key, menus) {
+  const menuFilter = menus.filter(item => item.props.index === key);
+  if (menuFilter.length > 0) return true;
+  let isAtive = false;
+  menus.forEach((item) => {
+    if (toString.apply(item.props.children) === '[object Array]' && getMenuKeyList(key, item.props.children)) {
+      isAtive = true;
+    } else if (item.props && item.props.index === key) {
+      isAtive = true;
+    }
+  });
+  return isAtive;
+}
+
 export default class SubMenu extends MixinComponent {
   constructor(props) {
     super(props);
@@ -24,14 +44,24 @@ export default class SubMenu extends MixinComponent {
   handleClick() {
     this.menu().handleSubmenuClick(this.props.index);
   }
-
+  isCheckMenuItem(idx) {
+    if (!idx) return false;
+    return getMenuKeyList(this.menu().state.defaultActive, this.props.children);
+  }
   opened() {
     return this.menu().state.openedMenu.indexOf(this.props.index) !== -1;
   }
   render() {
-    const { prefixCls, className } = this.props;
+    const { prefixCls, index, className, title, ...resetProps } = this.props;
+    const isSelected = this.isCheckMenuItem(index);
     return (
-      <li className={this.classNames(className, `${prefixCls}`, { opened: this.opened() })} >
+      <li
+        className={this.classNames(className, `${prefixCls}`, {
+          opened: this.opened(),
+          [`${prefixCls}-selected`]: isSelected,
+        })}
+        {...resetProps}
+      >
         <div ref={(elm) => { this.submenu = elm; }} className={`${prefixCls}-title`}>
           <span>{this.props.title}</span>
           <Icon

diff --git a/src/menu/style/index.less b/src/menu/style/index.less
@@ -99,9 +99,17 @@
         border-bottom: 1px solid #0fa120;
       }
     }
+    .w-sub-menu-selected .w-sub-menu-title {
+      border-bottom: 1px solid #0fa120;
+      font-weight: bold;
+      color: #0fa120;
+    }
     .w-sub-menu {
       float: left;
       position: relative;
+      .w-menu-item.active {
+        border-bottom: 0;
+      }
       .w-sub-menu-arrow {
         position: static;
       }
@@ -133,6 +141,7 @@
   }
 }
 
+// 暗主题样式
 .@{w-menu}-dark {
   background: #343a40;
   color: #fff;