Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

feat(textfield): Convert some foundation methods from private to public #1543

Merged
merged 7 commits into from
Nov 8, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions packages/mdc-textfield/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -426,6 +426,32 @@ Returns a boolean specifying whether or not the input is disabled.

Updates the input's disabled state.

##### MDCTextfieldFoundation.setValid(isValid: boolean)

Sets the validity state of the Text Field. Triggers custom validity checking.

##### MDCTextfieldFoundation.handleTextFieldInteraction(evt: Event)

Handles click and keydown events originating from inside the Text Field component.

##### MDCTextfieldFoundation.activateFocus()

Activates the focus state of the Text Field. Normally called in response to the input focus event.

##### MDCTextfieldFoundation.deactivateFocus()

Deactivates the focus state of the Text Field. Normally called in response to the input blur event.

##### MDCTextfieldFoundation.animateBottomLine(evt: Event)

Animates the bottom line. The animation expands outward from the user's click or touch. Expects an
event with clientX/clientY properties.

##### MDCTextfieldFoundation.handleBottomLineAnimationEnd(evt: Event)

Handles the end of the bottom line animation, performing actions that must wait for animations to
finish. Expects a transition-end event.

### Theming

MDC Textfield components use the configured theme's primary color for its underline and label text
Expand Down
39 changes: 16 additions & 23 deletions packages/mdc-textfield/foundation.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,17 +80,17 @@ class MDCTextfieldFoundation extends MDCFoundation {
/** @private {boolean} */
this.useCustomValidityChecking_ = false;
/** @private {function(): undefined} */
this.inputFocusHandler_ = () => this.activateFocus_();
this.inputFocusHandler_ = () => this.activateFocus();
/** @private {function(): undefined} */
this.inputBlurHandler_ = () => this.deactivateFocus_();
this.inputBlurHandler_ = () => this.deactivateFocus();
/** @private {function(): undefined} */
this.inputInputHandler_ = () => this.autoCompleteFocus_();
this.inputInputHandler_ = () => this.autoCompleteFocus();
/** @private {function(!Event): undefined} */
this.setPointerXOffset_ = (evt) => this.setBottomLineTransformOrigin_(evt);
this.setPointerXOffset_ = (evt) => this.animateBottomLine(evt);
/** @private {function(!Event): undefined} */
this.textFieldInteractionHandler_ = (evt) => this.handleTextFieldInteraction_(evt);
this.textFieldInteractionHandler_ = (evt) => this.handleTextFieldInteraction(evt);
/** @private {function(!Event): undefined} */
this.transitionEndHandler_ = (evt) => this.transitionEnd_(evt);
this.transitionEndHandler_ = (evt) => this.handleBottomLineAnimationEnd(evt);
}

init() {
Expand Down Expand Up @@ -129,9 +129,8 @@ class MDCTextfieldFoundation extends MDCFoundation {
/**
* Handles all user interactions with the Textfield.
* @param {!Event} evt
* @private
*/
handleTextFieldInteraction_(evt) {
handleTextFieldInteraction(evt) {
if (this.adapter_.getNativeInput().disabled) {
return;
}
Expand All @@ -150,9 +149,8 @@ class MDCTextfieldFoundation extends MDCFoundation {

/**
* Activates the text field focus state.
* @private
*/
activateFocus_() {
activateFocus() {
const {BOTTOM_LINE_ACTIVE, FOCUSED, LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextfieldFoundation.cssClasses;
this.adapter_.addClass(FOCUSED);
this.adapter_.addClassToBottomLine(BOTTOM_LINE_ACTIVE);
Expand All @@ -163,12 +161,10 @@ class MDCTextfieldFoundation extends MDCFoundation {
}

/**
* Sets the transform-origin of the bottom line, causing it to animate out
* from the user's click location.
* Animates the bottom line out from the user's click location.
* @param {!Event} evt
* @private
*/
setBottomLineTransformOrigin_(evt) {
animateBottomLine(evt) {
const targetClientRect = evt.target.getBoundingClientRect();
const evtCoords = {x: evt.clientX, y: evt.clientY};
const normalizedX = evtCoords.x - targetClientRect.left;
Expand All @@ -181,11 +177,10 @@ class MDCTextfieldFoundation extends MDCFoundation {
/**
* Activates the Textfield's focus state in cases when the input value
* changes without user input (e.g. programatically).
* @private
*/
autoCompleteFocus_() {
autoCompleteFocus() {
if (!this.receivedUserInput_) {
this.activateFocus_();
this.activateFocus();
}
}

Expand All @@ -199,12 +194,11 @@ class MDCTextfieldFoundation extends MDCFoundation {
}

/**
* Fires when animation transition ends, performing actions that must wait
* for animations to finish.
* Executes when the bottom line's transition animation ends, performing
* actions that must wait for animations to finish.
* @param {!Event} evt
* @private
*/
transitionEnd_(evt) {
handleBottomLineAnimationEnd(evt) {
const {BOTTOM_LINE_ACTIVE} = MDCTextfieldFoundation.cssClasses;

// We need to wait for the bottom line to be entirely transparent
Expand All @@ -217,9 +211,8 @@ class MDCTextfieldFoundation extends MDCFoundation {

/**
* Deactives the Textfield's focus state.
* @private
*/
deactivateFocus_() {
deactivateFocus() {
const {FOCUSED, LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextfieldFoundation.cssClasses;
const input = this.getNativeInput_();

Expand Down