feat(floating-label): Convert JS to TypeScript

packages/mdc-floating-label/adapter.js → packages/mdc-floating-label/adapter.ts

@@ -21,50 +21,40 @@
  * THE SOFTWARE.
  */
 
-/* eslint no-unused-vars: [2, {"args": "none"}] */
+import {EventType, SpecificEventListener} from '@material/base';
 
 /**
- * Adapter for MDC Floating Label.
- *
- * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the floating label 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 MDCFloatingLabelAdapter {
+interface MDCFloatingLabelAdapter {
   /**
    * Adds a class to the label element.
-   * @param {string} className
    */
-  addClass(className) {}
+  addClass(className: string): void;
 
   /**
    * Removes a class from the label element.
-   * @param {string} className
    */
-  removeClass(className) {}
+  removeClass(className: string): void;
 
   /**
    * Returns the width of the label element.
-   * @return {number}
    */
-  getWidth() {}
+  getWidth(): number;
 
   /**
    * Registers an event listener on the root element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
    */
-  registerInteractionHandler(evtType, handler) {}
+  registerInteractionHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
 
   /**
    * Deregisters an event listener on the root element for a given event.
-   * @param {string} evtType
-   * @param {function(!Event): undefined} handler
    */
-  deregisterInteractionHandler(evtType, handler) {}
+  deregisterInteractionHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
 }
 
-export default MDCFloatingLabelAdapter;
+export {MDCFloatingLabelAdapter as default, MDCFloatingLabelAdapter};

packages/mdc-floating-label/constants.js → packages/mdc-floating-label/constants.ts

@@ -21,7 +21,6 @@
  * THE SOFTWARE.
  */
 
