diff --git a/.gitignore b/.gitignore index 2fd75443cb..46a10a86eb 100644 --- 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 index 364ed3212a..c710234a4c 100644 --- 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 index 35ab1bc4d6..4d7b7e54c8 100644 --- 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 = (); + 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) => ( @@ -407,6 +417,13 @@ describe('Tab', () => { ); }); + it('should not render dropdown if not excessed', () => { + wrapper = mount(
+ +
, { attachTo: target }); + assert(wrapper.find('.next-tabs-btn-down').length === 0); + }); + it('should scrollToActiveTab', () => { wrapper = mount(