feat(radio): ts conversion (#4329)

Author: Matt Goo

packages/mdc-checkbox/adapter.ts

@@ -57,4 +57,4 @@ interface MDCCheckboxAdapter {
   setNativeControlDisabled(disabled: boolean): void;
 }
 
-export default MDCCheckboxAdapter;
+export {MDCCheckboxAdapter as default, MDCCheckboxAdapter};

packages/mdc-checkbox/foundation.ts

@@ -194,4 +194,4 @@ class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {
   }
 }
 
-export default MDCCheckboxFoundation;
+export {MDCCheckboxFoundation as default, MDCCheckboxFoundation};

packages/mdc-linear-progress/adapter.ts

@@ -30,4 +30,4 @@ interface MDCLinearProgressAdapter {
   setStyle(el: HTMLElement, styleProperty: string, value: string): void;
 }
 
-export {MDCLinearProgressAdapter};
+export {MDCLinearProgressAdapter as default, MDCLinearProgressAdapter};

packages/mdc-linear-progress/foundation.ts

@@ -26,7 +26,7 @@ import MDCFoundation from '@material/base/foundation';
 import {MDCLinearProgressAdapter} from './adapter';
 import {cssClasses, strings} from './constants';
 
-export default class MDCLinearProgressFoundation extends MDCFoundation<MDCLinearProgressAdapter> {
+class MDCLinearProgressFoundation extends MDCFoundation<MDCLinearProgressAdapter> {
   static get cssClasses() {
     return cssClasses;
   }
@@ -106,3 +106,5 @@ export default class MDCLinearProgressFoundation extends MDCFoundation<MDCLinear
     this.adapter_.setStyle(el, getCorrectPropertyName(window, 'transform'), value);
   }
 }
+
+export {MDCLinearProgressFoundation as default, MDCLinearProgressFoundation};

packages/mdc-menu-surface/adapter.ts

@@ -69,4 +69,4 @@ interface MDCMenuSurfaceAdapter {
   notifyOpen(): void;
 }
 
-export {MDCMenuSurfaceAdapter};
+export {MDCMenuSurfaceAdapter as default, MDCMenuSurfaceAdapter};

packages/mdc-menu-surface/foundation.ts

@@ -500,4 +500,4 @@ class MDCMenuSurfaceFoundation extends MDCFoundation<MDCMenuSurfaceAdapter> {
   }
 }
 
-export {MDCMenuSurfaceFoundation};
+export {MDCMenuSurfaceFoundation as default, MDCMenuSurfaceFoundation};

packages/mdc-radio/adapter.js renamed to packages/mdc-radio/adapter.ts

@@ -21,35 +21,20 @@
  * THE SOFTWARE.
  */
 
-/* eslint-disable no-unused-vars */
-import {MDCSelectionControlState} from '@material/selection-control/index';
-
-/* eslint no-unused-vars: [2, {"args": "none"}] */
-
 /**
  * Adapter for MDC Radio. Provides an interface for managing
- * - classes
- * - dom
- *
- * Additionally, provides type information for the adapter to the Closure
- * compiler.
  *
  * 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
  *
- * @record
  */
