feat(top-app-bar): Convert JS to TypeScript (#4397)

Refs #4225

packages/mdc-top-app-bar/adapter.js → packages/mdc-top-app-bar/adapter.ts

@@ -21,87 +21,67 @@
  * THE SOFTWARE.
  */
 
-/* eslint no-unused-vars: [2, {"args": "none"}] */
+import {EventType, SpecificEventListener} from '@material/base/types';
 
 /**
- * Adapter for MDC Top App Bar
- *
- * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the Top App Bar into your framework. See
- * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
- * for more information.
- *
- * @record
+ * Defines the shape of the adapter expected by the foundation.
+ * Implement this adapter for your framework of choice to delegate updates to
+ * the component in your framework of choice. See architecture documentation
+ * for more details.
+ * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
  */
-class MDCTopAppBarAdapter {
+interface MDCTopAppBarAdapter {
   /**
    * Adds a class to the root Element.
-   * @param {string} className
    */
-  addClass(className) {}
+  addClass(className: string): void;
 
   /**
    * Removes a class from the root Element.
-   * @param {string} className
    */
-  removeClass(className) {}
+  removeClass(className: string): void;
 
   /**
    * Returns true if the root Element contains the given class.
-   * @param {string} className
-   * @return {boolean}
    */
-  hasClass(className) {}
+  hasClass(className: string): boolean;
 
   /**
    * Sets the specified inline style property on the root Element to the given value.
-   * @param {string} property
-   * @param {string} value
    */
-  setStyle(property, value) {}
+  setStyle(property: string, value: string): void;
 
   /**
    * Gets the height of the top app bar.
-   * @return {number}
    */
-  getTopAppBarHeight() {}
+  getTopAppBarHeight(): number;
 
   /**
    * Registers an event handler on the navigation icon element for a given event.
-   * @param {string} type
-   * @param {function(!Event): undefined} handler
    */
-  registerNavigationIconInteractionHandler(type, handler) {}
+  registerNavigationIconInteractionHandler<K extends EventType>(type: K, handler: SpecificEventListener<K>): void;
 
   /**
    * Deregisters an event handler on the navigation icon element for a given event.
-   * @param {string} type
-   * @param {function(!Event): undefined} handler
    */
-  deregisterNavigationIconInteractionHandler(type, handler) {}
+  deregisterNavigationIconInteractionHandler<K extends EventType>(type: K, handler: SpecificEventListener<K>): void;
 
   /**
    * Emits an event when the navigation icon is clicked.
    */
-  notifyNavigationIconClicked() {}
+  notifyNavigationIconClicked(): void;
 
-  /** @param {function(!Event)} handler */
-  registerScrollHandler(handler) {}
+  registerScrollHandler(handler: SpecificEventListener<'scroll'>): void;
 
-  /** @param {function(!Event)} handler */
-  deregisterScrollHandler(handler) {}
+  deregisterScrollHandler(handler: SpecificEventListener<'scroll'>): void;
 
-  /** @param {function(!Event)} handler */
-  registerResizeHandler(handler) {}
+  registerResizeHandler(handler: SpecificEventListener<'resize'>): void;
 
-  /** @param {function(!Event)} handler */
-  deregisterResizeHandler(handler) {}
+  deregisterResizeHandler(handler: SpecificEventListener<'resize'>): void;
 
-  /** @return {number} */
-  getViewportScrollY() {}
+  getViewportScrollY(): number;
 
-  /** @return {number} */
-  getTotalActionItems() {}
+  getTotalActionItems(): number;
 }
 
-export default MDCTopAppBarAdapter;
+export {MDCTopAppBarAdapter as default, MDCTopAppBarAdapter};

packages/mdc-top-app-bar/constants.js → packages/mdc-top-app-bar/constants.ts

@@ -21,22 +21,19 @@
  * THE SOFTWARE.
  */
 
-/** @enum {string} */
 const cssClasses = {
   FIXED_CLASS: 'mdc-top-app-bar--fixed',
   FIXED_SCROLLED_CLASS: 'mdc-top-app-bar--fixed-scrolled',
   SHORT_CLASS: 'mdc-top-app-bar--short',
-  SHORT_HAS_ACTION_ITEM_CLASS: 'mdc-top-app-bar--short-has-action-item',
   SHORT_COLLAPSED_CLASS: 'mdc-top-app-bar--short-collapsed',
+  SHORT_HAS_ACTION_ITEM_CLASS: 'mdc-top-app-bar--short-has-action-item',
 };
 
-/** @enum {number} */
 const numbers = {
   DEBOUNCE_THROTTLE_RESIZE_TIME_MS: 100,
   MAX_TOP_APP_BAR_HEIGHT: 128,
 };
 
-/** @enum {string} */
 const strings = {
   ACTION_ITEM_SELECTOR: '.mdc-top-app-bar__action-item',
   NAVIGATION_EVENT: 'MDCTopAppBar:nav',
@@ -45,4 +42,4 @@ const strings = {
   TITLE_SELECTOR: '.mdc-top-app-bar__title',
 };
 
-export {strings, cssClasses, numbers};
+export {cssClasses, numbers, strings};

packages/mdc-top-app-bar/fixed/foundation.js → packages/mdc-top-app-bar/fixed/foundation.ts

@@ -21,39 +21,25 @@
  * THE SOFTWARE.
  */
 
+import {MDCTopAppBarAdapter} from '../adapter';
 import {cssClasses} from '../constants';
-import MDCTopAppBarAdapter from '../adapter';
-import MDCTopAppBarFoundation from '../foundation';
+import {MDCTopAppBarFoundation} from '../standard/foundation';
 
-/**
- * @extends {MDCTopAppBarFoundation<!MDCFixedTopAppBarFoundation>}
- * @final
- */
 class MDCFixedTopAppBarFoundation extends MDCTopAppBarFoundation {
   /**
-   * @param {!MDCTopAppBarAdapter} adapter
+   * State variable for the previous scroll iteration top app bar state
    */
-  constructor(adapter) {
+  private wasScrolled_ = false;
+
+  /* istanbul ignore next: optional argument is not a branch statement */
+  constructor(adapter?: Partial<MDCTopAppBarAdapter>) {
     super(adapter);
-    /** State variable for the previous scroll iteration top app bar state */
-    this.wasScrolled_ = false;
 
     this.scrollHandler_ = () => this.fixedScrollHandler_();
   }
 
-  init() {
-    super.init();
-    this.adapter_.registerScrollHandler(this.scrollHandler_);
-  }
-
-  destroy() {
-    super.destroy();
-    this.adapter_.deregisterScrollHandler(this.scrollHandler_);
-  }
-
   /**
-   * Scroll handler for applying/removing the modifier class
-   * on the fixed top app bar.
+   * Scroll handler for applying/removing the modifier class on the fixed top app bar.
    */
   fixedScrollHandler_() {
     const currentScroll = this.adapter_.getViewportScrollY();
@@ -72,4 +58,4 @@ class MDCFixedTopAppBarFoundation extends MDCTopAppBarFoundation {
   }
 }
 
-export default MDCFixedTopAppBarFoundation;
+export {MDCFixedTopAppBarFoundation as default, MDCFixedTopAppBarFoundation};