diff --git a/.size-limit.js b/.size-limit.js index dcaea700d375c9..b55df1ec040fa6 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -27,7 +27,7 @@ module.exports = [ name: 'The size of all the modules of material-ui.', webpack: true, path: 'packages/material-ui/build/index.js', - limit: '94.8 KB', + limit: '94.9 KB', }, { name: 'The main bundle of the docs', diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index 553eec39bee9dc..40af221f796247 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -7,6 +7,8 @@ import classNames from 'classnames'; import EventListener from 'react-event-listener'; import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb. import { getNormalizedScrollLeft, detectScrollType } from 'normalize-scroll-left'; +// TODO: should we fork it? +// https://github.com/michaelrhodes/scroll/issues/10 import scroll from 'scroll'; import ScrollbarSize from './ScrollbarSize'; import withStyles from '../styles/withStyles'; @@ -94,11 +96,10 @@ class Tabs extends React.Component { } componentDidUpdate(prevProps, prevState) { - this.updateScrollButtonState(); - // The index might have changed at the same time. // We need to check again the right indicator position. this.updateIndicatorState(this.props); + this.updateScrollButtonState(); if (this.state.indicatorStyle !== prevState.indicatorStyle) { this.scrollSelectedIntoView(); @@ -176,15 +177,11 @@ class Tabs extends React.Component { }; handleLeftScrollClick = () => { - if (this.tabsRef) { - this.moveTabsScroll(-this.tabsRef.clientWidth); - } + this.moveTabsScroll(-this.tabsRef.clientWidth); }; handleRightScrollClick = () => { - if (this.tabsRef) { - this.moveTabsScroll(this.tabsRef.clientWidth); - } + this.moveTabsScroll(this.tabsRef.clientWidth); }; handleScrollbarSizeChange = ({ scrollbarHeight }) => { @@ -198,13 +195,11 @@ class Tabs extends React.Component { moveTabsScroll = delta => { const { theme } = this.props; - if (this.tabsRef) { - const multiplier = theme.direction === 'rtl' ? -1 : 1; - const nextScrollLeft = this.tabsRef.scrollLeft + delta * multiplier; - // Fix for Edge - const invert = theme.direction === 'rtl' && detectScrollType() === 'reverse' ? -1 : 1; - scroll.left(this.tabsRef, invert * nextScrollLeft); - } + const multiplier = theme.direction === 'rtl' ? -1 : 1; + const nextScrollLeft = this.tabsRef.scrollLeft + delta * multiplier; + // Fix for Edge + const invert = theme.direction === 'rtl' && detectScrollType() === 'reverse' ? -1 : 1; + scroll.left(this.tabsRef, invert * nextScrollLeft); }; scrollSelectedIntoView = () => { @@ -229,7 +224,7 @@ class Tabs extends React.Component { updateScrollButtonState = () => { const { scrollable, scrollButtons, theme } = this.props; - if (this.tabsRef && scrollable && scrollButtons !== 'off') { + if (scrollable && scrollButtons !== 'off') { const { scrollWidth, clientWidth } = this.tabsRef; const scrollLeft = getNormalizedScrollLeft(this.tabsRef, theme.direction); diff --git a/packages/material-ui/src/Tabs/Tabs.test.js b/packages/material-ui/src/Tabs/Tabs.test.js index a86f319f9a549f..8e4692319a6df9 100644 --- a/packages/material-ui/src/Tabs/Tabs.test.js +++ b/packages/material-ui/src/Tabs/Tabs.test.js @@ -30,7 +30,7 @@ describe('', () => { }; before(() => { - shallow = createShallow({ untilSelector: 'Tabs' }); + shallow = createShallow({ untilSelector: 'Tabs', disableLifecycleMethods: true }); classes = getClasses(); mount = createMount(); }); @@ -627,6 +627,7 @@ describe('', () => { , ); + wrapper.setState({ mounted: true }); assert.strictEqual(wrapper.find(TabIndicator).props().style.backgroundColor, 'green'); }); });