chore(text-field): Split out input into subelement (#1631)

BREAKING CHANGE: Please update implementations of MDCTextFieldAdapter to implement getInputFoundation(). Methods registerInputInteractionHandler()/deregisterInputInteractionHandler() have been renamed to registerInputEventHandler()/deregisterInputEventHandler(). getNativeInput() is no longer in MDCTextFieldAdapter. See the README for mdc-textfield/input for more information.

Author: bonniezhou

packages/mdc-textfield/README.md

@@ -323,21 +323,21 @@ complicated.
 
 | Method Signature | Description |
 | --- | --- |
-| addClass(className: string) => void | Adds a class to the root element |
-| removeClass(className: string) => void | Removes a class from the root element |
-| addClassToLabel(className: string) => void | Adds a class to the label element. We recommend you add a conditional check here, and in `removeClassFromLabel` for whether or not the label is present so that the JS component could be used with text fields that don't require a label, such as the full-width text field. |
-| removeClassFromLabel(className: string) => void | Removes a class from the label element |
-| eventTargetHasClass(target: HTMLElement, className: string) => boolean | Returns true if classname exists for a given target element |
-| registerTextFieldInteractionHandler(evtType: string, handler: EventListener) => void | Registers an event handler on the root element for a given event |
-| deregisterTextFieldInteractionHandler(evtType: string, handler: EventListener) => void | Deregisters an event handler on the root element for a given event |
-| notifyIconAction() => void | Emits a custom event "MDCTextField:icon" denoting a user has clicked the icon |
-| registerInputInteractionHandler(evtType: string, handler: EventListener) => void | Registers an event listener on the native input element for a given event |
-| deregisterInputInteractionHandler(evtType: string, handler: EventListener) => void | Deregisters an event listener on the native input element for a given event |
-| registerBottomLineEventHandler(evtType: string, handler: EventListener) => void | Registers an event listener on the bottom line element for a given event |
-| deregisterBottomLineEventHandler(evtType: string, handler: EventListener) => void | Deregisters an event listener on the bottom line element for a given event |
-| getNativeInput() => {value: string, disabled: boolean, badInput: boolean, checkValidity: () => boolean}? | Returns an object representing the native text input element, with a similar API shape. The object returned should include the `value`, `disabled` and `badInput` properties, as well as the `checkValidity()` function. We _never_ alter the value within our code, however we _do_ update the disabled property, so if you choose to duck-type the return value for this method in your implementation it's important to keep this in mind. Also note that this method can return null, which the foundation will handle gracefully. |
-| getBottomLineFoundation() => MDCTextFieldBottomLineFoundation | Returns the instance of the bottom line element's foundation |
-| getHelperTextFoundation() => MDCTextFieldHelperTextFoundation | Returns the instance of the helper text element's foundation |
+| `addClass(className: string) => void` | Adds a class to the root element |
+| `removeClass(className: string) => void` | Removes a class from the root element |
+| `addClassToLabel(className: string) => void` | Adds a class to the label element. We recommend you add a conditional check here, and in `removeClassFromLabel` for whether or not the label is present so that the JS component could be used with text fields that don't require a label, such as the full-width text field. |
+| `removeClassFromLabel(className: string) => void` | Removes a class from the label element |
+| `eventTargetHasClass(target: HTMLElement, className: string) => boolean` | Returns true if classname exists for a given target element |
+| `registerTextFieldInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event handler on the root element for a given event |
+| `deregisterTextFieldInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event handler on the root element for a given event |
+| `notifyIconAction() => void` | Emits a custom event "MDCTextField:icon" denoting a user has clicked the icon |
+| `registerInputEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the input element for a given event |
+| `deregisterInputEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the input element for a given event |
+| `registerBottomLineEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the bottom line element for a given event |
+| `deregisterBottomLineEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the bottom line element for a given event |
+| `getBottomLineFoundation() => MDCTextFieldBottomLineFoundation` | Returns the instance of the bottom line element's foundation |
+| `getHelperTextFoundation() => MDCTextFieldHelperTextFoundation` | Returns the instance of the helper text element's foundation |
+| `getInputFoundation() => MDCTextFieldInputFoundation` | Returns the instance of the input element's foundation |
 
 #### The full foundation API
 

packages/mdc-textfield/adapter.js

@@ -18,19 +18,10 @@
 /* eslint-disable no-unused-vars */
 import MDCTextFieldBottomLineFoundation from './bottom-line/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
+import MDCTextFieldInputFoundation from './input/foundation';
 
 /* eslint no-unused-vars: [2, {"args": "none"}] */
 
-/**
- * @typedef {{
- *   value: string,
- *   disabled: boolean,
- *   badInput: boolean,
- *   checkValidity: (function(): boolean)
- * }}
- */
-let NativeInputType;
-
 /**
  * Adapter for MDC Text Field.
  *
@@ -104,18 +95,20 @@ class MDCTextFieldAdapter {
   notifyIconAction() {}
 
   /**
-   * Registers an event listener on the native input element for a given event.
+
+  /**
+   * Registers an event listener on the input element for a given event.
    * @param {string} evtType
    * @param {function(!Event): undefined} handler
    */
-  registerInputInteractionHandler(evtType, handler) {}
+  registerInputEventHandler(evtType, handler) {}
 
   /**
-   * Deregisters an event listener on the native input element for a given event.
+   * Deregisters an event listener on the input element for a given event.
    * @param {string} evtType
    * @param {function(!Event): undefined} handler
    */
-  deregisterInputInteractionHandler(evtType, handler) {}
+  deregisterInputEventHandler(evtType, handler) {}
 
   /**
    * Registers an event listener on the bottom line element for a given event.
@@ -131,18 +124,6 @@ class MDCTextFieldAdapter {
    */
   deregisterBottomLineEventHandler(evtType, handler) {}
 
-  /**
-   * Returns an object representing the native text input element, with a
-   * similar API shape. The object returned should include the value, disabled
-   * and badInput properties, as well as the checkValidity() function. We never
-   * alter the value within our code, however we do update the disabled
-   * property, so if you choose to duck-type the return value for this method
-   * in your implementation it's important to keep this in mind. Also note that
-   * this method can return null, which the foundation will handle gracefully.
-   * @return {?Element|?NativeInputType}
-   */
-  getNativeInput() {}
-
   /**
    * Returns the foundation for the bottom line element. Returns undefined if
    * there is no bottom line element.
@@ -156,6 +137,12 @@ class MDCTextFieldAdapter {
    * @return {?MDCTextFieldHelperTextFoundation}
    */
   getHelperTextFoundation() {}
+
+  /**
+   * Returns the foundation for the input element.
+   * @return {!MDCTextFieldInputFoundation}
+   */
+  getInputFoundation() {}
 }
 
