Skip to content

Commit 279c112

Browse files
amcdnljelbourn
amcdnl
authored and
jelbourn
committed
feat(schematics): navigation schematic (#10009)
1 parent 877eb85 commit 279c112

File tree

10 files changed

+325
-1
lines changed

10 files changed

+325
-1
lines changed

‎schematics/collection.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
{
33
"$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
44
"schematics": {
5+
// Creates toolbar and navigation components
6+
"materialNav": {
7+
"description": "Create a responsive navigation component",
8+
"factory": "./nav/index",
9+
"schema": "./nav/schema.json",
10+
"aliases": [ "material-nav" ]
11+
},
512
// Adds Angular Material to an application without changing any templates
613
"materialShell": {
714
"description": "Create a Material shell",

‎schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.sidenav-container {
2+
height: 100%;
3+
}
4+
5+
.sidenav {
6+
width: 200px;
7+
box-shadow: 3px 0 6px rgba(0,0,0,.24);
8+
}

‎schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<mat-sidenav-container class="sidenav-container">
2+
<mat-sidenav
3+
#drawer
4+
class="sidenav"
5+
fixedInViewport="true"
6+
[attr.role]="isHandset ? 'dialog' : 'navigation'"
7+
[mode]="isHandset ? 'over' : 'side'"
8+
[opened]="!(isHandset | async)!.matches">
9+
<mat-toolbar color="primary">Menu</mat-toolbar>
10+
<mat-nav-list>
11+
<a mat-list-item href="#">Link 1</a>
12+
<a mat-list-item href="#">Link 2</a>
13+
<a mat-list-item href="#">Link 3</a>
14+
</mat-nav-list>
15+
</mat-sidenav>
16+
<mat-sidenav-content>
17+
<mat-toolbar color="primary">
18+
<button
19+
type="button"
20+
aria-label="Toggle sidenav"
21+
mat-icon-button
22+
(click)="drawer.toggle()"
23+
*ngIf="(isHandset | async)!.matches">
24+
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
25+
</button>
26+
<span>Application Title</span>
27+
</mat-toolbar>
28+
</mat-sidenav-content>
29+
</mat-sidenav-container>

‎schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
3+
4+
import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
5+
6+
describe('<%= classify(name) %>Component', () => {
7+
let component: <%= classify(name) %>Component;
8+
let fixture: ComponentFixture<<%= classify(name) %>Component>;
9+
10+
beforeEach(fakeAsync(() => {
11+
TestBed.configureTestingModule({
12+
declarations: [ <%= classify(name) %>Component ]
13+
})
14+
.compileComponents();
15+
16+
fixture = TestBed.createComponent(<%= classify(name) %>Component);
17+
component = fixture.componentInstance;
18+
fixture.detectChanges();
19+
}));
20+
21+
it('should compile', () => {
22+
expect(component).toBeTruthy();
23+
});
24+
});

‎schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { Component, <% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
2+
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
3+
import { Observable } from 'rxjs/Observable';
4+
5+
@Component({
6+
selector: '<%= selector %>',<% if(inlineTemplate) { %>
7+
template: `
8+
<mat-sidenav-container class="sidenav-container">
9+
<mat-sidenav
10+
#drawer
11+
class="sidenav"
12+
fixedInViewport="true"
13+
[attr.role]="isHandset ? 'dialog' : 'navigation'"
14+
[mode]="isHandset ? 'over' : 'side'"
15+
[opened]="!(isHandset | async)!.matches">
16+
<mat-toolbar color="primary">Menu</mat-toolbar>
17+
<mat-nav-list>
18+
<a mat-list-item href="#">Link 1</a>
19+
<a mat-list-item href="#">Link 2</a>
20+
<a mat-list-item href="#">Link 3</a>
21+
</mat-nav-list>
22+
</mat-sidenav>
23+
<mat-sidenav-content>
24+
<mat-toolbar color="primary">
25+
<button
26+
type="button"
27+
aria-label="Toggle sidenav"
28+
mat-icon-button
29+
(click)="drawer.toggle()"
30+
*ngIf="(isHandset | async)!.matches">
31+
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
32+
</button>
33+
<span>Application Title</span>
34+
</mat-toolbar>
35+
</mat-sidenav-content>
36+
</mat-sidenav-container>
37+
`,<% } else { %>
38+
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
39+
styles: [
40+
`
41+
.sidenav-container {
42+
height: 100%;
43+
}
44+
45+
.sidenav {
46+
width: 200px;
47+
box-shadow: 3px 0 6px rgba(0,0,0,.24);
48+
}
49+
`
50+
]<% } else { %>
51+
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>']<% } %><% if(!!viewEncapsulation) { %>,
52+
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
53+
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
54+
})
55+
export class <%= classify(name) %>Component {
56+
isHandset: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.Handset);
57+
constructor(private breakpointObserver: BreakpointObserver) {}
58+
}

‎schematics/nav/index.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import {chain, Rule, noop, Tree, SchematicContext} from '@angular-devkit/schematics';
2+
import {Schema} from './schema';
3+
import {addModuleImportToModule} from '../utils/ast';
4+
import {findModuleFromOptions} from '../utils/devkit-utils/find-module';
5+
import {buildComponent} from '../utils/devkit-utils/component';
6+
7+
/**
8+
* Scaffolds a new navigation component.
9+
* Internally it bootstraps the base component schematic
10+
*/
11+
export default function(options: Schema): Rule {
12+
return chain([
13+
buildComponent({ ...options }),
14+
options.skipImport ? noop() : addNavModulesToModule(options)
15+
]);
16+
}
17+
18+
/**
19+
* Adds the required modules to the relative module.
20+
*/
21+
function addNavModulesToModule(options: Schema) {
22+
return (host: Tree) => {
23+
const modulePath = findModuleFromOptions(host, options);
24+
addModuleImportToModule(host, modulePath, 'LayoutModule', '@angular/cdk/layout');
25+
addModuleImportToModule(host, modulePath, 'MatToolbarModule', '@angular/material');
26+
addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material');
27+
addModuleImportToModule(host, modulePath, 'MatSidenavModule', '@angular/material');
28+
addModuleImportToModule(host, modulePath, 'MatIconModule', '@angular/material');
29+
addModuleImportToModule(host, modulePath, 'MatListModule', '@angular/material');
30+
return host;
31+
};
32+
}

‎schematics/nav/index_spec.ts

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import {SchematicTestRunner} from '@angular-devkit/schematics/testing';
2+
import {join} from 'path';
3+
import {Tree} from '@angular-devkit/schematics';
4+
import {createTestApp} from '../utils/testing';
5+
import {getFileContent} from '@schematics/angular/utility/test';
6+
7+
const collectionPath = join(__dirname, '../collection.json');
8+
9+
describe('material-nav-schematic', () => {
10+
let runner: SchematicTestRunner;
11+
const options = {
12+
name: 'foo',
13+
path: 'app',
14+
sourceDir: 'src',
15+
inlineStyle: false,
16+
inlineTemplate: false,
17+
changeDetection: 'Default',
18+
styleext: 'css',
19+
spec: true,
20+
module: undefined,
21+
export: false,
22+
prefix: undefined,
23+
viewEncapsulation: undefined,
24+
};
25+
26+
beforeEach(() => {
27+
runner = new SchematicTestRunner('schematics', collectionPath);
28+
});
29+
30+
it('should create nav files and add them to module', () => {
31+
const tree = runner.runSchematic('materialNav', { ...options }, createTestApp());
32+
const files = tree.files;
33+
34+
expect(files).toContain('/src/app/foo/foo.component.css');
35+
expect(files).toContain('/src/app/foo/foo.component.html');
36+
expect(files).toContain('/src/app/foo/foo.component.spec.ts');
37+
expect(files).toContain('/src/app/foo/foo.component.ts');
38+
39+
const moduleContent = getFileContent(tree, '/src/app/app.module.ts');
40+
expect(moduleContent).toMatch(/import.*Foo.*from '.\/foo\/foo.component'/);
41+
expect(moduleContent).toMatch(/declarations:\s*\[[^\]]+?,\r?\n\s+FooComponent\r?\n/m);
42+
});
43+
44+
it('should add nav imports to module', () => {
45+
const tree = runner.runSchematic('materialNav', { ...options }, createTestApp());
46+
const moduleContent = getFileContent(tree, '/src/app/app.module.ts');
47+
48+
expect(moduleContent).toContain('LayoutModule');
49+
expect(moduleContent).toContain('MatToolbarModule');
50+
expect(moduleContent).toContain('MatButtonModule');
51+
expect(moduleContent).toContain('MatSidenavModule');
52+
expect(moduleContent).toContain('MatIconModule');
53+
expect(moduleContent).toContain('MatListModule');
54+
55+
expect(moduleContent).toContain(`import { LayoutModule } from '@angular/cdk/layout';`);
56+
expect(moduleContent).toContain(
57+
// tslint:disable-next-line
58+
`import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';`);
59+
});
60+
61+
});

‎schematics/nav/schema.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import {Schema as ComponentSchema} from '@schematics/angular/component/schema';
2+
3+
export interface Schema extends ComponentSchema {}

‎schematics/nav/schema.json

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
{
2+
"$schema": "http://json-schema.org/schema",
3+
"id": "SchematicsMaterialNav",
4+
"title": "Material Nav Options Schema",
5+
"type": "object",
6+
"properties": {
7+
"path": {
8+
"type": "string",
9+
"description": "The path to create the component.",
10+
"default": "app",
11+
"visible": false
12+
},
13+
"sourceDir": {
14+
"type": "string",
15+
"description": "The path of the source directory.",
16+
"default": "src",
17+
"alias": "sd",
18+
"visible": false
19+
},
20+
"appRoot": {
21+
"type": "string",
22+
"description": "The root of the application.",
23+
"visible": false
24+
},
25+
"name": {
26+
"type": "string",
27+
"description": "The name of the component."
28+
},
29+
"inlineStyle": {
30+
"description": "Specifies if the style will be in the ts file.",
31+
"type": "boolean",
32+
"default": false,
33+
"alias": "is"
34+
},
35+
"inlineTemplate": {
36+
"description": "Specifies if the template will be in the ts file.",
37+
"type": "boolean",
38+
"default": false,
39+
"alias": "it"
40+
},
41+
"viewEncapsulation": {
42+
"description": "Specifies the view encapsulation strategy.",
43+
"enum": ["Emulated", "Native", "None"],
44+
"type": "string",
45+
"default": "Emulated",
46+
"alias": "ve"
47+
},
48+
"changeDetection": {
49+
"description": "Specifies the change detection strategy.",
50+
"enum": ["Default", "OnPush"],
51+
"type": "string",
52+
"default": "Default",
53+
"alias": "cd"
54+
},
55+
"prefix": {
56+
"type": "string",
57+
"description": "The prefix to apply to generated selectors.",
58+
"default": "app",
59+
"alias": "p"
60+
},
61+
"styleext": {
62+
"description": "The file extension to be used for style files.",
63+
"type": "string",
64+
"default": "css"
65+
},
66+
"spec": {
67+
"type": "boolean",
68+
"description": "Specifies if a spec file is generated.",
69+
"default": true
70+
},
71+
"flat": {
72+
"type": "boolean",
73+
"description": "Flag to indicate if a dir is created.",
74+
"default": false
75+
},
76+
"skipImport": {
77+
"type": "boolean",
78+
"description": "Flag to skip the module import.",
79+
"default": false
80+
},
81+
"selector": {
82+
"type": "string",
83+
"description": "The selector to use for the component."
84+
},
85+
"module": {
86+
"type": "string",
87+
"description": "Allows specification of the declaring module.",
88+
"alias": "m"
89+
},
90+
"export": {
91+
"type": "boolean",
92+
"default": false,
93+
"description": "Specifies if declaring module exports the component."
94+
}
95+
},
96+
"required": [
97+
"name"
98+
]
99+
}

‎schematics/tsconfig.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,8 @@
1717
"jasmine",
1818
"node"
1919
]
20-
}
20+
},
21+
"exclude": [
22+
"*/files/**/*"
23+
]
2124
}

0 commit comments

Comments
 (0)