skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(progress-bar): use color mixin (#9473)

Browse Source
This commit is contained in:
Rafael Santana
2018-01-24 12:50:05 -03:00
committed by Jeremy Elbourn
parent 39a5861b99
commit 8298db1c9c
1 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/progress-bar/progress-bar.ts
+29 -16
View File
@@ -6,10 +6,25 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Component, ChangeDetectionStrategy, Input, ViewEncapsulation} from '@angular/core';
import {
Component,
ChangeDetectionStrategy,
ElementRef,
Input,
ViewEncapsulation
} from '@angular/core';
import {CanColor, mixinColor} from '@angular/material/core';
// TODO(josephperrott): Benchpress tests.
// TODO(josephperrott): Add ARIA attributes for progressbar "for".
// TODO(josephperrott): Add ARIA attributes for progress bar "for".
// Boilerplate for applying mixins to MatProgressBar.
/** @docs-private */
export class MatProgressBarBase {
constructor(public _elementRef: ElementRef) { }
}
export const _MatProgressBarMixinBase = mixinColor(MatProgressBarBase, 'primary');
/**
@@ -25,34 +40,32 @@ import {Component, ChangeDetectionStrategy, Input, ViewEncapsulation} from '@ang
'aria-valuemax': '100',
'[attr.aria-valuenow]': 'value',
'[attr.mode]': 'mode',
'[class.mat-primary]': 'color == "primary"',
'[class.mat-accent]': 'color == "accent"',
'[class.mat-warn]': 'color == "warn"',
'class': 'mat-progress-bar',
},
inputs: ['color'],
templateUrl: 'progress-bar.html',
styleUrls: ['progress-bar.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
})
export class MatProgressBar {
/** Color of the progress bar. */
@Input() color: 'primary' | 'accent' | 'warn' = 'primary';
export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor {
private _value: number = 0;
constructor(public _elementRef: ElementRef) {
super(_elementRef);
}
/** Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow. */
/** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */
@Input()
get value(): number { return this._value; }
set value(v: number) { this._value = clamp(v || 0); }
private _bufferValue: number = 0;
private _value: number = 0;
/** Buffer value of the progress bar. Defaults to zero. */
@Input()
get bufferValue(): number { return this._bufferValue; }
set bufferValue(v: number) { this._bufferValue = clamp(v || 0); }
private _bufferValue: number = 0;
/**
* Mode of the progress bar.
@@ -65,17 +78,17 @@ export class MatProgressBar {
/** Gets the current transform value for the progress bar's primary indicator. */
_primaryTransform() {
let scale = this.value / 100;
const scale = this.value / 100;
return {transform: `scaleX(${scale})`};
}
/**
* Gets the current transform value for the progress bar's buffer indicator. Only used if the
* Gets the current transform value for the progress bar's buffer indicator. Only used if the
* progress mode is set to buffer, otherwise returns an undefined, causing no transformation.
*/
_bufferTransform() {
if (this.mode == 'buffer') {
let scale = this.bufferValue / 100;
if (this.mode === 'buffer') {
const scale = this.bufferValue / 100;
return {transform: `scaleX(${scale})`};
}
}