-export {MDCTextFieldAdapter, NativeInputType};
+export {MDCTextFieldAdapter};

packages/mdc-textfield/foundation.js

@@ -16,8 +16,9 @@
  */
 
 import MDCFoundation from '@material/base/foundation';
-import {MDCTextFieldAdapter, NativeInputType} from './adapter';
+import {MDCTextFieldAdapter} from './adapter';
 import MDCTextFieldBottomLineFoundation from './bottom-line/foundation';
+import MDCTextFieldInputFoundation from './input/foundation';
 import {cssClasses, strings} from './constants';
 
 
@@ -52,13 +53,13 @@ class MDCTextFieldFoundation extends MDCFoundation {
       registerTextFieldInteractionHandler: () => {},
       deregisterTextFieldInteractionHandler: () => {},
       notifyIconAction: () => {},
-      registerInputInteractionHandler: () => {},
-      deregisterInputInteractionHandler: () => {},
+      registerInputEventHandler: () => {},
+      deregisterInputEventHandler: () => {},
       registerBottomLineEventHandler: () => {},
       deregisterBottomLineEventHandler: () => {},
-      getNativeInput: () => {},
       getBottomLineFoundation: () => {},
       getHelperTextFoundation: () => {},
+      getInputFoundation: () => {},
     });
   }
 
