Skip to content

Commit

Permalink
fix(material-experimental/mdc-progress-bar): don't rely on JS to chan…
Browse files Browse the repository at this point in the history
…ge directionality

On the first iteration of the MDC progress bar we had to use JS to change the direction in RTL, but a few months ago in angular#21650 we switched to a different API that no longer depends on it. The problem with the changes in angular#21650 is that they set the `dir` on the progress bar in order to flip its direction for the `query` mode.

These changes simplify the setup by relying only on CSS to determine the direction.

Fixes angular#22609.
  • Loading branch information
crisbeto committed May 15, 2021
1 parent 8ba7148 commit 16236f5
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 13 deletions.
5 changes: 5 additions & 0 deletions src/material-experimental/mdc-progress-bar/progress-bar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@
// Explicitly set to `block` since the browser defaults custom elements to `inline`.
display: block;

// Inverts the progress bar horizontally in `query` mode.
&[mode='query'] {
transform: scaleX(-1);
}

&._mat-animation-noopable {
.mdc-linear-progress__buffer-dots,
.mdc-linear-progress__primary-bar,
Expand Down
19 changes: 6 additions & 13 deletions src/material-experimental/mdc-progress-bar/progress-bar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,15 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie

constructor(public _elementRef: ElementRef<HTMLElement>,
private _ngZone: NgZone,
@Optional() private _dir?: Directionality,
@Optional() dir?: Directionality,
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
super(_elementRef);
this._isNoopAnimation = _animationMode === 'NoopAnimations';
if (_dir) {
this._dirChangeSubscription = _dir.change.subscribe(() => this._syncFoundation());
if (dir) {
this._dirChangeSubscription = dir.change.subscribe(() => {
this._syncFoundation();
this._foundation?.restartAnimation();
});
}
}

Expand Down Expand Up @@ -218,17 +221,7 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
const foundation = this._foundation;

if (foundation) {
const direction = this._dir ? this._dir.value : 'ltr';
const mode = this.mode;

const reverse = direction === 'rtl' ? mode !== 'query' : mode === 'query';
const progressDirection = reverse ? 'rtl' : 'ltr';
const currentDirection = this._elementRef.nativeElement.getAttribute('dir');
if (currentDirection !== progressDirection) {
this._elementRef.nativeElement.setAttribute('dir', progressDirection);
foundation.restartAnimation();
}

foundation.setDeterminate(mode !== 'indeterminate' && mode !== 'query');

// Divide by 100 because MDC deals with values between 0 and 1.
Expand Down

0 comments on commit 16236f5

Please sign in to comment.