-class MDCRadioAdapter {
-  /** @param {string} className */
-  addClass(className) {}
-
-  /** @param {string} className */
-  removeClass(className) {}
 
-  /** @param {boolean} disabled */
-  setNativeControlDisabled(disabled) {}
+interface MDCRadioAdapter {
+  addClass(className: string): void;
+  removeClass(className: string): void;
+  setNativeControlDisabled(disabled: boolean): void;
 }
 
-export default MDCRadioAdapter;
+export {MDCRadioAdapter as default, MDCRadioAdapter};

packages/mdc-radio/constants.js renamed to packages/mdc-radio/constants.ts

@@ -21,15 +21,13 @@
  * THE SOFTWARE.
  */
 
-/** @enum {string} */
 const strings = {
   NATIVE_CONTROL_SELECTOR: '.mdc-radio__native-control',
 };
 
-/** @enum {string} */
 const cssClasses = {
-  ROOT: 'mdc-radio',
   DISABLED: 'mdc-radio--disabled',
+  ROOT: 'mdc-radio',
 };
 
 export {strings, cssClasses};

packages/mdc-radio/foundation.js renamed to packages/mdc-radio/foundation.ts

@@ -22,37 +22,29 @@
  */
 
 import MDCFoundation from '@material/base/foundation';
-/* eslint-disable no-unused-vars */
-import {MDCSelectionControlState} from '@material/selection-control/index';
-import MDCRadioAdapter from './adapter';
-/* eslint-enable no-unused-vars */
+
+import {MDCRadioAdapter} from './adapter';
 import {cssClasses, strings} from './constants';
 
-/**
- * @extends {MDCFoundation<!MDCRadioAdapter>}
- */
-class MDCRadioFoundation extends MDCFoundation {
-  /** @return enum {cssClasses} */
+class MDCRadioFoundation extends MDCFoundation<MDCRadioAdapter> {
+
   static get cssClasses() {
     return cssClasses;
   }
 
-  /** @return enum {strings} */
   static get strings() {
     return strings;
   }
 
-  /** @return {!MDCRadioAdapter} */
-  static get defaultAdapter() {
-    return /** @type {!MDCRadioAdapter} */ ({
-      addClass: (/* className: string */) => {},
-      removeClass: (/* className: string */) => {},
-      setNativeControlDisabled: (/* disabled: boolean */) => {},
-    });
+  static get defaultAdapter(): MDCRadioAdapter {
+    return {
+      addClass: () => undefined,
+      removeClass: () => undefined,
+      setNativeControlDisabled: () => undefined,
+    };
   }
 
-  /** @param {boolean} disabled */
-  setDisabled(disabled) {
+  setDisabled(disabled: boolean) {
     const {DISABLED} = MDCRadioFoundation.cssClasses;
     this.adapter_.setNativeControlDisabled(disabled);
     if (disabled) {
@@ -63,4 +55,4 @@ class MDCRadioFoundation extends MDCFoundation {
   }
 }
 
-export default MDCRadioFoundation;
+export {MDCRadioFoundation as default, MDCRadioFoundation};

packages/mdc-radio/index.js renamed to packages/mdc-radio/index.ts

@@ -22,106 +22,92 @@
  */
 
 import MDCComponent from '@material/base/component';
-/* eslint-disable no-unused-vars */
-import {MDCSelectionControlState, MDCSelectionControl} from '@material/selection-control/index';
-/* eslint-enable no-unused-vars */
-import MDCRadioFoundation from './foundation';
+import {EventType, SpecificEventListener} from '@material/dom/index';
+import {RippleCapableSurface} from '@material/ripple/index';
 import {MDCRipple, MDCRippleFoundation} from '@material/ripple/index';
+import {MDCSelectionControl} from '@material/selection-control/index';
 
-/**
- * @extends MDCComponent<!MDCRadioFoundation>
- * @implements {MDCSelectionControl}
- */
-class MDCRadio extends MDCComponent {
-  static attachTo(root) {
+import MDCRadioFoundation from './foundation';
+
+class MDCRadio extends MDCComponent<MDCRadioFoundation> implements RippleCapableSurface, MDCSelectionControl {
+
+  static attachTo(root: Element) {
     return new MDCRadio(root);
   }
 
-  /** @return {boolean} */
-  get checked() {
+  // Public visibility for this property is required by RippleCapableSurface.
+  root_!: Element; // assigned in MDCComponent constructor
+
+  private readonly ripple_: MDCRipple = this.initRipple_();
+
+  get checked(): boolean {
     return this.nativeControl_.checked;
   }
 
-  /** @param {boolean} checked */
-  set checked(checked) {
+  set checked(checked: boolean) {
     this.nativeControl_.checked = checked;
   }
 
-  /** @return {boolean} */
   get disabled() {
     return this.nativeControl_.disabled;
   }
 
-  /** @param {boolean} disabled */
-  set disabled(disabled) {
+  set disabled(disabled: boolean) {
     this.foundation_.setDisabled(disabled);
   }
 
-  /** @return {?string} */
   get value() {
     return this.nativeControl_.value;
   }
 
-  /** @param {?string} value */
-  set value(value) {
+  set value(value: string) {
     this.nativeControl_.value = value;
   }
 
-  /** @return {!MDCRipple} */
-  get ripple() {
+  get ripple(): MDCRipple {
     return this.ripple_;
   }
 
-  constructor(...args) {
-    super(...args);
+  destroy() {
+    this.ripple_.destroy();
+    super.destroy();
+  }
 
-    /** @private {!MDCRipple} */
-    this.ripple_ = this.initRipple_();
+  getDefaultFoundation() {
+    return new MDCRadioFoundation({
+      addClass: (className) => this.root_.classList.add(className),
+      removeClass: (className) => this.root_.classList.remove(className),
+      setNativeControlDisabled: (disabled) => this.nativeControl_.disabled = disabled,
+    });
   }
 
-  /**
-   * @return {!MDCRipple}
-   * @private
-   */
-  initRipple_() {
+  private initRipple_(): MDCRipple {
     const adapter = Object.assign(MDCRipple.createAdapter(this), {
-      isUnbounded: () => true,
+      deregisterInteractionHandler:
+        <K extends EventType>(type: K, handler: SpecificEventListener<K>) =>
+          this.nativeControl_.removeEventListener(type, handler),
       // Radio buttons technically go "active" whenever there is *any* keyboard interaction. This is not the
       // UI we desire.
       isSurfaceActive: () => false,
-      registerInteractionHandler: (type, handler) => this.nativeControl_.addEventListener(type, handler),
-      deregisterInteractionHandler: (type, handler) => this.nativeControl_.removeEventListener(type, handler),
+      isUnbounded: () => true,
+      registerInteractionHandler: <K extends EventType>(type: K, handler: SpecificEventListener<K>) =>
+        this.nativeControl_.addEventListener(type, handler),
     });
     const foundation = new MDCRippleFoundation(adapter);
     return new MDCRipple(this.root_, foundation);
   }
 
   /**
    * Returns the state of the native control element, or null if the native control element is not present.
-   * @return {?MDCSelectionControlState}
-   * @private
    */
-  get nativeControl_() {
+  private get nativeControl_(): HTMLInputElement {
     const {NATIVE_CONTROL_SELECTOR} = MDCRadioFoundation.strings;
-    const el = /** @type {?MDCSelectionControlState} */ (
-      this.root_.querySelector(NATIVE_CONTROL_SELECTOR));
+    const el = this.root_.querySelector<HTMLInputElement>(NATIVE_CONTROL_SELECTOR);
+    if (!el) {
+      throw new Error(`Radio component requires a ${NATIVE_CONTROL_SELECTOR} element`);
+    }
     return el;
   }
-
-  destroy() {
-    this.ripple_.destroy();
-    super.destroy();
-  }
-
-  /** @return {!MDCRadioFoundation} */
-  getDefaultFoundation() {
-    return new MDCRadioFoundation({
-      addClass: (className) => this.root_.classList.add(className),
-      removeClass: (className) => this.root_.classList.remove(className),
-      setNativeControlDisabled: (disabled) => this.nativeControl_.disabled = disabled,
-    });
-  }
 }
 
-
 export {MDCRadio, MDCRadioFoundation};

packages/mdc-radio/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@material/animation": "^0.41.0",
     "@material/base": "^0.41.0",
+    "@material/dom": "^0.41.0",
     "@material/ripple": "^0.44.0",
     "@material/selection-control": "^0.44.0",
     "@material/theme": "^0.43.0"

packages/mdc-ripple/adapter.ts

@@ -21,33 +21,19 @@
  * THE SOFTWARE.
  */
 
-/**
- * Adapter for MDC Ripple. Provides an interface for managing
- * - classes
- * - dom
- * - CSS variables
- * - position
- * - dimensions
- * - scroll position
- * - event handlers
- * - unbounded, active and disabled states
- *
- * Additionally, provides type information for the adapter to the Closure
- * compiler.
- *
- * 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
- *
- */
 import {EventType, SpecificEventListener} from '@material/dom/index';
 
 interface Point {
   x: number;
   y: number;
 }
 
+/**
+ * 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
+ */
 interface MDCRippleAdapter {
   browserSupportsCssVars(): boolean;
 

packages/mdc-ripple/foundation.ts

@@ -539,4 +539,4 @@ class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {
   }
 }
 
-export default MDCRippleFoundation;
+export {MDCRippleFoundation as default, MDCRippleFoundation};

scripts/webpack/js-bundle-factory.js

@@ -171,7 +171,7 @@ class JsBundleFactory {
         menu: getAbsolutePath('/packages/mdc-menu/index.js'),
         menuSurface: getAbsolutePath('/packages/mdc-menu-surface/index.ts'),
         notchedOutline: getAbsolutePath('/packages/mdc-notched-outline/index.js'),
-        radio: getAbsolutePath('/packages/mdc-radio/index.js'),
+        radio: getAbsolutePath('/packages/mdc-radio/index.ts'),
         ripple: getAbsolutePath('/packages/mdc-ripple/index.ts'),
         select: getAbsolutePath('/packages/mdc-select/index.js'),
         selectionControl: getAbsolutePath('/packages/mdc-selection-control/index.ts'),