fix(checkbox): remove native control from getters/setters of foundation

packages/mdc-checkbox/adapter.js

@@ -81,6 +81,18 @@ class MDCCheckboxAdapter {
 
   /** @return {boolean} */
   isAttachedToDOM() {}
+
+  /** @return {boolean} */
+  isIndeterminate() {}
+
+  /** @return {boolean} */
+  isChecked() {}
+
+  /** @return {boolean} */
+  hasNativeControl() {}
+
+  /** @param {boolean} disabled */
+  setNativeControlDisabled(disabled) {}
 }
 
 export default MDCCheckboxAdapter;

packages/mdc-checkbox/foundation.js

@@ -64,6 +64,10 @@ class MDCCheckboxFoundation extends MDCFoundation {
       getNativeControl: () => /* !MDCSelectionControlState */ {},
       forceLayout: () => {},
       isAttachedToDOM: () => /* boolean */ {},
+      isIndeterminate: () => /* boolean */ {},
+      isChecked: () => /* boolean */ {},
+      hasNativeControl: () => /* boolean */ {},
+      setNativeControlDisabled: (/* disabled: boolean */) => {},
     });
   }
 
@@ -88,7 +92,7 @@ class MDCCheckboxFoundation extends MDCFoundation {
 
   /** @override */
   init() {
-    this.currentCheckState_ = this.determineCheckState_(this.getNativeControl_());
+    this.currentCheckState_ = this.determineCheckState_();
     this.updateAriaChecked_();
     this.adapter_.addClass(cssClasses.UPGRADED);
     this.adapter_.registerChangeHandler(this.changeHandler_);
@@ -101,51 +105,16 @@ class MDCCheckboxFoundation extends MDCFoundation {
     this.uninstallPropertyChangeHooks_();
   }
 
-  /** @return {boolean} */
-  isChecked() {
-    return this.getNativeControl_().checked;
-  }
-
-  /** @param {boolean} checked */
-  setChecked(checked) {
-    this.getNativeControl_().checked = checked;
-  }
-
-  /** @return {boolean} */
-  isIndeterminate() {
-    return this.getNativeControl_().indeterminate;
-  }
-
-  /** @param {boolean} indeterminate */
-  setIndeterminate(indeterminate) {
-    this.getNativeControl_().indeterminate = indeterminate;
-  }
-
-  /** @return {boolean} */
-  isDisabled() {
-    return this.getNativeControl_().disabled;
-  }
-
   /** @param {boolean} disabled */
   setDisabled(disabled) {
-    this.getNativeControl_().disabled = disabled;
+    this.adapter_.setNativeControlDisabled(disabled);
     if (disabled) {
       this.adapter_.addClass(cssClasses.DISABLED);
     } else {
       this.adapter_.removeClass(cssClasses.DISABLED);
     }
   }
 
-  /** @return {?string} */
-  getValue() {
-    return this.getNativeControl_().value;
-  }
-
-  /** @param {?string} value */
-  setValue(value) {
-    this.getNativeControl_().value = value;
-  }
-
   /**
    * Handles the animationend event for the checkbox
    */
@@ -204,12 +173,12 @@ class MDCCheckboxFoundation extends MDCFoundation {
 
   /** @private */
   transitionCheckState_() {
-    const nativeCb = this.adapter_.getNativeControl();
-    if (!nativeCb) {
+    if (!this.adapter_.hasNativeControl()) {
       return;
     }
     const oldState = this.currentCheckState_;
-    const newState = this.determineCheckState_(nativeCb);
+    const newState = this.determineCheckState_();
+
     if (oldState === newState) {
       return;
     }
@@ -236,21 +205,20 @@ class MDCCheckboxFoundation extends MDCFoundation {
   }
 
   /**
-   * @param {!MDCSelectionControlState} nativeCb
    * @return {string}
    * @private
    */
-  determineCheckState_(nativeCb) {
+  determineCheckState_() {
     const {
       TRANSITION_STATE_INDETERMINATE,
       TRANSITION_STATE_CHECKED,
       TRANSITION_STATE_UNCHECKED,
     } = strings;
 
-    if (nativeCb.indeterminate) {
+    if (this.adapter_.isIndeterminate()) {
       return TRANSITION_STATE_INDETERMINATE;
     }
-    return nativeCb.checked ? TRANSITION_STATE_CHECKED : TRANSITION_STATE_UNCHECKED;
+    return this.adapter_.isChecked() ? TRANSITION_STATE_CHECKED : TRANSITION_STATE_UNCHECKED;
   }
 
   /**
@@ -292,8 +260,8 @@ class MDCCheckboxFoundation extends MDCFoundation {
   }
 
   updateAriaChecked_() {
-    // Ensure aria-checked is set to mixed if checkbox is in indeterminate state.
-    if (this.isIndeterminate()) {
+    // Ensure aria-checked is set to if checkbox is in indeterminate state.
+    if (this.adapter_.isIndeterminate()) {
       this.adapter_.setNativeControlAttr(
         strings.ARIA_CHECKED_ATTR, strings.ARIA_CHECKED_INDETERMINATE_VALUE);
     } else {

packages/mdc-checkbox/index.js

@@ -88,39 +88,59 @@ class MDCCheckbox extends MDCComponent {
       registerChangeHandler: (handler) => this.nativeCb_.addEventListener('change', handler),
       deregisterChangeHandler: (handler) => this.nativeCb_.removeEventListener('change', handler),
       getNativeControl: () => this.nativeCb_,
+      isIndeterminate: () => this.isIndeterminate_(),
+      isChecked: () => this.isChecked_(),
+      hasNativeControl: () => !!this.nativeCb_,
+      setNativeControlDisabled: (disabled) => this.nativeCb_.disabled = disabled,
       forceLayout: () => this.root_.offsetWidth,
       isAttachedToDOM: () => Boolean(this.root_.parentNode),
     });
   }
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  isIndeterminate_() {
+    return this.nativeCb_.indeterminate;
+  }
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  isChecked_() {
+    return this.nativeCb_.checked;
+  }
+
   /** @return {!MDCRipple} */
   get ripple() {
     return this.ripple_;
   }
 
   /** @return {boolean} */
   get checked() {
-    return this.foundation_.isChecked();
+    return this.isChecked_();
   }
 
   /** @param {boolean} checked */
   set checked(checked) {
-    this.foundation_.setChecked(checked);
+    this.nativeCb_.checked = checked;
   }
 
   /** @return {boolean} */
   get indeterminate() {
-    return this.foundation_.isIndeterminate();
+    return this.isIndeterminate_();
   }
 
   /** @param {boolean} indeterminate */
   set indeterminate(indeterminate) {
-    this.foundation_.setIndeterminate(indeterminate);
+    this.nativeCb_.indeterminate = indeterminate;
   }
 
   /** @return {boolean} */
   get disabled() {
-    return this.foundation_.isDisabled();
+    return this.nativeCb_.disabled;
   }
 
   /** @param {boolean} disabled */
@@ -130,12 +150,12 @@ class MDCCheckbox extends MDCComponent {
 
   /** @return {?string} */
   get value() {
-    return this.foundation_.getValue();
+    return this.nativeCb_.value;
   }
 
   /** @param {?string} value */
   set value(value) {
-    this.foundation_.setValue(value);
+    this.nativeCb_.value = value;
   }
 
   destroy() {