fix(Tab): can't scroll when active item is inside view

alibaba-fusion · Mar 6, 2019 · a8f4d18 · a8f4d18
1 parent 7a6842a
commit a8f4d18
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -60,6 +60,9 @@ typings/
 # next.js build output
 .next
 
+# special demo file for locally reappear issue
+docs/**/demo/issues.md
+
 precss.css
 .sass-cache/
 scripts/server-remote

diff --git a/src/tab/tabs/nav.jsx b/src/tab/tabs/nav.jsx
@@ -50,21 +50,22 @@ class Nav extends React.Component {
     }
 
     componentDidMount() {
-        this.setSlideBtn();
-        this.getDropdownItems(this.props);
-
-        events.on(window, 'resize', this.onWindowResized);
-    }
-
-    componentDidUpdate() {
         const ctx = this;
 
+        ctx.setSlideBtn();
+        ctx.getDropdownItems(this.props);
         // 此处通过延时处理，屏蔽动画带来的定位不准确问题（由于要支持ie9，因此无法使用transitionend）
         clearTimeout(ctx.scrollTimer);
         ctx.scrollTimer = setTimeout(() => {
             ctx.scrollToActiveTab();
         }, 400);
 
+        events.on(window, 'resize', this.onWindowResized);
+    }
+
+    componentDidUpdate() {
+        const ctx = this;
+
         clearTimeout(ctx.slideTimer);
         ctx.slideTimer = setTimeout(() => {
             ctx.setSlideBtn();
@@ -210,10 +211,13 @@ class Nav extends React.Component {
             }
         }
 
-        if (index > 1) {
-            index = index - 1;
+        if (index === tabs.length) {
+            this.setState({
+                dropdownTabs: [],
+            });
+        } else {
             this.setState({
-                dropdownTabs: tabs.slice(index),
+                dropdownTabs: tabs,
             });
         }
     }
@@ -341,13 +345,13 @@ class Nav extends React.Component {
 
     onPrevClick = () => {
         const wrapperWH = getOffsetWH(this.wrapper);
-        this.setOffset(this.offset + wrapperWH);
-    };
+        this.setOffset(this.offset + wrapperWH, true, false);
+    }
 
     onNextClick = () => {
         const wrapperWH = getOffsetWH(this.wrapper);
-        this.setOffset(this.offset - wrapperWH);
-    };
+        this.setOffset(this.offset - wrapperWH, true, false);
+    }
 
     onNavItemClick(key, callback, e) {
         this.props.onTriggerEvent(triggerEvents.CLICK, key);

diff --git a/test/tab/index-spec.js b/test/tab/index-spec.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import Enzyme, { mount, render } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import sinon from 'sinon';
 import assert from 'power-assert';
 import { KEYCODE } from '../../src/util';
 import Tab from '../../src/tab/index';
+import Nav from '../../src/tab/tabs/nav';
 import '../../src/tab/style.js';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -337,9 +339,17 @@ describe('Tab', () => {
                 .simulate('click');
             assert(wrapper.find('.next-tabs-tabpane').length === 1);
         });
+
+        it('should resize', () => {
+            const render = sinon.spy();
+            const ele = (<Tab defaultActiveKey={1} tabRender={render}><Tab.Item key={1} title="Item1"></Tab.Item></Tab>);
+            wrapper = mount(ele);
+            window.dispatchEvent(new Event('resize'));
+            assert(render.calledOnce);
+        });
     });
 
-    describe('slide mode', () => {
+    describe('excess mode', () => {
         let wrapper, target;
         const panes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item, index) => (
             <Tab.Item title={`tab item ${item}`} key={index} />
@@ -407,6 +417,13 @@ describe('Tab', () => {
             );
         });
 
+        it('should not render dropdown if not excessed', () => {
+            wrapper = mount(<div style={boxStyle}><Tab excessMode="dropdown" shape="wrapped">
+                <Tab.Item title="item" key={1}></Tab.Item>
+            </Tab></div>, { attachTo: target });
+            assert(wrapper.find('.next-tabs-btn-down').length === 0);
+        });
+
         it('should scrollToActiveTab', () => {
             wrapper = mount(
                 <div style={boxStyle}>