@@ -71,15 +72,11 @@ class MDCTextFieldFoundation extends MDCFoundation {
     /** @private {boolean} */
     this.isFocused_ = false;
     /** @private {boolean} */
-    this.receivedUserInput_ = false;
-    /** @private {boolean} */
     this.useCustomValidityChecking_ = false;
     /** @private {function(): undefined} */
     this.inputFocusHandler_ = () => this.activateFocus();
     /** @private {function(): undefined} */
     this.inputBlurHandler_ = () => this.deactivateFocus();
-    /** @private {function(): undefined} */
-    this.inputInputHandler_ = () => this.autoCompleteFocus();
     /** @private {function(!Event): undefined} */
     this.setPointerXOffset_ = (evt) => this.setBottomLineTransformOrigin(evt);
     /** @private {function(!Event): undefined} */
@@ -91,16 +88,17 @@ class MDCTextFieldFoundation extends MDCFoundation {
   init() {
     this.adapter_.addClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
     // Ensure label does not collide with any pre-filled value.
-    if (this.getNativeInput_().value) {
+    const input = this.adapter_.getInputFoundation();
+    if (input.getValue()) {
       this.adapter_.addClassToLabel(MDCTextFieldFoundation.cssClasses.LABEL_FLOAT_ABOVE);
     }
 
-    this.adapter_.registerInputInteractionHandler('focus', this.inputFocusHandler_);
-    this.adapter_.registerInputInteractionHandler('blur', this.inputBlurHandler_);
-    this.adapter_.registerInputInteractionHandler('input', this.inputInputHandler_);
-    ['mousedown', 'touchstart'].forEach((evtType) => {
-      this.adapter_.registerInputInteractionHandler(evtType, this.setPointerXOffset_);
-    });
+    this.adapter_.registerInputEventHandler(
+      MDCTextFieldInputFoundation.strings.FOCUS_EVENT, this.inputFocusHandler_);
+    this.adapter_.registerInputEventHandler(
+      MDCTextFieldInputFoundation.strings.BLUR_EVENT, this.inputBlurHandler_);
+    this.adapter_.registerInputEventHandler(
+      MDCTextFieldInputFoundation.strings.PRESSED_EVENT, this.setPointerXOffset_);
     ['click', 'keydown'].forEach((evtType) => {
       this.adapter_.registerTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler_);
     });
@@ -110,12 +108,12 @@ class MDCTextFieldFoundation extends MDCFoundation {
 
   destroy() {
     this.adapter_.removeClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
-    this.adapter_.deregisterInputInteractionHandler('focus', this.inputFocusHandler_);
-    this.adapter_.deregisterInputInteractionHandler('blur', this.inputBlurHandler_);
-    this.adapter_.deregisterInputInteractionHandler('input', this.inputInputHandler_);
-    ['mousedown', 'touchstart'].forEach((evtType) => {
-      this.adapter_.deregisterInputInteractionHandler(evtType, this.setPointerXOffset_);
-    });
+    this.adapter_.deregisterInputEventHandler(
+      MDCTextFieldInputFoundation.strings.FOCUS_EVENT, this.inputFocusHandler_);
+    this.adapter_.deregisterInputEventHandler(
+      MDCTextFieldInputFoundation.strings.BLUR_EVENT, this.inputBlurHandler_);
+    this.adapter_.deregisterInputEventHandler(
+      MDCTextFieldInputFoundation.strings.PRESSED_EVENT, this.setPointerXOffset_);
     ['click', 'keydown'].forEach((evtType) => {
       this.adapter_.deregisterTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler_);
     });
@@ -128,11 +126,11 @@ class MDCTextFieldFoundation extends MDCFoundation {
    * @param {!Event} evt
    */
   handleTextFieldInteraction(evt) {
-    if (this.adapter_.getNativeInput().disabled) {
+    if (this.isDisabled()) {
       return;
     }
-
-    this.receivedUserInput_ = true;
+    const input = this.adapter_.getInputFoundation();
+    input.handleTextFieldInteraction();
 
     const {target, type} = evt;
     const {TEXT_FIELD_ICON} = MDCTextFieldFoundation.cssClasses;
@@ -175,16 +173,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
     }
   }
 
-  /**
-   * Activates the Text Field's focus state in cases when the input value
-   * changes without user input (e.g. programatically).
-   */
-  autoCompleteFocus() {
-    if (!this.receivedUserInput_) {
-      this.activateFocus();
-    }
-  }
-
   /**
    * Handles when bottom line animation ends, performing actions that must wait
    * for animations to finish.
@@ -204,15 +192,14 @@ class MDCTextFieldFoundation extends MDCFoundation {
    */
   deactivateFocus() {
     const {FOCUSED, LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextFieldFoundation.cssClasses;
-    const input = this.getNativeInput_();
+    const input = this.adapter_.getInputFoundation();
 
     this.isFocused_ = false;
     this.adapter_.removeClass(FOCUSED);
     this.adapter_.removeClassFromLabel(LABEL_SHAKE);
 
-    if (!input.value && !this.isBadInput_()) {
+    if (!input.getValue() && !this.isBadInput_()) {
       this.adapter_.removeClassFromLabel(LABEL_FLOAT_ABOVE);
-      this.receivedUserInput_ = false;
     }
 
     if (!this.useCustomValidityChecking_) {
@@ -244,23 +231,25 @@ class MDCTextFieldFoundation extends MDCFoundation {
    * @private
    */
   isBadInput_() {
-    const input = this.getNativeInput_();
-    return input.validity ? input.validity.badInput : input.badInput;
+    const input = this.adapter_.getInputFoundation();
+    return input.isBadInput();
   }
 
   /**
    * @return {boolean} True if the Text Field is disabled.
    */
   isDisabled() {
-    return this.getNativeInput_().disabled;
+    const input = this.adapter_.getInputFoundation();
+    return input.isDisabled();
   }
 
   /**
    * @param {boolean} disabled Sets the text-field disabled or enabled.
    */
   setDisabled(disabled) {
     const {DISABLED, INVALID} = MDCTextFieldFoundation.cssClasses;
-    this.getNativeInput_().disabled = disabled;
+    const input = this.adapter_.getInputFoundation();
+    input.setDisabled(disabled);
     if (disabled) {
       this.adapter_.addClass(DISABLED);
       this.adapter_.removeClass(INVALID);
@@ -281,21 +270,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
     }
   }
 
-  /**
-   * @return {!Element|!NativeInputType} The native text input from the
-   * host environment, or a dummy if none exists.
-   * @private
-   */
-  getNativeInput_() {
-    return this.adapter_.getNativeInput() ||
-    /** @type {!NativeInputType} */ ({
-      checkValidity: () => true,
-      value: '',
-      disabled: false,
-      badInput: false,
-    });
-  }
-
   /**
    * @param {boolean} isValid Sets the validity state of the Text Field.
    */