Skip to content

Commit

Permalink
fix(linear-progress): Use superclass properties without trailing unde…
Browse files Browse the repository at this point in the history 
…rscores

PiperOrigin-RevId: 312740926
  • Loading branch information
@patrickrodee @copybara-github
patrickrodee authored and copybara-github committed May 21, 2020
1 parent 49bf31d commit 8e17857
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 34 deletions.
28 changes: 14 additions & 14 deletions packages/mdc-linear-progress/component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,62 +33,62 @@ export class MDCLinearProgress extends
}

set determinate(value: boolean) {
this.foundation_.setDeterminate(value);
this.foundation.setDeterminate(value);
}

set progress(value: number) {
this.foundation_.setProgress(value);
this.foundation.setProgress(value);
}

set buffer(value: number) {
this.foundation_.setBuffer(value);
this.foundation.setBuffer(value);
}

set reverse(value: boolean) {
this.foundation_.setReverse(value);
this.foundation.setReverse(value);
}

open() {
this.foundation_.open();
this.foundation.open();
}

close() {
this.foundation_.close();
this.foundation.close();
}

getDefaultFoundation() {
// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
const adapter: MDCLinearProgressAdapter = {
addClass: (className: string) => {
this.root_.classList.add(className);
this.root.classList.add(className);
},
forceLayout: () => {
this.root_.getBoundingClientRect();
this.root.getBoundingClientRect();
},
setBufferBarStyle: (styleProperty: string, value: string) => {
const bufferBar = this.root_.querySelector<HTMLElement>(
const bufferBar = this.root.querySelector<HTMLElement>(
MDCLinearProgressFoundation.strings.BUFFER_BAR_SELECTOR);
if (bufferBar) {
bufferBar.style.setProperty(styleProperty, value);
}
},
setPrimaryBarStyle: (styleProperty: string, value: string) => {
const primaryBar = this.root_.querySelector<HTMLElement>(
const primaryBar = this.root.querySelector<HTMLElement>(
MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR);
if (primaryBar) {
primaryBar.style.setProperty(styleProperty, value);
}
},
hasClass: (className: string) => this.root_.classList.contains(className),
hasClass: (className: string) => this.root.classList.contains(className),
removeAttribute: (attributeName: string) => {
this.root_.removeAttribute(attributeName);
this.root.removeAttribute(attributeName);
},
removeClass: (className: string) => {
this.root_.classList.remove(className);
this.root.classList.remove(className);
},
setAttribute: (attributeName: string, value: string) => {
this.root_.setAttribute(attributeName, value);
this.root.setAttribute(attributeName, value);
},
};
return new MDCLinearProgressFoundation(adapter);
Expand Down
39 changes: 19 additions & 20 deletions packages/mdc-linear-progress/foundation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,8 @@ export class MDCLinearProgressFoundation extends
}

init() {
this.isDeterminate =
!this.adapter_.hasClass(cssClasses.INDETERMINATE_CLASS);
this.isReversed = this.adapter_.hasClass(cssClasses.REVERSED_CLASS);
this.isDeterminate = !this.adapter.hasClass(cssClasses.INDETERMINATE_CLASS);
this.isReversed = this.adapter.hasClass(cssClasses.REVERSED_CLASS);
this.progress = 0;
this.buffer = 1;
}
Expand All @@ -72,8 +71,8 @@ export class MDCLinearProgressFoundation extends
this.isDeterminate = isDeterminate;

if (this.isDeterminate) {
this.adapter_.removeClass(cssClasses.INDETERMINATE_CLASS);
this.adapter_.setAttribute(
this.adapter.removeClass(cssClasses.INDETERMINATE_CLASS);
this.adapter.setAttribute(
strings.ARIA_VALUENOW, this.progress.toString());
this.setPrimaryBarProgress(this.progress);
this.setBufferBarProgress(this.buffer);
Expand All @@ -87,13 +86,13 @@ export class MDCLinearProgressFoundation extends
// the translate animation in order to keep it in sync with the new
// scale animation that will start from adding INDETERMINATE_CLASS
// below.
this.adapter_.removeClass(cssClasses.REVERSED_CLASS);
this.adapter_.forceLayout();
this.adapter_.addClass(cssClasses.REVERSED_CLASS);
this.adapter.removeClass(cssClasses.REVERSED_CLASS);
this.adapter.forceLayout();
this.adapter.addClass(cssClasses.REVERSED_CLASS);
}

this.adapter_.addClass(cssClasses.INDETERMINATE_CLASS);
this.adapter_.removeAttribute(strings.ARIA_VALUENOW);
this.adapter.addClass(cssClasses.INDETERMINATE_CLASS);
this.adapter.removeAttribute(strings.ARIA_VALUENOW);
this.setPrimaryBarProgress(1);
this.setBufferBarProgress(1);
}
Expand All @@ -106,7 +105,7 @@ export class MDCLinearProgressFoundation extends
this.progress = value;
if (this.isDeterminate) {
this.setPrimaryBarProgress(value);
this.adapter_.setAttribute(strings.ARIA_VALUENOW, value.toString());
this.adapter.setAttribute(strings.ARIA_VALUENOW, value.toString());
}
}

Expand All @@ -130,25 +129,25 @@ export class MDCLinearProgressFoundation extends
// reset the scale animation in order to keep it in sync with the new
// translate animation that will start from adding/removing REVERSED_CLASS
// below.
this.adapter_.removeClass(cssClasses.INDETERMINATE_CLASS);
this.adapter_.forceLayout();
this.adapter_.addClass(cssClasses.INDETERMINATE_CLASS);
this.adapter.removeClass(cssClasses.INDETERMINATE_CLASS);
this.adapter.forceLayout();
this.adapter.addClass(cssClasses.INDETERMINATE_CLASS);
}

if (this.isReversed) {
this.adapter_.addClass(cssClasses.REVERSED_CLASS);
this.adapter.addClass(cssClasses.REVERSED_CLASS);
return;
}

this.adapter_.removeClass(cssClasses.REVERSED_CLASS);
this.adapter.removeClass(cssClasses.REVERSED_CLASS);
}

open() {
this.adapter_.removeClass(cssClasses.CLOSED_CLASS);
this.adapter.removeClass(cssClasses.CLOSED_CLASS);
}

close() {
this.adapter_.addClass(cssClasses.CLOSED_CLASS);
this.adapter.addClass(cssClasses.CLOSED_CLASS);
}

private setPrimaryBarProgress(progressValue: number) {
Expand All @@ -157,12 +156,12 @@ export class MDCLinearProgressFoundation extends
// Accessing `window` without a `typeof` check will throw on Node environments.
const transformProp = typeof window !== 'undefined' ?
getCorrectPropertyName(window, 'transform') : 'transform';
this.adapter_.setPrimaryBarStyle(transformProp, value);
this.adapter.setPrimaryBarStyle(transformProp, value);
}

private setBufferBarProgress(progressValue: number) {
const value = `${progressValue * 100}%`;
this.adapter_.setBufferBarStyle(strings.FLEX_BASIS, value);
this.adapter.setBufferBarStyle(strings.FLEX_BASIS, value);
}
}

Expand Down

0 comments on commit 8e17857

Please sign in to comment.