From 8046c5581259b84276ecef6af11e8bd7ede62ac7 Mon Sep 17 00:00:00 2001
From: Clayton Watts <cletusw@gmail.com>
Date: Wed, 16 Oct 2019 13:46:22 -0700
Subject: [PATCH] feat(tab-scroller): Add incrementScrollImmediate to bypass
 animation

Fixes #5123
---
 packages/mdc-tab-scroller/README.md           |  3 +-
 packages/mdc-tab-scroller/foundation.ts       | 53 ++++++++++++-------
 test/unit/mdc-tab-scroller/foundation.test.js | 43 +++++++++++++++
 3 files changed, 80 insertions(+), 19 deletions(-)

diff --git a/packages/mdc-tab-scroller/README.md b/packages/mdc-tab-scroller/README.md
index 5d46fa6728f..2f7034314ba 100644
--- a/packages/mdc-tab-scroller/README.md
+++ b/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.
 
diff --git a/packages/mdc-tab-scroller/foundation.ts b/packages/mdc-tab-scroller/foundation.ts
index 00f68e8a67e..990b0be7fea 100644
--- a/packages/mdc-tab-scroller/foundation.ts
+++ b/packages/mdc-tab-scroller/foundation.ts
@@ -30,6 +30,11 @@ import {MDCTabScrollerRTLReverse} from './rtl-reverse-scroller';
 import {MDCTabScrollerRTL} from './rtl-scroller';
 import {MDCTabScrollerAnimation, MDCTabScrollerHorizontalEdges} from './types';
 
+interface ScrollOperation {
+  finalScrollPosition: number;
+  scrollDelta: number;
+}
+
 export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapter> {
   static get cssClasses() {
     return cssClasses;
@@ -125,7 +130,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 +139,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 +259,23 @@ 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 Object with the sanitized values for performing the scroll operation.
    */
-  private incrementScroll_(scrollX: number) {
+  private getIncrementScrollOperation_(scrollX: number): ScrollOperation {
+    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);
+    };
   }
 
   /**
diff --git a/test/unit/mdc-tab-scroller/foundation.test.js b/test/unit/mdc-tab-scroller/foundation.test.js
index c7cf51f937b..a4f800504a2 100644
--- a/test/unit/mdc-tab-scroller/foundation.test.js
+++ b/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() {