-/** @enum {string} */
 const cssClasses = {
   LABEL_FLOAT_ABOVE: 'mdc-floating-label--float-above',
   LABEL_SHAKE: 'mdc-floating-label--shake',

packages/mdc-floating-label/foundation.js → packages/mdc-floating-label/foundation.ts

@@ -21,42 +21,36 @@
  * THE SOFTWARE.
  */
 
+import {SpecificEventListener} from '@material/base';
 import {MDCFoundation} from '@material/base/foundation';
-import MDCFloatingLabelAdapter from './adapter';
+import {MDCFloatingLabelAdapter} from './adapter';
 import {cssClasses} from './constants';
 
-/**
- * @extends {MDCFoundation<!MDCFloatingLabelAdapter>}
- * @final
- */
-class MDCFloatingLabelFoundation extends MDCFoundation {
-  /** @return enum {string} */
+class MDCFloatingLabelFoundation extends MDCFoundation<MDCFloatingLabelAdapter> {
   static get cssClasses() {
     return cssClasses;
   }
 
   /**
-   * {@see MDCFloatingLabelAdapter} for typing information on parameters and return
-   * types.
-   * @return {!MDCFloatingLabelAdapter}
+   * See {@link MDCFloatingLabelAdapter} for typing information on parameters and return types.
    */
-  static get defaultAdapter() {
-    return /** @type {!MDCFloatingLabelAdapter} */ ({
-      addClass: () => {},
-      removeClass: () => {},
-      getWidth: () => {},
-      registerInteractionHandler: () => {},
-      deregisterInteractionHandler: () => {},
-    });
+  static get defaultAdapter(): MDCFloatingLabelAdapter {
+    // tslint:disable:object-literal-sort-keys
+    return {
+      addClass: () => undefined,
+      removeClass: () => undefined,
+      getWidth: () => 0,
+      registerInteractionHandler: () => undefined,
+      deregisterInteractionHandler: () => undefined,
+    };
+    // tslint:enable:object-literal-sort-keys
   }
 
-  /**
-   * @param {!MDCFloatingLabelAdapter} adapter
-   */
-  constructor(adapter) {
-    super(Object.assign(MDCFloatingLabelFoundation.defaultAdapter, adapter));
+  private readonly shakeAnimationEndHandler_: SpecificEventListener<'animationend'>;
+
+  constructor(adapter: Partial<MDCFloatingLabelAdapter> = {}) {
+    super({...MDCFloatingLabelFoundation.defaultAdapter, ...adapter});
 
-    /** @private {function(!Event): undefined} */
     this.shakeAnimationEndHandler_ = () => this.handleShakeAnimationEnd_();
   }
 
@@ -70,18 +64,16 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
 
   /**
    * Returns the width of the label element.
-   * @return {number}
    */
-  getWidth() {
+  getWidth(): number {
     return this.adapter_.getWidth();
   }
 
   /**
-   * Styles the label to produce the label shake for errors.
-   * @param {boolean} shouldShake adds shake class if true,
-   * otherwise removes shake class.
+   * Styles the label to produce a shake animation to indicate an error.
+   * @param shouldShake If true, adds the shake CSS class; otherwise, removes shake class.
    */
-  shake(shouldShake) {
+  shake(shouldShake: boolean) {
     const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
     if (shouldShake) {
       this.adapter_.addClass(LABEL_SHAKE);
@@ -92,10 +84,9 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
 
   /**
    * Styles the label to float or dock.
-   * @param {boolean} shouldFloat adds float class if true, otherwise remove
-   * float and shake class to dock label.
+   * @param shouldFloat If true, adds the float CSS class; otherwise, removes float and shake classes to dock the label.
    */
-  float(shouldFloat) {
+  float(shouldFloat: boolean) {
     const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
     if (shouldFloat) {
       this.adapter_.addClass(LABEL_FLOAT_ABOVE);
@@ -105,13 +96,10 @@ class MDCFloatingLabelFoundation extends MDCFoundation {
     }
   }
 
-  /**
-   * Handles an interaction event on the root element.
-   */
-  handleShakeAnimationEnd_() {
+  private handleShakeAnimationEnd_() {
     const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
     this.adapter_.removeClass(LABEL_SHAKE);
   }
 }
 
-export default MDCFloatingLabelFoundation;
+export {MDCFloatingLabelFoundation as default, MDCFloatingLabelFoundation};

packages/mdc-floating-label/index.js → packages/mdc-floating-label/index.ts

@@ -22,59 +22,46 @@
  */
 
 import {MDCComponent} from '@material/base/component';
-import MDCFloatingLabelAdapter from './adapter';
-import MDCFloatingLabelFoundation from './foundation';
+import {MDCFloatingLabelFoundation} from './foundation';
 
-/**
- * @extends {MDCComponent<!MDCFloatingLabelFoundation>}
- * @final
- */
-class MDCFloatingLabel extends MDCComponent {
-  /**
-   * @param {!Element} root
-   * @return {!MDCFloatingLabel}
-   */
-  static attachTo(root) {
+class MDCFloatingLabel extends MDCComponent<MDCFloatingLabelFoundation> {
+  static attachTo(root: Element): MDCFloatingLabel {
     return new MDCFloatingLabel(root);
   }
 
   /**
    * Styles the label to produce the label shake for errors.
-   * @param {boolean} shouldShake styles the label to shake by adding shake class
-   * if true, otherwise will stop shaking by removing shake class.
+   * @param shouldShake If true, shakes the label by adding a CSS class; otherwise, stops shaking by removing the class.
    */
-  shake(shouldShake) {
+  shake(shouldShake: boolean) {
     this.foundation_.shake(shouldShake);
   }
 
   /**
-   * Styles label to float/dock.
-   * @param {boolean} shouldFloat styles the label to float by adding float class
-   * if true, otherwise docks the label by removing the float class.
+   * Styles the label to float/dock.
+   * @param shouldFloat If true, floats the label by adding a CSS class; otherwise, docks it by removing the class.
    */
-  float(shouldFloat) {
+  float(shouldFloat: boolean) {
     this.foundation_.float(shouldFloat);
   }
 
-  /**
-   * @return {number}
-   */
-  getWidth() {
+  getWidth(): number {
     return this.foundation_.getWidth();
   }
 
-  /**
-   * @return {!MDCFloatingLabelFoundation}
-   */
-  getDefaultFoundation() {
+  getDefaultFoundation(): MDCFloatingLabelFoundation {
+    // tslint:disable:object-literal-sort-keys
     return new MDCFloatingLabelFoundation({
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
       getWidth: () => this.root_.scrollWidth,
       registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
       deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
     });
+    // tslint:enable:object-literal-sort-keys
   }
 }
 
-export {MDCFloatingLabel, MDCFloatingLabelFoundation};
+export {MDCFloatingLabel as default, MDCFloatingLabel};
+export * from './adapter';
+export * from './foundation';

scripts/webpack/js-bundle-factory.js

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