feat(tab-scroller): Add incrementScrollImmediate to bypass animation

Fixes material-components#5123

packages/mdc-tab-scroller/README.md

@@ -82,7 +82,8 @@ Mixin | Description
 Method Signature | Description
 --- | ---
 `scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.
-`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.
+`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.
+`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.
 `getScrollPosition() => number` | Returns the current visual scroll position.
 `getScrollContentWidth() => number` | Returns the width of the scroll content element.
 

packages/mdc-tab-scroller/foundation.ts

@@ -125,7 +125,7 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
   }
 
   /**
-   * Increment the scroll value by the scrollXIncrement
+   * Increment the scroll value by the scrollXIncrement using animation.
    * @param scrollXIncrement The value by which to increment the scroll position
    */
   incrementScroll(scrollXIncrement: number) {
@@ -134,11 +134,27 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
       return;
     }
 
-    if (this.isRTL_()) {
-      return this.incrementScrollRTL_(scrollXIncrement);
+    this.animate_(this.getIncrementScrollOperation_(scrollXIncrement));
+  }
+
+  /**
+   * Increment the scroll value by the scrollXIncrement without animation.
+   * @param scrollXIncrement The value by which to increment the scroll position
+   */
+  incrementScrollImmediate(scrollXIncrement: number) {
+    // Early exit for non-operational increment values
+    if (scrollXIncrement === 0) {
+      return;
+    }
+
+    const operation = this.getIncrementScrollOperation_(scrollXIncrement);
+
+    if (operation.scrollDelta === 0) {
+      return;
     }
 
-    this.incrementScroll_(scrollXIncrement);
+    this.stopScrollAnimation_();
+    this.adapter_.setScrollAreaScrollLeft(operation.finalScrollPosition);
   }
 
   /**
@@ -238,27 +254,25 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
   }
 
   /**
-   * Internal increment scroll method
-   * @param scrollX The new scroll position increment
+   * Internal method to compute the increment scroll operation values.
+   * @param scrollX The desired scroll position increment
+   * @return MDCTabScrollerAnimation with the sanitized values for performing
+   *     the scroll operation.
    */
-  private incrementScroll_(scrollX: number) {
+  private getIncrementScrollOperation_(scrollX: number):
+      MDCTabScrollerAnimation {
+    if (this.isRTL_()) {
+      return this.getRTLScroller().incrementScrollRTL(scrollX);
+    }
+
     const currentScrollX = this.getScrollPosition();
     const targetScrollX = scrollX + currentScrollX;
     const safeScrollX = this.clampScrollValue_(targetScrollX);
     const scrollDelta = safeScrollX - currentScrollX;
-    this.animate_({
+    return {
       finalScrollPosition: safeScrollX,
       scrollDelta,
-    });
-  }
-
-  /**
-   * Internal increment scroll RTL method
-   * @param scrollX The new scroll position RTL increment
-   */
-  private incrementScrollRTL_(scrollX: number) {
-    const animation = this.getRTLScroller().incrementScrollRTL(scrollX);
-    this.animate_(animation);
+    };
   }
 
   /**

test/unit/mdc-tab-scroller/foundation.test.js

@@ -285,6 +285,49 @@ test(`#incrementScroll() removes the ${MDCTabScrollerFoundation.cssClasses.ANIMA
   }
 );
 
+test('#incrementScrollImmediate() exits early if increment is 0', () => {
+  const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 700});
+  foundation.incrementScrollImmediate(0);
+  td.verify(mockAdapter.setScrollAreaScrollLeft(td.matchers.isA(Number)), {times: 0});
+});
+
+test('#incrementScrollImmediate() exits early if increment puts the scrollLeft over the max value', () => {
+  const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 700});
+  foundation.incrementScrollImmediate(10);
+  td.verify(mockAdapter.setScrollAreaScrollLeft(td.matchers.isA(Number)), {times: 0});
+});
+
+test('#incrementScrollImmediate() exits early if increment puts the scrollLeft below the min value', () => {
+  const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 0});
+  foundation.incrementScrollImmediate(-10);
+  td.verify(mockAdapter.setScrollAreaScrollLeft(td.matchers.isA(Number)), {times: 0});
+});
+
+test('#incrementScrollImmediate() increases the scrollLeft value by the given value', () => {
+  const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 123});
+  foundation.incrementScrollImmediate(11);
+  td.verify(mockAdapter.setScrollAreaScrollLeft(134), {times: 1});
+});
+
+test('#incrementScrollImmediate() increases the scrollLeft value by the given value up to the max scroll value', () => {
+  const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 99, rootWidth: 100, contentWidth: 200});
+  foundation.incrementScrollImmediate(2);
+  td.verify(mockAdapter.setScrollAreaScrollLeft(100), {times: 1});
+});
+
+test('#incrementScrollImmediate() decreases the scrollLeft value by the given value', () => {
+  const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 123});
+  foundation.incrementScrollImmediate(-11);
+  td.verify(mockAdapter.setScrollAreaScrollLeft(112), {times: 1});
+});
+
+test('#incrementScrollImmediate() decreases the scrollLeft value by the given value down to the min scroll value',
+  () => {
+    const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 1, rootWidth: 100, contentWidth: 200});
+    foundation.incrementScrollImmediate(-2);
+    td.verify(mockAdapter.setScrollAreaScrollLeft(0), {times: 1});
+  });
+
 // RTL Mode
 
 function setupScrollToRTLTest() {