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

Fixes material-components#5123
cletusw · Oct 16, 2019 · 485b135 · 485b135
1 parent e7799b8
commit 485b135
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 17 deletions.
diff --git a/packages/mdc-tab-scroller/foundation.ts b/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,22 @@ export class MDCTabScrollerFoundation extends MDCFoundation<MDCTabScrollerAdapte
   }
 
   /**
-   * Internal increment scroll method
+   * Internal method to compute the increment scroll operation values.
    * @param scrollX The new scroll position increment
    */
-  private incrementScroll_(scrollX: number) {
+  private getIncrementScrollOperation_(scrollX: number) {
+    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
@@ -285,6 +285,48 @@ 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() {