feat(tabs): Convert JS to TypeScript (#4412)

Refs #4225

packages/mdc-tabs/index.js → packages/mdc-tabs/index.ts

@@ -21,6 +21,6 @@
  * THE SOFTWARE.
  */
 
-export {MDCTabFoundation, MDCTab} from './tab';
-export {MDCTabBarFoundation, MDCTabBar} from './tab-bar';
-export {MDCTabBarScrollerFoundation, MDCTabBarScroller} from './tab-bar-scroller';
+export * from './tab';
+export * from './tab-bar';
+export * from './tab-bar-scroller';

packages/mdc-tabs/tab-bar-scroller/adapter.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2019 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import {EventType, SpecificEventListener} from '@material/base/types';
+
+export interface MDCTabBarScrollerAdapter {
+  addClass: (className: string) => void;
+  removeClass: (className: string) => void;
+  eventTargetHasClass: (target: Element, className: string) => boolean;
+  addClassToForwardIndicator: (className: string) => void;
+  removeClassFromForwardIndicator: (className: string) => void;
+  addClassToBackIndicator: (className: string) => void;
+  removeClassFromBackIndicator: (className: string) => void;
+  isRTL: () => boolean;
+  registerBackIndicatorClickHandler: (handler: SpecificEventListener<'click'>) => void;
+  deregisterBackIndicatorClickHandler: (handler: SpecificEventListener<'click'>) => void;
+  registerForwardIndicatorClickHandler: (handler: SpecificEventListener<'click'>) => void;
+  deregisterForwardIndicatorClickHandler: (handler: SpecificEventListener<'click'>) => void;
+  registerCapturedInteractionHandler: <K extends EventType>(evt: K, handler: SpecificEventListener<K>) => void;
+  deregisterCapturedInteractionHandler: <K extends EventType>(evt: K, handler: SpecificEventListener<K>) => void;
+  registerWindowResizeHandler: (handler: SpecificEventListener<'resize'>) => void;
+  deregisterWindowResizeHandler: (handler: SpecificEventListener<'resize'>) => void;
+  getNumberOfTabs: () => number;
+  getComputedWidthForTabAtIndex: (index: number) => number;
+  getComputedLeftForTabAtIndex: (index: number) => number;
+  getOffsetWidthForScrollFrame: () => number;
+  getScrollLeftForScrollFrame: () => number;
+  setScrollLeftForScrollFrame: (scrollLeftAmount: number) => void;
+  getOffsetWidthForTabBar: () => number;
+  setTransformStyleForTabBar: (value: string) => void;
+  getOffsetLeftForEventTarget: (target: HTMLElement) => number;
+  getOffsetWidthForEventTarget: (target: HTMLElement) => number;
+}
+
+export default MDCTabBarScrollerAdapter;

packages/mdc-tabs/tab-bar-scroller/index.js → packages/mdc-tabs/tab-bar-scroller/component.ts

@@ -21,58 +21,61 @@
  * THE SOFTWARE.
  */
 
-import {getCorrectPropertyName} from '@material/animation/index.ts';
+import {getCorrectPropertyName} from '@material/animation/index';
 import {MDCComponent} from '@material/base/component';
+import {MDCTabBar, MDCTabBarFactory} from '../tab-bar/index';
+import {MDCTabBarScrollerAdapter} from './adapter';
+import {MDCTabBarScrollerFoundation} from './foundation';
 
-import {MDCTabBar} from '../tab-bar/index';
-import MDCTabBarScrollerFoundation from './foundation';
-
-export {MDCTabBarScrollerFoundation};
-
-export class MDCTabBarScroller extends MDCComponent {
-  static attachTo(root) {
+export class MDCTabBarScroller extends MDCComponent<MDCTabBarScrollerFoundation> {
+  static attachTo(root: Element) {
     return new MDCTabBarScroller(root);
   }
 
   get tabBar() {
     return this.tabBar_;
   }
 
-  initialize(tabBarFactory = (root) => new MDCTabBar(root)) {
-    this.scrollFrame_ = this.root_.querySelector(MDCTabBarScrollerFoundation.strings.FRAME_SELECTOR);
-    this.tabBarEl_ = this.root_.querySelector(MDCTabBarScrollerFoundation.strings.TABS_SELECTOR);
-    this.forwardIndicator_ = this.root_.querySelector(MDCTabBarScrollerFoundation.strings.INDICATOR_FORWARD_SELECTOR);
-    this.backIndicator_ = this.root_.querySelector(MDCTabBarScrollerFoundation.strings.INDICATOR_BACK_SELECTOR);
+  protected root_!: HTMLElement; // assigned in MDCComponent constructor
+
+  private tabBar_!: MDCTabBar; // assigned in initialize()
+  private scrollFrame_!: HTMLElement; // assigned in initialize()
+  private tabBarEl_!: HTMLElement; // assigned in initialize()
+  private forwardIndicator_!: HTMLElement; // assigned in initialize()
+  private backIndicator_!: HTMLElement; // assigned in initialize()
+
+  initialize(tabBarFactory: MDCTabBarFactory = (el) => new MDCTabBar(el)) {
+    this.scrollFrame_ =
+      this.root_.querySelector<HTMLElement>(MDCTabBarScrollerFoundation.strings.FRAME_SELECTOR)!;
+    this.tabBarEl_ =
+      this.root_.querySelector<HTMLElement>(MDCTabBarScrollerFoundation.strings.TABS_SELECTOR)!;
+    this.forwardIndicator_ =
+      this.root_.querySelector<HTMLElement>(MDCTabBarScrollerFoundation.strings.INDICATOR_FORWARD_SELECTOR)!;
+    this.backIndicator_ =
+      this.root_.querySelector<HTMLElement>(MDCTabBarScrollerFoundation.strings.INDICATOR_BACK_SELECTOR)!;
+
     this.tabBar_ = tabBarFactory(this.tabBarEl_);
   }
 
   getDefaultFoundation() {
-    return new MDCTabBarScrollerFoundation({
+    // tslint:disable:object-literal-sort-keys
+    const adapter: MDCTabBarScrollerAdapter = {
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
       eventTargetHasClass: (target, className) => target.classList.contains(className),
       addClassToForwardIndicator: (className) => this.forwardIndicator_.classList.add(className),
       removeClassFromForwardIndicator: (className) => this.forwardIndicator_.classList.remove(className),
       addClassToBackIndicator: (className) => this.backIndicator_.classList.add(className),
       removeClassFromBackIndicator: (className) => this.backIndicator_.classList.remove(className),
-      isRTL: () =>
-        getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
-      registerBackIndicatorClickHandler: (handler) =>
-        this.backIndicator_.addEventListener('click', handler),
-      deregisterBackIndicatorClickHandler: (handler) =>
-        this.backIndicator_.removeEventListener('click', handler),
-      registerForwardIndicatorClickHandler: (handler) =>
-        this.forwardIndicator_.addEventListener('click', handler),
-      deregisterForwardIndicatorClickHandler: (handler) =>
-        this.forwardIndicator_.removeEventListener('click', handler),
-      registerCapturedInteractionHandler: (evt, handler) =>
-        this.root_.addEventListener(evt, handler, true),
-      deregisterCapturedInteractionHandler: (evt, handler) =>
-        this.root_.removeEventListener(evt, handler, true),
-      registerWindowResizeHandler: (handler) =>
-        window.addEventListener('resize', handler),
-      deregisterWindowResizeHandler: (handler) =>
-        window.removeEventListener('resize', handler),
+      isRTL: () => getComputedStyle(this.root_).getPropertyValue('direction') === 'rtl',
+      registerBackIndicatorClickHandler: (handler) => this.backIndicator_.addEventListener('click', handler),
+      deregisterBackIndicatorClickHandler: (handler) => this.backIndicator_.removeEventListener('click', handler),
+      registerForwardIndicatorClickHandler: (handler) => this.forwardIndicator_.addEventListener('click', handler),
+      deregisterForwardIndicatorClickHandler: (handler) => this.forwardIndicator_.removeEventListener('click', handler),
+      registerCapturedInteractionHandler: (evt, handler) => this.root_.addEventListener(evt, handler, true),
+      deregisterCapturedInteractionHandler: (evt, handler) => this.root_.removeEventListener(evt, handler, true),
+      registerWindowResizeHandler: (handler) => window.addEventListener('resize', handler),
+      deregisterWindowResizeHandler: (handler) => window.removeEventListener('resize', handler),
       getNumberOfTabs: () => this.tabBar.tabs.length,
       getComputedWidthForTabAtIndex: (index) => this.tabBar.tabs[index].computedWidth,
       getComputedLeftForTabAtIndex: (index) => this.tabBar.tabs[index].computedLeft,
@@ -85,7 +88,9 @@ export class MDCTabBarScroller extends MDCComponent {
       },
       getOffsetLeftForEventTarget: (target) => target.offsetLeft,
       getOffsetWidthForEventTarget: (target) => target.offsetWidth,
-    });
+    };
+    // tslint:enable:object-literal-sort-keys
+    return new MDCTabBarScrollerFoundation(adapter);
   }
 
   layout() {

packages/mdc-tabs/tab-bar-scroller/constants.js → packages/mdc-tabs/tab-bar-scroller/constants.ts

@@ -22,16 +22,16 @@
  */
 
 export const cssClasses = {
-  INDICATOR_FORWARD: 'mdc-tab-bar-scroller__indicator--forward',
   INDICATOR_BACK: 'mdc-tab-bar-scroller__indicator--back',
   INDICATOR_ENABLED: 'mdc-tab-bar-scroller__indicator--enabled',
+  INDICATOR_FORWARD: 'mdc-tab-bar-scroller__indicator--forward',
   TAB: 'mdc-tab',
 };
 
 export const strings = {
   FRAME_SELECTOR: '.mdc-tab-bar-scroller__scroll-frame',
+  INDICATOR_BACK_SELECTOR: '.mdc-tab-bar-scroller__indicator--back',
+  INDICATOR_FORWARD_SELECTOR: '.mdc-tab-bar-scroller__indicator--forward',
   TABS_SELECTOR: '.mdc-tab-bar-scroller__scroll-frame__tabs',
   TAB_SELECTOR: '.mdc-tab',
-  INDICATOR_FORWARD_SELECTOR: '.mdc-tab-bar-scroller__indicator--forward',
-  INDICATOR_BACK_SELECTOR: '.mdc-tab-bar-scroller__indicator--back',
 };