diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js index a66419c1..2d617df5 100644 --- a/components/tabs/Tabs.js +++ b/components/tabs/Tabs.js @@ -51,8 +51,13 @@ const factory = (Tab, TabContent, FontIcon) => { this.handleResize(); } - componentWillReceiveProps(nextProps) { - this.updatePointer(nextProps.index); + componentDidUpdate(prevProps) { + const { index, children } = this.props; + const { index: prevIndex, children: prevChildren } = prevProps; + + if (index !== prevIndex || children !== prevChildren) { + this.updatePointer(index); + } } componentWillUnmount() { @@ -76,15 +81,17 @@ const factory = (Tab, TabContent, FontIcon) => { updatePointer = (idx) => { if (this.navigationNode && this.navigationNode.children[idx]) { - const nav = this.navigationNode.getBoundingClientRect(); - const label = this.navigationNode.children[idx].getBoundingClientRect(); - const scrollLeft = this.navigationNode.scrollLeft; - this.setState({ - pointer: { - top: `${nav.height}px`, - left: `${label.left - (nav.left + scrollLeft)}px`, - width: `${label.width}px`, - }, + requestAnimationFrame(() => { + const nav = this.navigationNode.getBoundingClientRect(); + const label = this.navigationNode.children[idx].getBoundingClientRect(); + const scrollLeft = this.navigationNode.scrollLeft; + this.setState({ + pointer: { + top: `${nav.height}px`, + left: `${(label.left + scrollLeft) - nav.left}px`, + width: `${label.width}px`, + }, + }); }); } } diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 00000000..a425ad13 --- /dev/null +++ b/jest.config.js @@ -0,0 +1 @@ +Object.defineProperty(window, 'requestAnimationFrame', { value: fn => fn() }); diff --git a/package.json b/package.json index 7d537dd9..febe84d5 100644 --- a/package.json +++ b/package.json @@ -112,14 +112,17 @@ }, "license": "MIT", "jest": { + "modulePaths": [ + "" + ], "moduleDirectories": [ "node_modules" ], "moduleNameMapper": { "(\\.css$)|(normalize.css/normalize)|(^exports-loader)": "identity-obj-proxy" }, - "modulePaths": [ - "" + "setupFiles": [ + "./jest.config.js" ], "snapshotSerializers": [ "enzyme-to-json/serializer"