Skip to content

Commit 9b645ce

Browse files
galvanmsgalvanms
committed
Add ProgressIndicator support in fabric
1 parent 97184c6 commit 9b645ce

File tree

6 files changed

+124
-4
lines changed

6 files changed

+124
-4
lines changed

‎apps/demo/src/app/app.component.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ <h2>Getting up and running...</h2>
192192
weekNumberFormatString="Week number {0}"
193193
></fab-calendar-strings>
194194
</fab-calendar>
195-
195+
196196
<fab-marquee-selection [isEnabled]="marqueeEnabled" [selection]="selection">
197197
<fab-details-list
198198
[selection]="selection"
@@ -254,6 +254,7 @@ <h2>Getting up and running...</h2>
254254
<fab-default-button (onClick)="marqueeEnabled = !marqueeEnabled">
255255
Marquee {{ marqueeEnabled === false ? 'Disabled' : 'Enabled' }}
256256
</fab-default-button>
257-
<fab-people-picker [inputProps]="{placeholder: 'Search for a person'}" [pickerSuggestionsOptions]="{noResultsFoundText: 'No results found', loadingText: 'Loading'}" [selectedItems]="peoplePickerSelectedItems" (onChange)="updatePeoplePickerSelectedItems($event)" [resolveSuggestions]="peoplePickerInputChanged"></fab-people-picker>
258-
<div>{{peoplePickerSelectedItems.length}} item(s) selected in the people picker</div>
257+
<fab-people-picker [inputProps]="{placeholder: 'Search for a person'}" [pickerSuggestionsOptions]="{noResultsFoundText: 'No results found', loadingText: 'Loading'}" [selectedItems]="peoplePickerSelectedItems" (onChange)="updatePeoplePickerSelectedItems($event)" [resolveSuggestions]="peoplePickerInputChanged"></fab-people-picker>
258+
<div>{{peoplePickerSelectedItems.length}} item(s) selected in the people picker</div>
259+
<fab-progress-indicator bar-height="4" [percentComplete]="0.35" description="Progress indicator description" label="Progress indicator label"></fab-progress-indicator>
259260
</div>

‎apps/demo/src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {
3636
FabTextFieldModule,
3737
FabPeoplePickerModule,
3838
FabTagPickerModule,
39+
FabProgressIndicatorModule
3940
} from '@angular-react/fabric';
4041
import { NgModule } from '@angular/core';
4142
import { NxModule } from '@nrwl/nx';
@@ -82,7 +83,8 @@ import { CounterComponent } from './counter/counter.component';
8283
FabSpinButtonModule,
8384
FabTextFieldModule,
8485
FabPeoplePickerModule,
85-
FabTagPickerModule
86+
FabTagPickerModule,
87+
FabProgressIndicatorModule
8688
],
8789
declarations: [AppComponent, CounterComponent],
8890
bootstrap: [AppComponent],

‎libs/fabric/src/lib/components/progress-indicator/progress-indicator.component.ts‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
4+
import { ReactWrapperComponent, JsxRenderFunc, InputRendererOptions } from '@angular-react/core';
5+
import {
6+
ChangeDetectionStrategy,
7+
ChangeDetectorRef,
8+
Component,
9+
ElementRef,
10+
Input,
11+
Renderer2,
12+
ViewChild,
13+
OnInit,
14+
} from '@angular/core';
15+
import { IProgressIndicatorProps } from 'office-ui-fabric-react/lib/ProgressIndicator';
16+
17+
@Component({
18+
selector: 'fab-progress-indicator',
19+
exportAs: 'fabProgressIndicator',
20+
template: `
21+
<ProgressIndicator
22+
#reactNode
23+
[ariaValueText]="ariaValueText"
24+
[barHeight]="barHeight"
25+
[className]="className"
26+
[description]="description"
27+
[label]="label"
28+
[RenderProgress]="renderProgress && onRenderProgress"
29+
[percentComplete]="percentComplete"
30+
[progressHidden]="progressHidden"
31+
[styles]="styles"
32+
[theme]="theme"
33+
>
34+
</ProgressIndicator>
35+
`,
36+
styles: ['react-renderer'],
37+
changeDetection: ChangeDetectionStrategy.OnPush,
38+
})
39+
export class FabProgressIndicatorComponent extends ReactWrapperComponent<IProgressIndicatorProps> implements OnInit {
40+
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
41+
42+
@Input() ariaValueText?: IProgressIndicatorProps['ariaValueText'];
43+
@Input() barHeight?: IProgressIndicatorProps['barHeight'];
44+
@Input() className?: IProgressIndicatorProps['className'];
45+
@Input() renderProgress?: InputRendererOptions<IProgressIndicatorProps>;
46+
@Input() percentComplete?: IProgressIndicatorProps['percentComplete'];
47+
@Input() progressHidden?: IProgressIndicatorProps['progressHidden'];
48+
@Input() styles?: IProgressIndicatorProps['styles'];
49+
@Input() theme?: IProgressIndicatorProps['theme'];
50+
51+
@Input()
52+
set renderDescription(value: InputRendererOptions<{}>) {
53+
this._renderDescription = value;
54+
55+
if (value) {
56+
this.description = this.createInputJsxRenderer(value)({});
57+
}
58+
}
59+
60+
get renderDescription(): InputRendererOptions<{}> {
61+
return this._renderDescription;
62+
}
63+
64+
description?: React.ReactNode;
65+
private _renderDescription?: InputRendererOptions<{}>;
66+
67+
@Input()
68+
set renderLabel(value: InputRendererOptions<{}>) {
69+
this._renderLabel = value;
70+
71+
if (value) {
72+
this.label = this.createInputJsxRenderer(value)({});
73+
}
74+
}
75+
76+
get renderLabel(): InputRendererOptions<{}> {
77+
return this._renderLabel;
78+
}
79+
80+
label?: React.ReactNode;
81+
private _renderLabel?: InputRendererOptions<{}>;
82+
83+
onRenderProgress: (props?: IProgressIndicatorProps, defaultRender?: JsxRenderFunc<IProgressIndicatorProps>) => JSX.Element;
84+
85+
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
86+
super(elementRef, changeDetectorRef, renderer);
87+
}
88+
89+
ngOnInit() {
90+
this.onRenderProgress = this.createRenderPropHandler(this.renderProgress);
91+
}
92+
}

‎libs/fabric/src/lib/components/progress-indicator/progress-indicator.module.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
4+
import { registerElement } from '@angular-react/core';
5+
import { CommonModule } from '@angular/common';
6+
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
7+
import { ProgressIndicator } from 'office-ui-fabric-react';
8+
import { FabProgressIndicatorComponent } from './progress-indicator.component';
9+
10+
const components = [FabProgressIndicatorComponent];
11+
12+
@NgModule({
13+
imports: [CommonModule],
14+
declarations: components,
15+
exports: components,
16+
schemas: [NO_ERRORS_SCHEMA],
17+
})
18+
export class FabProgressIndicatorModule {
19+
constructor() {
20+
registerElement('ProgressIndicator', () => ProgressIndicator);
21+
}
22+
}

‎libs/fabric/src/lib/components/progress-indicator/public-api.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './progress-indicator.component';
2+
export * from './progress-indicator.module';

‎libs/fabric/src/public-api.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,4 @@ export * from './lib/components/toggle/public-api';
3838
export * from './lib/components/tooltip/public-api';
3939
export * from './lib/components/nav/public-api';
4040
export * from './lib/components/pickers/public-api';
41+
export * from './lib/components/progress-indicator/public-api';

0 commit comments

Comments
 (0)