fix(Tab): max-call-exceeded

Author: guanpu

docs/tab/index.en-us.md

@@ -21,7 +21,7 @@ Disable animation with `animation={false}`
 
 | Param | Descripiton  | Type  | Default Value |
 | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- |
-| activeKey           | Key of the current active tab | Number/String | -        |
+| activeKey           | Key of the current active tab<br> This prop will make tab a 'controlled component', end user will be unable to change tabs | Number/String | -        |
 | size                | Size of tab<br><br>**option**:<br>'small', 'medium'                                                                                                                                                                             | Enum          | 'medium' |
 | shape               | Shape of tab<br><br>**option**:<br>'pure', 'wrapped', 'text', 'capsule'                                                                                                                                                        | Enum          | 'pure'   |
 | defaultActiveKey    | Key of default active tab  | Number/String | -        |

docs/tab/index.md

@@ -33,7 +33,7 @@ Fusion 提供了三级选项卡，分别用于不同的场景。
 
 | 参数                  | 说明                                                                                                                                                                                                                  | 类型            | 默认值      |
 | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- |
-| activeKey           | 被激活的选项卡的 key                                                                                                                                                                                                        | Number/String | -        |
+| activeKey           | 被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换                                                                                                                                                                                   | Number/String | -        |
 | size                | 尺寸<br><br>**可选值**:<br>'small', 'medium'                                                                                                                                                                             | Enum          | 'medium' |
 | shape               | 外观形态<br><br>**可选值**:<br>'pure', 'wrapped', 'text', 'capsule'                                                                                                                                                        | Enum          | 'pure'   |
 | defaultActiveKey    | 初始化时被激活的选项卡的 key                                                                                                                                                                                                    | Number/String | -        |

src/tab/tab.jsx

@@ -15,7 +15,7 @@ export default class Tab extends Component {
     static propTypes = {
         prefix: PropTypes.string,
         /**
-         * 被激活的选项卡的 key
+         * 被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换
          */
         activeKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
         /**

src/tab/tabs/nav.jsx

@@ -68,12 +68,20 @@ class Nav extends React.Component {
         events.off(window, 'resize', this.onWindowResized);
     }
 
+    /**
+     * The key method about move
+     * @param {number} target position to slide to
+     * @param {bool} checkSlideBtn need to check the slide button status or not
+     * @param {bool} setActive need to check the active status or not
+     */
     setOffset(target, checkSlideBtn = true, setActive = true) {
         const { tabPosition } = this.props;
         const navWH = getOffsetWH(this.nav, tabPosition);
         const wrapperWH = getOffsetWH(this.wrapper);
 
+        // target should not be great than 0, i.e. should not over slide to left-most
         target = target >= 0 ? 0 : target;
+        // when need to slide, should not slide to exceed right-most
         target = target <= wrapperWH - navWH && wrapperWH - navWH < 0 ? wrapperWH - navWH : target;
 
         const relativeOffset = target - this.offset;
@@ -140,7 +148,7 @@ class Nav extends React.Component {
         if (minOffset >= 0 || navWH <= navbarWH) {
             next = false;
             prev = false;
-            this.setOffset(0);
+            this.setOffset(0, false); // no need to check slide again since this call is invoked from inside setSlideBtn
         } else if (this.offset < 0 && this.offset <= minOffset) {
             prev = true;
             next = false;
@@ -186,7 +194,7 @@ class Nav extends React.Component {
     }
 
     removeTab = (key, e) => {
-        e && e.stopPropagation(); // 不再传递事件，防止触发父级事件处理器
+        e && e.stopPropagation(); // stop bubble, so that it won't trigger upstream listener
         this.props.onClose(key);
     }
 

src/tab/tabs/utils.js

@@ -6,11 +6,11 @@ export const triggerEvents = {
 };
 
 export function getOffsetWH(node, tabPosition) {
-    let prop = 'offsetWidth';
+    let prop = 'width';
     if (tabPosition === 'left' || tabPosition === 'right') {
-        prop = 'offsetHeight';
+        prop = 'height';
     }
-    return node ? node[prop] : 0;
+    return node ? node.getBoundingClientRect()[prop] : 0;
 }
 
 export function getOffsetLT(node, tabPosition) {

test/tab/index-spec.js

@@ -179,7 +179,7 @@ describe('Tab', () => {
 
     describe('slide mode', () => {
         let wrapper, target;
-        const panes = [1, 2, 3, 4, 5, 6, 7, 9, 10].map((item, index) => <Tab.Item title={`tab item ${item}`} key={index}></Tab.Item>);
+        const panes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item, index) => <Tab.Item title={`tab item ${item}`} key={index}></Tab.Item>);
         const boxStyle = { width: '200px' };
 
         beforeEach(() => {
@@ -218,14 +218,10 @@ describe('Tab', () => {
             assert(wrapper.find('.next-menu-item').at(0).hasClass('next-selected'));
         });
 
-        // TODO: not work
         it('should scrollToActiveTab', () => {
-            wrapper = mount(<div style={boxStyle}><Tab activeKey="9">{panes}</Tab></div>, { attachTo: target });
-            // console.log(wrapper.find('.next-tabs').instance());
-            wrapper.setProps({ activeKey: '3' });
-            // wrapper.find('.next-tabs-tab').at(1).simulate('click');
-
+            wrapper = mount(<div style={boxStyle}><Tab defaultActiveKey="9">{panes}</Tab></div>, { attachTo: target });
+            wrapper.find('.next-tabs-tab').at(3).simulate('click');
+            assert(wrapper.find('.next-tabs-tab').at(3).hasClass('active'))
         });
-
     });
 });