Always scroll to show active menu item

HISTORY.md

@@ -2,6 +2,10 @@
 
 ---
 
+## 0.5.1 / 2015-12-31
+
+- Always scroll to show active menu item
+
 ## 0.5.0 / 2015-12-30
 
 - Remove `onSelect`

assets/index.less

@@ -63,6 +63,7 @@
     margin: 0;
     padding: 0;
     border-right: 1px solid #e9e9e9;
+    overflow: auto;
     &:last-child {
       border-right: 0;
     }

examples/defaultValue.js

@@ -18,6 +18,21 @@ const addressOptions = [{
     'label': '泉州',
     'value': 'quanzhou',
   }],
+}, {
+  'label': '占位1',
+  'value': 'zw1',
+}, {
+  'label': '占位2',
+  'value': 'zw2',
+}, {
+  'label': '占位3',
+  'value': 'zw3',
+}, {
+  'label': '占位4',
+  'value': 'zw4',
+}, {
+  'label': '占位5',
+  'value': 'zw5',
 }, {
   'label': '浙江',
   'value': 'zj',
@@ -42,14 +57,14 @@ const addressOptions = [{
 }];
 
 const defaultOptions = [{
-  'label': '福建',
-  'value': 'fj',
+  'label': '浙江',
+  'value': 'zj',
 }, {
-  'label': '福州',
-  'value': 'fuzhou',
+  'label': '杭州',
+  'value': 'hangzhou',
 }, {
-  'label': '马尾',
-  'value': 'mawei',
+  'label': '余杭',
+  'value': 'yuhang',
 }];
 
 const Demo = React.createClass({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-cascader",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "cascade select ui component for react",
   "keywords": [
     "react",

src/Menus.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import arrayTreeFilter from 'array-tree-filter';
+import { findDOMNode } from 'react-dom';
 
 class Menus extends React.Component {
   constructor(props) {
@@ -12,6 +13,10 @@ class Menus extends React.Component {
     };
   }
 
+  componentDidMount() {
+    this.scrollActiveItemToView();
+  }
+
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps) {
       this.setState({
@@ -26,6 +31,12 @@ class Menus extends React.Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (!prevProps.visible && this.props.visible) {
+      this.scrollActiveItemToView();
+    }
+  }
+
   onSelect(targetOption, menuIndex) {
     if (!targetOption) {
       return;
@@ -51,14 +62,11 @@ class Menus extends React.Component {
 
   getOption(option, menuIndex) {
     const { prefixCls, expandTrigger } = this.props;
-    let menuItemCls = `${prefixCls}-menu-item`;
-    if (this.isActiveOption(option)) {
-      menuItemCls += ` ${prefixCls}-menu-item-active`;
-    }
     const onSelect = this.onSelect.bind(this, option, menuIndex);
     let expandProps = {
       onClick: onSelect,
     };
+    let menuItemCls = `${prefixCls}-menu-item`;
     if (expandTrigger === 'hover' &&
       option.children &&
       option.children.length > 0) {
@@ -67,6 +75,10 @@ class Menus extends React.Component {
       };
       menuItemCls += ` ${prefixCls}-menu-item-expand`;
     }
+    if (this.isActiveOption(option)) {
+      menuItemCls += ` ${prefixCls}-menu-item-active`;
+      expandProps.ref = 'activeItem' + menuIndex;
+    }
     return (
       <li key={option.value}
           className={menuItemCls}
@@ -92,6 +104,18 @@ class Menus extends React.Component {
     return result;
   }
 
+  scrollActiveItemToView() {
+    // scroll into view
+    const optionsLength = this.getShowOptions().length;
+    for (let i = 0; i < optionsLength; i++) {
+      const itemComponent = this.refs['activeItem' + i];
+      if (itemComponent) {
+        const target = findDOMNode(itemComponent);
+        target.parentNode.scrollTop = target.offsetTop;
+      }
+    }
+  }
+
   isActiveOption(option) {
     return this.state.activeValue.some(value => value === option.value);
   }
@@ -101,14 +125,10 @@ class Menus extends React.Component {
     return (
       <div>
         {this.getShowOptions().map((options, menuIndex) =>
-        <ul className={`${prefixCls}-menu`} key={menuIndex}>
-          {
-            options.map(option => {
-              return this.getOption(option, menuIndex);
-            })
-            }
-        </ul>
-          )}
+          <ul className={`${prefixCls}-menu`} key={menuIndex}>
+            {options.map(option => this.getOption(option, menuIndex))}
+          </ul>
+        )}
       </div>
     );
   }