[Tabs] Small changes investigating #11624

mui · Jul 22, 2018 · 771f7ad · 771f7ad
1 parent c65d419
commit 771f7ad
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 18 deletions.
diff --git 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
@@ -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
@@ -30,7 +30,7 @@ describe('<Tabs />', () => {
   };
 
   before(() => {
-    shallow = createShallow({ untilSelector: 'Tabs' });
+    shallow = createShallow({ untilSelector: 'Tabs', disableLifecycleMethods: true });
     classes = getClasses(<Tabs onChange={noop} value={0} />);
     mount = createMount();
   });
@@ -627,6 +627,7 @@ describe('<Tabs />', () => {
           <Tab />
         </Tabs>,
       );
+      wrapper.setState({ mounted: true })
       assert.strictEqual(wrapper.find(TabIndicator).props().style.backgroundColor, 'green');
     });
   });