Skip to content

Commit f780401

Browse files
annieywannieyw
committed
serverside rendering, refactor
1 parent 447bb5b commit f780401

File tree

9 files changed

+71
-79
lines changed

9 files changed

+71
-79
lines changed

‎src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
.mat-mdc-spinner {
66
display: inline-block;
77
}
8-
98
}
109

1110
.demo-progress-spinner-controls {

‎src/material-experimental/mdc-progress-spinner/BUILD.bazel

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,10 @@ ng_module(
2222
assets = [":progress_spinner_scss"] + glob(["**/*.html"]),
2323
module_name = "@angular/material-experimental/mdc-progress-spinner",
2424
deps = [
25-
"//src/cdk/bidi",
25+
"//src/cdk/platform",
2626
"//src/material/core",
2727
"//src/material/progress-spinner",
28+
"@npm//@angular/common",
2829
"@npm//@angular/core",
2930
"@npm//@material/circular-progress",
3031
],
@@ -59,8 +60,10 @@ ng_test_library(
5960
),
6061
deps = [
6162
":mdc-progress-spinner",
62-
"//src/cdk/testing/private",
63-
"@npm//@angular/platform-browser",
63+
"//src/cdk/platform",
64+
"//src/material/progress-spinner",
65+
"@npm//@angular/common",
66+
"@npm//@angular/platform-browser",
6467
],
6568
)
6669

‎src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@import '@material/circular-progress/mixins.import';
2-
@import '@material/theme/functions.import';
32
@import '../mdc-helpers/mdc-helpers';
43

54
@mixin _mat-mdc-progress-spinner-color($color) {

‎src/material-experimental/mdc-progress-spinner/module.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,14 @@
99
import {NgModule} from '@angular/core';
1010
import {MatCommonModule} from '@angular/material/core';
1111
import {MatProgressSpinner, MatSpinner} from './progress-spinner';
12+
import {CommonModule} from '@angular/common';
1213

1314
@NgModule({
1415
exports: [MatProgressSpinner, MatSpinner, MatCommonModule],
1516
declarations: [MatProgressSpinner, MatSpinner],
17+
imports: [
18+
CommonModule
19+
]
1620
})
1721
export class MatProgressSpinnerModule {
1822
}

‎src/material-experimental/mdc-progress-spinner/progress-spinner.html

Lines changed: 21 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,36 @@
1-
<div class="mdc-circular-progress" role="progressbar">
2-
<div class="mdc-circular-progress__determinate-container">
3-
<svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__determinate-circle-graphic"
1+
<ng-template #circle>
2+
<svg [attr.viewBox]="_viewBox()" class="mdc-circular-progress__indeterminate-circle-graphic"
3+
xmlns="http://www.w3.org/2000/svg">
4+
<circle [attr.r]="_circleRadius()"
5+
[style.stroke-dasharray.px]="_strokeCircumference()"
6+
[style.stroke-dashoffset.px]="_strokeCircumference()/2"
7+
[style.stroke-width.%]="_circleStrokeWidth()"
8+
cx="50%" cy="50%"/>
9+
</svg>
10+
</ng-template>
11+
12+
<div class="mdc-circular-progress" role="progressbar" #spinnerRoot>
13+
<div class="mdc-circular-progress__determinate-container" #determinateSpinner>
14+
<svg [attr.viewBox]="_viewBox()" class="mdc-circular-progress__determinate-circle-graphic"
415
xmlns="http://www.w3.org/2000/svg">
5-
<circle [attr.r]="_circleRadius"
6-
[style.stroke-dasharray.px]="_strokeCircumference"
7-
[style.stroke-dashoffset.px]="_strokeDashOffset"
8-
[style.stroke-width.%]="_circleStrokeWidth"
16+
<circle [attr.r]="_circleRadius()"
17+
[style.stroke-dasharray.px]="_strokeCircumference()"
18+
[style.stroke-dashoffset.px]="_strokeDashOffset()"
19+
[style.stroke-width.%]="_circleStrokeWidth()"
920
class="mdc-circular-progress__determinate-circle"
1021
cx="50%" cy="50%"/>
1122
</svg>
1223
</div>
1324
<div class="mdc-circular-progress__indeterminate-container">
1425
<div class="mdc-circular-progress__spinner-layer">
1526
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
16-
<svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__indeterminate-circle-graphic"
17-
xmlns="http://www.w3.org/2000/svg">
18-
<circle [attr.r]="_circleRadius"
19-
[style.stroke-dasharray.px]="_strokeCircumference"
20-
[style.stroke-dashoffset.px]="_strokeCircumference/2"
21-
[style.stroke-width.%]="_circleStrokeWidth"
22-
cx="50%" cy="50%"/>
23-
</svg>
27+
<ng-container [ngTemplateOutlet]="circle"></ng-container>
2428
</div>
2529
<div class="mdc-circular-progress__gap-patch">
26-
<svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__indeterminate-circle-graphic"
27-
xmlns="http://www.w3.org/2000/svg">
28-
<circle [attr.r]="_circleRadius"
29-
[style.stroke-dasharray.px]="_strokeCircumference"
30-
[style.stroke-dashoffset.px]="_strokeCircumference/2"
31-
[style.stroke-width.%]="_circleStrokeWidth"
32-
cx="50%" cy="50%"/>
33-
</svg>
30+
<ng-container [ngTemplateOutlet]="circle"></ng-container>
3431
</div>
3532
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
36-
<svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__indeterminate-circle-graphic"
37-
xmlns="http://www.w3.org/2000/svg">
38-
<circle [attr.r]="_circleRadius"
39-
[style.stroke-dasharray.px]="_strokeCircumference"
40-
[style.stroke-dashoffset.px]="_strokeCircumference/2"
41-
[style.stroke-width.%]="_circleStrokeWidth"
42-
cx="50%" cy="50%"/>
43-
</svg>
33+
<ng-container [ngTemplateOutlet]="circle"></ng-container>
4434
</div>
4535
</div>
4636
</div>

‎src/material-experimental/mdc-progress-spinner/progress-spinner.scss

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,10 @@
44

55
@include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
66

7-
.mdc-circular-progress {
8-
width: 100%;
9-
height: 100%;
10-
}
11-
127
.mat-mdc-progress-spinner {
138
display: block;
149

15-
.mdc-circular-progress--indeterminate {
10+
.mdc-circular-progress {
1611
width: 100%;
1712
height: 100%;
1813
}

‎src/material-experimental/mdc-progress-spinner/progress-spinner.ts

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
Input,
1616
OnDestroy,
1717
Optional,
18+
ViewChild,
1819
ViewEncapsulation
1920
} from '@angular/core';
2021
import {
@@ -27,10 +28,9 @@ import {
2728
MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,
2829
MatProgressSpinnerDefaultOptions
2930
} from '@angular/material/progress-spinner';
30-
import {coerceNumberProperty} from '@angular/cdk/coercion';
31+
import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';
3132

3233
// Boilerplate for applying mixins to MatProgressBar.
33-
/** @docs-private */
3434
class MatProgressSpinnerBase {
3535
constructor(public _elementRef: ElementRef) {
3636
}
@@ -44,16 +44,15 @@ export type ProgressSpinnerMode = 'determinate' | 'indeterminate';
4444

4545
/**
4646
* Base reference size of the spinner.
47-
* @docs-private
4847
*/
4948
const BASE_SIZE = 100;
5049

5150
/**
5251
* Base reference stroke width of the spinner.
53-
* @docs-private
5452
*/
5553
const BASE_STROKE_WIDTH = 10;
5654

55+
5756
@Component({
5857
selector: 'mat-progress-spinner',
5958
exportAs: 'matProgressSpinner',
@@ -77,27 +76,29 @@ const BASE_STROKE_WIDTH = 10;
7776
export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements AfterViewInit,
7877
OnDestroy,
7978
CanColor {
79+
static ngAcceptInputType_diameter: NumberInput;
80+
static ngAcceptInputType_strokeWidth: NumberInput;
81+
static ngAcceptInputType_value: NumberInput;
82+
8083
/** Whether the _mat-animation-noopable class should be applied, disabling animations. */
8184
_noopAnimations: boolean;
8285
/** Implements all of the logic of the MDC circular progress. */
83-
private _foundation: MDCCircularProgressFoundation | undefined;
84-
private _rootElement: HTMLElement;
85-
private _determinateCircle: HTMLElement;
86-
/** Adapter used by MDC to interact with the DOM. */
86+
_foundation: MDCCircularProgressFoundation;
87+
@ViewChild('spinnerRoot') _rootElement: ElementRef<HTMLElement>;
88+
@ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
89+
8790
private _adapter: MDCCircularProgressAdapter = {
88-
addClass: (className: string) => this._rootElement.classList.add(className),
89-
hasClass: (className: string) => this._rootElement.classList.contains(className),
90-
removeClass: (className: string) => this._rootElement.classList.remove(className),
91-
removeAttribute: (name: string) => this._rootElement.removeAttribute(name),
92-
setAttribute: (name: string, value: string) => this._rootElement.setAttribute(name, value),
93-
getDeterminateCircleAttribute: (attributeName: string) => this._determinateCircle.getAttribute(
94-
attributeName),
95-
setDeterminateCircleAttribute: (attributeName: string,
96-
value: string) => this._determinateCircle.setAttribute(
97-
attributeName,
98-
value),
91+
addClass: (className: string) => this._rootElement.nativeElement.classList.add(className),
92+
hasClass: (className: string) => this._rootElement.nativeElement.classList.contains(className),
93+
removeClass: (className: string) => this._rootElement.nativeElement.classList.remove(className),
94+
removeAttribute: (name: string) => this._rootElement.nativeElement.removeAttribute(name),
95+
setAttribute: (name: string, value: string) =>
96+
this._rootElement.nativeElement.setAttribute(name, value),
97+
getDeterminateCircleAttribute: (attributeName: string) =>
98+
this._determinateCircle.nativeElement.getAttribute(attributeName),
99+
setDeterminateCircleAttribute: (attributeName: string, value: string) =>
100+
this._determinateCircle.nativeElement.setAttribute(attributeName, value),
99101
};
100-
101102
constructor(public _elementRef: ElementRef<HTMLElement>,
102103
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode: string,
103104
@Inject(MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS)
@@ -160,7 +161,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
160161
}
161162

162163
set diameter(size: number) {
163-
this._diameter = size;
164+
this._diameter = coerceNumberProperty(size);
164165
this._syncFoundation();
165166
}
166167

@@ -169,50 +170,43 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
169170
/** Stroke width of the progress spinner. */
170171
@Input()
171172
get strokeWidth(): number {
172-
return this._strokeWidth || this.diameter / 10;
173+
return this._strokeWidth ?? this.diameter / 10;
173174
}
174175

175176
set strokeWidth(value: number) {
176177
this._strokeWidth = coerceNumberProperty(value);
177178
}
178179

179180
/** The radius of the spinner, adjusted for stroke width. */
180-
get _circleRadius() {
181+
_circleRadius(): number {
181182
return (this.diameter - BASE_STROKE_WIDTH) / 2;
182183
}
183184

184185
/** The view box of the spinner's svg element. */
185-
get _viewBox() {
186-
const viewBox = this._circleRadius * 2 + this.strokeWidth;
186+
_viewBox() {
187+
const viewBox = this._circleRadius() * 2 + this.strokeWidth;
187188
return `0 0 ${viewBox} ${viewBox}`;
188189
}
189190

190191
/** The stroke circumference of the svg circle. */
191-
get _strokeCircumference(): number {
192-
return 2 * Math.PI * this._circleRadius;
192+
_strokeCircumference(): number {
193+
return 2 * Math.PI * this._circleRadius();
193194
}
194195

195196
/** The dash offset of the svg circle. */
196-
get _strokeDashOffset() {
197+
_strokeDashOffset() {
197198
if (this.mode === 'determinate') {
198-
return this._strokeCircumference * (100 - this._value) / 100;
199+
return this._strokeCircumference() * (100 - this._value) / 100;
199200
}
200-
201201
return null;
202202
}
203203

204204
/** Stroke width of the circle in percent. */
205-
get _circleStrokeWidth() {
205+
_circleStrokeWidth() {
206206
return this.strokeWidth / this.diameter * 100;
207207
}
208208

209209
ngAfterViewInit() {
210-
const element = this._elementRef.nativeElement;
211-
212-
this._rootElement = element.querySelector('.mdc-circular-progress') as HTMLElement;
213-
this._determinateCircle =
214-
element.querySelector('.mdc-circular-progress__determinate-container') as HTMLElement;
215-
216210
this._foundation = new MDCCircularProgressFoundation(this._adapter);
217211
this._foundation.init();
218212
this._syncFoundation();

‎src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,3 +195,9 @@ <h3>Prefix and Suffix</h3>
195195
<mat-label>Name</mat-label>
196196
<input matInput>
197197
</mat-form-field>
198+
199+
<h2>MDC Progress spinner</h2>
200+
<mat-progress-spinner [value]="25"></mat-progress-spinner>
201+
<mat-spinner></mat-spinner>
202+
<mat-progress-spinner mode="indeterminate" [diameter]="37"></mat-progress-spinner>
203+
<mat-spinner [strokeWidth]="4"></mat-spinner>

‎src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
1414
import {MatTableModule} from '@angular/material-experimental/mdc-table';
1515
import {MatIconModule} from '@angular/material/icon';
1616
import {MatSnackBarModule, MatSnackBar} from '@angular/material-experimental/mdc-snack-bar';
17+
import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
1718

1819
@Component({
1920
selector: 'kitchen-sink-mdc',
@@ -39,6 +40,7 @@ export class KitchenSinkMdc {
3940
MatTableModule,
4041
MatProgressBarModule,
4142
MatSnackBarModule,
43+
MatProgressSpinnerModule,
4244
],
4345
declarations: [KitchenSinkMdc],
4446
exports: [KitchenSinkMdc],

0 commit comments

Comments
 (0)