Skip to content

Commit 64ac354

Browse files
bengrybengry
authored
Merge pull request #10 from bengry/next
Add support for render props, and add a few components
2 parents 3eda3ee + 9a0db80 commit 64ac354

File tree

170 files changed

+10463
-4845
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

170 files changed

+10463
-4845
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
/out-tsc
77

88
# dependencies
9-
/node_modules
9+
node_modules
1010

1111
# IDEs and editors
1212
/.idea
@@ -49,3 +49,5 @@ yarn-error.log
4949

5050
# ng-packagr (temporary files)
5151
.ng_pkg_build/
52+
53+
.nyc-output/

‎.prettierrc‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
22
"singleQuote": true,
3-
"printWidth": 120
4-
}
3+
"printWidth": 120,
4+
"trailingComma": "es5"
5+
}

‎.vscode/settings.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"cSpell.words": [
3+
"Callout",
4+
"Focusable",
5+
"Injectable",
6+
"Packagr",
7+
"Renderable",
8+
"Selectable",
9+
"VDOM",
10+
"borderless",
11+
"checkmark",
12+
"commandbar",
13+
"dismissable",
14+
"dropdown",
15+
"keytip",
16+
"messagebar",
17+
"nrwl",
18+
"renderprop",
19+
"submenu",
20+
"uifabric",
21+
"unmount",
22+
"whitelisted"
23+
],
24+
"typescript.updateImportsOnFileMove.enabled": "never",
25+
"typescript.tsdk": "node_modules/typescript/lib"
26+
}

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

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1-
div {
2-
margin-bottom: 20px;
1+
.ms-modalExample-container {
2+
height: 80vh;
3+
width: 80vw;
4+
display: flex;
5+
flex-flow: column nowrap;
6+
align-items: stretch;
7+
}
8+
9+
.ms-modalExample-header {
10+
flex: 1 1 auto;
11+
background: #0078d4;
12+
color: #fff;
13+
display: -webkit-box;
14+
display: -ms-flexbox;
15+
display: flex;
16+
align-items: center;
17+
font-size: 28px;
18+
font-weight: 100;
19+
font-weight: 600;
20+
padding: 0 28px;
21+
min-height: 40px;
22+
}
23+
24+
.ms-modalExample-body {
25+
flex: 4 4 auto;
26+
padding: 5px 28px;
27+
overflow-y: auto;
328
}

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

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,24 @@ <h1>Angular-React Demo</h1>
33
<h2>Getting up and running...</h2>
44

55
<ol>
6-
<li>Add <i>AngularReactBrowserModule</i>> to <i>app.module.ts</i> in place of the default <i>BrowserModule</i>.</li>
7-
<li>Add <i>Fab[component]Module</i> or <i>Mat[component]Module</i> to <i>app.module.ts</i> imports.</li>
6+
<li>Add
7+
<i>AngularReactBrowserModule</i> to
8+
<i>app.module.ts</i> in place of the default
9+
<i>BrowserModule</i>.</li>
10+
<li>Add
11+
<i>Fab[component]Module</i> or
12+
<i>Mat[component]Module</i> to
13+
<i>app.module.ts</i> imports.</li>
814
<li>Add Fabric or Material components to your views.</li>
915
</ol>
1016
</div>
1117

1218
<div>
13-
<fab-button label="Test Dialog" (onClick)="toggleDialog()"></fab-button>
14-
<fab-dialog [hidden]="dialogHidden" (onDismiss)="toggleDialog()" key="d2" title="Fabric [React] Dialog" subText="Use Fabric React components inside your Angular app!" [type]="DialogType.largeHeader">
15-
Hello world! {{ counter }}
16-
<fab-dialog-footer>
17-
<fab-button (onClick)="incrementCounter()" label='Save' style="margin-right:10px;"></fab-button>
18-
<fab-button (onClick)="toggleDialog()" label='Cancel'></fab-button>
19-
</fab-dialog-footer>
20-
</fab-dialog>
21-
</div>
19+
<fab-command-bar #commandBar [items]="commandBarItems" [farItems]="commandBarFarItems">
20+
</fab-command-bar>
21+
22+
<fab-default-button (onClick)="toggleRun()" text="Toggle run"></fab-default-button>
2223

23-
<img src="assets/app-module-dif.png">
24+
<fab-panel [isOpen]="isPanelOpen" (onDismiss)="isPanelOpen = false">
25+
</fab-panel>
26+
</div>

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

Lines changed: 158 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,170 @@
1-
import { Component } from '@angular/core';
2-
import { DialogType } from 'office-ui-fabric-react/lib/Dialog';
1+
import { ChangeDetectorRef, ViewEncapsulation, Component, ComponentFactoryResolver, Injector, Input, ComponentRef, TemplateRef, ViewChild, AfterViewInit } from '@angular/core';
2+
import { DialogType, ITheme, IChoiceGroupProps, SpinnerSize, PersonaSize, PersonaPresence, PivotLinkSize, SelectableOptionMenuItemType, PanelType, ICommandBarItemProps, IBreadcrumbItem, IButtonProps, Button, MessageBarType, ShimmerElementType } from 'office-ui-fabric-react';
3+
import { IExpandingCardOptions } from '@angular-react/fabric/src/components/hover-card';
4+
import { ICommandBarItemOptions, FabCommandBarComponent } from '@angular-react/fabric/src/components/command-bar';
5+
36

47
@Component({
58
selector: 'app-root',
69
templateUrl: './app.component.html',
7-
styleUrls: ['./app.component.css']
10+
styleUrls: ['./app.component.css'],
11+
encapsulation: ViewEncapsulation.None,
812
})
913
export class AppComponent {
10-
DialogType = DialogType;
1114

12-
dialogHidden = true;
13-
counter = 0;
15+
@ViewChild(FabCommandBarComponent) commandBar: FabCommandBarComponent;
16+
@ViewChild('customRange') customRangeTemplate: TemplateRef<{ item: any, dismissMenu: (ev?: any, dismissAll?: boolean) => void }>;
1417

15-
toggleDialog() {
16-
this.dialogHidden = !this.dialogHidden;
17-
}
18+
commandBarItems: ReadonlyArray<ICommandBarItemOptions> = [
19+
{
20+
key: 'run',
21+
text: 'Run',
22+
iconProps: {
23+
iconName: 'CaretRight',
24+
},
25+
disabled: true,
26+
},
27+
{
28+
key: 'new',
29+
text: 'New',
30+
iconProps: {
31+
iconName: 'Add',
32+
},
33+
onClick: () => console.log('Add clicked'),
34+
},
35+
{
36+
key: 'save',
37+
text: 'Save',
38+
iconProps: {
39+
iconName: 'Save'
40+
},
41+
subMenuProps: {
42+
items: [
43+
{
44+
key: 'save',
45+
text: 'Save',
46+
onClick: () => console.log('Save clicked'),
47+
},
48+
{
49+
key: 'save-as',
50+
text: 'Save as',
51+
subMenuProps: {
52+
onItemClick: (ev, item) => {
53+
console.log(`${item.text} clicked`)
54+
return true;
55+
},
56+
items: [
57+
{
58+
key: 'save-as-1',
59+
text: 'Save as 1',
60+
},
61+
{
62+
key: 'save-as-2',
63+
text: 'Save as 2',
64+
},
65+
],
66+
},
67+
},
68+
],
69+
},
70+
},
71+
{
72+
key: 'copy',
73+
text: 'Copy',
74+
iconProps: {
75+
iconName: 'Copy'
76+
},
77+
onClick: () => console.log('Copy clicked'),
78+
},
79+
{
80+
key: 'date-picker',
81+
text: 'Last 30 days',
82+
iconProps: {
83+
iconName: 'Calendar',
84+
},
85+
subMenuProps: {
86+
onItemClick: (ev, item) => {
87+
console.log(item.text, 'clicked');
88+
89+
this.commandBarItems.find(item => item.key === 'date-picker').text = item.text;
90+
this.commandBarItems = [...this.commandBarItems];
91+
},
92+
items: [
93+
{
94+
key: '24h',
95+
text: 'Last 24 hours',
96+
97+
},
98+
{
99+
key: '7d',
100+
text: 'Last 7 days',
101+
},
102+
{
103+
key: '30d',
104+
text: 'Last 30 days',
105+
},
106+
{
107+
key: 'custom',
108+
text: 'Custom range...',
109+
onClick: () => {
110+
this.commandBarItems = [
111+
...this.commandBarItems,
112+
{
113+
key: 'custom-range-range',
114+
data: {
115+
earliestDateAllowed: new Date(2015, 2, 15),
116+
},
117+
render: this.customRangeTemplate,
118+
onClick: () => {
119+
debugger;
120+
}
121+
},
122+
];
123+
},
124+
},
125+
]
126+
}
127+
},
128+
{
129+
key: 'schedule-monitor',
130+
text: 'Schedule a monitor',
131+
iconProps: {
132+
iconName: 'ScheduleEventAction'
133+
},
134+
onClick: () => {
135+
this.isPanelOpen = true;
136+
console.log('Schedule a monitor clicked');
137+
}
138+
},
139+
];
140+
141+
commandBarFarItems: ReadonlyArray<ICommandBarItemOptions> = [
142+
{
143+
key: 'help',
144+
text: 'Help',
145+
iconProps: {
146+
iconName: 'Help'
147+
},
148+
onClick: () => console.log('Help clicked'),
149+
},
150+
{
151+
key: 'full-screen',
152+
iconOnly: true,
153+
iconProps: {
154+
iconName: 'MiniExpand'
155+
},
156+
onClick: () => console.log('Expand clicked'),
157+
}
158+
];
159+
160+
isPanelOpen = false;
18161

19-
incrementCounter() {
20-
this.counter += 1;
162+
toggleRun() {
163+
this.commandBarItems = this.commandBarItems.map(item =>
164+
item.key === 'run'
165+
? { ...item, disabled: !item.disabled }
166+
: item
167+
);
21168
}
22169

23170
}

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

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,47 @@
1+
import { AngularReactBrowserModule } from '@angular-react/core';
2+
import { FabBreadcrumbModule, FabButtonModule, FabCalloutModule, FabModalModule, FabCheckboxModule, FabChoiceGroupModule, FabComboBoxModule, FabCommandBarModule, FabDatePickerModule, FabDialogModule, FabDividerModule, FabFabricModule, FabGroupedListModule, FabIconModule, FabImageModule, FabPanelModule, FabPersonaModule, FabSpinnerModule, FabMessageBarModule, FabLinkModule, FabToggleModule, FabPivotModule, FabHoverCardModule, FabTooltipModule, FabShimmerModule, FabSliderModule, FabSearchBoxModule } from '@angular-react/fabric';
13
import { NgModule } from '@angular/core';
24
import { NxModule } from '@nrwl/nx';
3-
4-
import { AngularReactBrowserModule } from '@angular-react/core';
5-
import { FabDialogModule, FabButtonModule } from '@angular-react/fabric';
5+
import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
66
import { AppComponent } from './app.component';
77

8-
98
@NgModule({
10-
imports: [AngularReactBrowserModule, NxModule.forRoot(), FabButtonModule, FabDialogModule],
9+
imports: [
10+
AngularReactBrowserModule,
11+
NxModule.forRoot(),
12+
FabFabricModule,
13+
FabIconModule,
14+
FabButtonModule,
15+
FabDialogModule,
16+
FabImageModule,
17+
FabPanelModule,
18+
FabCommandBarModule,
19+
FabBreadcrumbModule,
20+
FabCalloutModule,
21+
FabCheckboxModule,
22+
FabChoiceGroupModule,
23+
FabComboBoxModule,
24+
FabGroupedListModule,
25+
FabDatePickerModule,
26+
FabDividerModule,
27+
FabSpinnerModule,
28+
FabToggleModule,
29+
FabPersonaModule,
30+
FabPivotModule,
31+
FabLinkModule,
32+
FabMessageBarModule,
33+
FabHoverCardModule,
34+
FabModalModule,
35+
FabTooltipModule,
36+
FabShimmerModule,
37+
FabSliderModule,
38+
FabSearchBoxModule,
39+
],
1140
declarations: [AppComponent],
12-
bootstrap: [AppComponent]
41+
bootstrap: [AppComponent],
1342
})
14-
export class AppModule {}
43+
export class AppModule {
44+
constructor() {
45+
initializeIcons();
46+
}
47+
}

0 commit comments

Comments
 (0)