[Tabs] Small changes investigating #11624 (#12239)

mui · Jul 22, 2018 · 95b2e2c · 95b2e2c
1 parent c65d419
commit 95b2e2c
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');
  });
  });