feat(linear-progress): Convert JS to TypeScript (#4272)

Refs #4225

Author: acdvorak

packages/material-components-web/index.js

@@ -33,7 +33,7 @@ import * as formField from '@material/form-field/index';
 import * as gridList from '@material/grid-list/index';
 import * as iconButton from '@material/icon-button/index';
 import * as iconToggle from '@material/icon-toggle/index';
-import * as linearProgress from '@material/linear-progress/index';
+import * as linearProgress from '@material/linear-progress/index.ts';
 import * as lineRipple from '@material/line-ripple/index';
 import * as list from '@material/list/index';
 import * as menu from '@material/menu/index';

packages/mdc-animation/index.ts

@@ -66,8 +66,6 @@ interface JsVendorProperty {
   standard: StandardJsEventType;
 }
 
-const transformStyleProperties = ['transform', 'WebkitTransform', 'MozTransform', 'OTransform', 'MSTransform'];
-
 // Destructure enum members to make their usages more readable.
 const {WEBKIT_ANIMATION, WEBKIT_TRANSFORM, WEBKIT_TRANSITION} = PrefixedCssPropertyName;
 const {ANIMATION, TRANSFORM, TRANSITION} = StandardCssPropertyName;
@@ -150,5 +148,4 @@ export {
   StandardJsEventType,
   getCorrectEventName,
   getCorrectPropertyName,
-  transformStyleProperties,
 };

packages/mdc-linear-progress/adapter.ts

@@ -0,0 +1,33 @@
+/**
+ * @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 MDCLinearProgressAdapter {
+  addClass(className: string): void;
+  getBuffer(): HTMLElement | null;
+  getPrimaryBar(): HTMLElement | null;
+  hasClass(className: string): boolean;
+  removeClass(className: string): void;
+  setStyle(el: HTMLElement, styleProperty: string, value: string): void;
+}
+
+export {MDCLinearProgressAdapter};

packages/mdc-linear-progress/constants.js renamed to packages/mdc-linear-progress/constants.ts

@@ -28,6 +28,6 @@ export const cssClasses = {
 };
 
 export const strings = {
-  PRIMARY_BAR_SELECTOR: '.mdc-linear-progress__primary-bar',
   BUFFER_SELECTOR: '.mdc-linear-progress__buffer',
+  PRIMARY_BAR_SELECTOR: '.mdc-linear-progress__primary-bar',
 };

packages/mdc-linear-progress/foundation.js renamed to packages/mdc-linear-progress/foundation.ts

@@ -21,12 +21,14 @@
  * THE SOFTWARE.
  */
 
+import {getCorrectPropertyName, StandardCssPropertyName} from '@material/animation';
 import MDCFoundation from '@material/base/foundation';
-import {transformStyleProperties} from '@material/animation/index.ts';
-
+import {MDCLinearProgressAdapter} from './adapter';
 import {cssClasses, strings} from './constants';
 
-export default class MDCLinearProgressFoundation extends MDCFoundation {
+const {TRANSFORM} = StandardCssPropertyName;
+
+export default class MDCLinearProgressFoundation extends MDCFoundation<MDCLinearProgressAdapter> {
   static get cssClasses() {
     return cssClasses;
   }
@@ -35,30 +37,30 @@ export default class MDCLinearProgressFoundation extends MDCFoundation {
     return strings;
   }
 
-  static get defaultAdapter() {
+  static get defaultAdapter(): MDCLinearProgressAdapter {
     return {
-      addClass: (/* className: string */) => {},
-      getPrimaryBar: () => /* el: Element */ {},
-      getBuffer: () => /* el: Element */ {},
-      hasClass: (/* className: string */) => false,
-      removeClass: (/* className: string */) => {},
-      setStyle: (/* el: Element, styleProperty: string, value: string */) => {},
+      addClass: (_className: string) => undefined,
+      getBuffer: () => null,
+      getPrimaryBar: () => null,
+      hasClass: (_className: string) => false,
+      removeClass: (_className: string) => undefined,
+      setStyle: (_el: HTMLElement, _styleProperty: string, _value: string) => undefined,
     };
   }
 
-  constructor(adapter) {
-    super(Object.assign(MDCLinearProgressFoundation.defaultAdapter, adapter));
-  }
+  private isDeterminate_: boolean;
+  private isReversed_: boolean;
+  private progress_: number;
 
   init() {
-    this.determinate_ = !this.adapter_.hasClass(cssClasses.INDETERMINATE_CLASS);
-    this.reverse_ = this.adapter_.hasClass(cssClasses.REVERSED_CLASS);
+    this.isDeterminate_ = !this.adapter_.hasClass(cssClasses.INDETERMINATE_CLASS);
+    this.isReversed_ = this.adapter_.hasClass(cssClasses.REVERSED_CLASS);
     this.progress_ = 0;
   }
 
-  setDeterminate(isDeterminate) {
-    this.determinate_ = isDeterminate;
-    if (this.determinate_) {
+  setDeterminate(isDeterminate: boolean) {
+    this.isDeterminate_ = isDeterminate;
+    if (this.isDeterminate_) {
       this.adapter_.removeClass(cssClasses.INDETERMINATE_CLASS);
       this.setScale_(this.adapter_.getPrimaryBar(), this.progress_);
     } else {
@@ -68,22 +70,22 @@ export default class MDCLinearProgressFoundation extends MDCFoundation {
     }
   }
 
-  setProgress(value) {
+  setProgress(value: number) {
     this.progress_ = value;
-    if (this.determinate_) {
+    if (this.isDeterminate_) {
       this.setScale_(this.adapter_.getPrimaryBar(), value);
     }
   }
 
-  setBuffer(value) {
-    if (this.determinate_) {
+  setBuffer(value: number) {
+    if (this.isDeterminate_) {
       this.setScale_(this.adapter_.getBuffer(), value);
     }
   }
 
-  setReverse(isReversed) {
-    this.reverse_ = isReversed;
-    if (this.reverse_) {
+  setReverse(isReversed: boolean) {
+    this.isReversed_ = isReversed;
+    if (this.isReversed_) {
       this.adapter_.addClass(cssClasses.REVERSED_CLASS);
     } else {
       this.adapter_.removeClass(cssClasses.REVERSED_CLASS);
@@ -98,10 +100,11 @@ export default class MDCLinearProgressFoundation extends MDCFoundation {
     this.adapter_.addClass(cssClasses.CLOSED_CLASS);
   }
 
-  setScale_(el, scaleValue) {
-    const value = 'scaleX(' + scaleValue + ')';
-    transformStyleProperties.forEach((transformStyleProperty) => {
-      this.adapter_.setStyle(el, transformStyleProperty, value);
-    });
+  private setScale_(el: HTMLElement | null, scaleValue: number) {
+    if (!el) {
+      return;
+    }
+    const value = `scaleX(${scaleValue})`;
+    this.adapter_.setStyle(el, getCorrectPropertyName(window, TRANSFORM), value);
   }
 }

packages/mdc-linear-progress/index.js renamed to packages/mdc-linear-progress/index.ts

@@ -26,24 +26,24 @@ import MDCLinearProgressFoundation from './foundation';
 
 export {MDCLinearProgressFoundation};
 
-export class MDCLinearProgress extends MDCComponent {
-  static attachTo(root) {
+export class MDCLinearProgress extends MDCComponent<MDCLinearProgressFoundation> {
+  static attachTo(root: Element) {
     return new MDCLinearProgress(root);
   }
 
-  set determinate(value) {
+  set determinate(value: boolean) {
     this.foundation_.setDeterminate(value);
   }
 
-  set progress(value) {
+  set progress(value: number) {
     this.foundation_.setProgress(value);
   }
 
-  set buffer(value) {
+  set buffer(value: number) {
     this.foundation_.setBuffer(value);
   }
 
-  set reverse(value) {
+  set reverse(value: boolean) {
     this.foundation_.setReverse(value);
   }
 
@@ -57,12 +57,12 @@ export class MDCLinearProgress extends MDCComponent {
 
   getDefaultFoundation() {
     return new MDCLinearProgressFoundation({
-      addClass: (className) => this.root_.classList.add(className),
-      getPrimaryBar: () => this.root_.querySelector(MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR),
+      addClass: (className: string) => this.root_.classList.add(className),
       getBuffer: () => this.root_.querySelector(MDCLinearProgressFoundation.strings.BUFFER_SELECTOR),
-      hasClass: (className) => this.root_.classList.contains(className),
-      removeClass: (className) => this.root_.classList.remove(className),
-      setStyle: (el, styleProperty, value) => el.style[styleProperty] = value,
+      getPrimaryBar: () => this.root_.querySelector(MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR),
+      hasClass: (className: string) => this.root_.classList.contains(className),
+      removeClass: (className: string) => this.root_.classList.remove(className),
+      setStyle: (el: HTMLElement, styleProperty: string, value: string) => el.style.setProperty(styleProperty, value),
     });
   }
 }

scripts/webpack/js-bundle-factory.js

@@ -167,7 +167,7 @@ class JsBundleFactory {
         iconToggle: getAbsolutePath('/packages/mdc-icon-toggle/index.js'),
         list: getAbsolutePath('/packages/mdc-list/index.js'),
         lineRipple: getAbsolutePath('/packages/mdc-line-ripple/index.js'),
-        linearProgress: getAbsolutePath('/packages/mdc-linear-progress/index.js'),
+        linearProgress: getAbsolutePath('/packages/mdc-linear-progress/index.ts'),
         menu: getAbsolutePath('/packages/mdc-menu/index.js'),
         menuSurface: getAbsolutePath('/packages/mdc-menu-surface/index.js'),
         notchedOutline: getAbsolutePath('/packages/mdc-notched-outline/index.js'),

test/unit/mdc-linear-progress/mdc-linear-progress.test.js

@@ -24,7 +24,7 @@
 import {assert} from 'chai';
 import bel from 'bel';
 
-import {MDCLinearProgress, MDCLinearProgressFoundation} from '../../../packages/mdc-linear-progress/index';
+import {MDCLinearProgress, MDCLinearProgressFoundation} from '../../../packages/mdc-linear-progress/index.ts';
 
 function getFixture() {
   return bel`