feat(grid-list): ts conversion (#4337)

related #4225

Author: Matt Goo

packages/mdc-grid-list/README.md

@@ -275,5 +275,5 @@ functions, with correct signatures:
 | `getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list. |
 | `getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index. |
 | `setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value. |
-| `registerResizeHandler(handler: Function) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event. |
-| `deregisterResizeHandler(handler: Function) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event. |
+| `registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event. |
+| `deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event. |

packages/mdc-grid-list/adapter.ts

@@ -0,0 +1,35 @@
+/**
+ * @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.
+ */
+
+interface MDCGridListAdapter {
+  deregisterResizeHandler(handler: EventListener): void;
+  getNumberOfTiles(): number;
+  getOffsetWidth(): number;
+  getOffsetWidthForTileAtIndex(index: number): number;
+  registerResizeHandler(handler: EventListener): void;
+  setStyleForTilesElement(
+    property: Exclude<keyof CSSStyleDeclaration, ('length' | 'parentRule')>, value: string | null,
+  ): void;
+}
+
+export {MDCGridListAdapter as default, MDCGridListAdapter};

packages/mdc-grid-list/constants.js renamed to packages/mdc-grid-list/constants.ts

@@ -20,6 +20,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
+
 export const strings = {
   TILES_SELECTOR: '.mdc-grid-list__tiles',
   TILE_SELECTOR: '.mdc-grid-tile',

packages/mdc-grid-list/foundation.js renamed to packages/mdc-grid-list/foundation.ts

@@ -22,35 +22,42 @@
  */
 
 import {MDCFoundation} from '@material/base/foundation';
+import {MDCGridListAdapter} from './adapter';
 import {strings} from './constants';
 
-export default class MDCGridListFoundation extends MDCFoundation {
+class MDCGridListFoundation extends MDCFoundation<MDCGridListAdapter> {
   static get strings() {
     return strings;
   }
 
-  static get defaultAdapter() {
+  static get defaultAdapter(): MDCGridListAdapter {
     return {
-      getOffsetWidth: () => /* number */ 0,
-      getNumberOfTiles: () => /* number */ 0,
-      getOffsetWidthForTileAtIndex: (/* index: number */) => /* number */ 0,
-      setStyleForTilesElement: (/* property: string, value: string */) => {},
-      registerResizeHandler: (/* handler: EventListener */) => {},
-      deregisterResizeHandler: (/* handler: EventListener */) => {},
+      deregisterResizeHandler: () => undefined,
+      getNumberOfTiles: () => 0,
+      getOffsetWidth: () => 0,
+      getOffsetWidthForTileAtIndex: () => 0,
+      registerResizeHandler: () => undefined,
+      setStyleForTilesElement: () => undefined,
     };
   }
-  constructor(adapter) {
+
+  private readonly resizeHandler_: EventListener;
+  private resizeFrame_ = 0;
+
+  constructor(adapter: MDCGridListAdapter) {
     super(Object.assign(MDCGridListFoundation.defaultAdapter, adapter));
-    this.resizeHandler_ = () => this.alignCenter();
-    this.resizeFrame_ = 0;
+    this.resizeHandler_ = this.alignCenter.bind(this);
   }
+
   init() {
     this.alignCenter();
     this.adapter_.registerResizeHandler(this.resizeHandler_);
   }
+
   destroy() {
     this.adapter_.deregisterResizeHandler(this.resizeHandler_);
   }
+
   alignCenter() {
     if (this.resizeFrame_ !== 0) {
       cancelAnimationFrame(this.resizeFrame_);
@@ -60,8 +67,9 @@ export default class MDCGridListFoundation extends MDCFoundation {
       this.resizeFrame_ = 0;
     });
   }
-  alignCenter_() {
-    if (this.adapter_.getNumberOfTiles() == 0) {
+
+  private alignCenter_() {
+    if (this.adapter_.getNumberOfTiles() === 0) {
       return;
     }
     const gridWidth = this.adapter_.getOffsetWidth();
@@ -70,3 +78,5 @@ export default class MDCGridListFoundation extends MDCFoundation {
     this.adapter_.setStyleForTilesElement('width', `${tilesWidth}px`);
   }
 }
+
+export {MDCGridListFoundation as default, MDCGridListFoundation};

packages/mdc-grid-list/index.js renamed to packages/mdc-grid-list/index.ts

@@ -22,30 +22,33 @@
  */
 
 import {MDCComponent} from '@material/base/component';
+import {MDCGridListFoundation} from './foundation';
 
-import MDCGridListFoundation from './foundation';
-
-export {MDCGridListFoundation};
-
-export class MDCGridList extends MDCComponent {
-  static attachTo(root) {
+class MDCGridList extends MDCComponent<MDCGridListFoundation> {
+  static attachTo(root: Element) {
     return new MDCGridList(root);
   }
 
   getDefaultFoundation() {
     return new MDCGridListFoundation({
-      getOffsetWidth: () => this.root_.offsetWidth,
+      deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
       getNumberOfTiles: () => {
         return this.root_.querySelectorAll(MDCGridListFoundation.strings.TILE_SELECTOR).length;
       },
+      getOffsetWidth: () => (this.root_ as HTMLElement).offsetWidth,
       getOffsetWidthForTileAtIndex: (index) => {
-        return this.root_.querySelectorAll(MDCGridListFoundation.strings.TILE_SELECTOR)[index].offsetWidth;
+        const tileEl = this.root_.querySelectorAll<HTMLElement>(MDCGridListFoundation.strings.TILE_SELECTOR)[index];
+        return tileEl.offsetWidth;
       },
+      registerResizeHandler: (handler) => window.addEventListener('resize', handler),
       setStyleForTilesElement: (property, value) => {
-        this.root_.querySelector(MDCGridListFoundation.strings.TILES_SELECTOR).style[property] = value;
+        const tilesEl = this.root_.querySelector<HTMLElement>(MDCGridListFoundation.strings.TILES_SELECTOR);
+        tilesEl!.style[property] = value;
       },
-      registerResizeHandler: (handler) => window.addEventListener('resize', handler),
-      deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
     });
   }
 }
+
+export {MDCGridList as default, MDCGridList};
+export * from './adapter';
+export * from './foundation';

scripts/webpack/js-bundle-factory.js

@@ -162,7 +162,7 @@ class JsBundleFactory {
         drawer: getAbsolutePath('/packages/mdc-drawer/index.js'),
         floatingLabel: getAbsolutePath('/packages/mdc-floating-label/index.js'),
         formField: getAbsolutePath('/packages/mdc-form-field/index.ts'),
-        gridList: getAbsolutePath('/packages/mdc-grid-list/index.js'),
+        gridList: getAbsolutePath('/packages/mdc-grid-list/index.ts'),
         iconButton: getAbsolutePath('/packages/mdc-icon-button/index.ts'),
         iconToggle: getAbsolutePath('/packages/mdc-icon-toggle/index.js'),
         list: getAbsolutePath('/packages/mdc-list/index.ts'),