Skip to content

Commit 0f3a8f3

Browse files
jelbournjelbourn
committed
chore(material): migrate most components to TypeScript.
1 parent 26d5d17 commit 0f3a8f3

30 files changed

Lines changed: 473 additions & 602 deletions

File tree

‎modules/angular2_material/.clang-format‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
Language: JavaScript
2+
BasedOnStyle: Google
3+
ColumnLimit: 100
4+
5+
TabWidth: 2
6+
ContinuationIndentWidth: 4
7+
MaxEmptyLinesToKeep : 2
8+
9+
AllowShortBlocksOnASingleLine: false
10+
AllowShortIfStatementsOnASingleLine: false
11+
AllowShortLoopsOnASingleLine: false
12+
AllowShortFunctionsOnASingleLine: Empty

modules/angular2_material/src/components/button/button.js renamed to modules/angular2_material/src/components/button/button.ts

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import {Component, onChange} from 'angular2/src/core/annotations_impl/annotations';
2-
import {View} from 'angular2/src/core/annotations_impl/view';
1+
import {Component, View, onChange} from 'angular2/angular2';
32
import {isPresent} from 'angular2/src/facade/lang';
43

54

@@ -12,16 +11,12 @@ export class MdButton {
1211

1312
@Component({
1413
selector: '[md-button][href]',
15-
properties: {
16-
'disabled': 'disabled'
17-
},
14+
properties: {'disabled': 'disabled'},
1815
hostListeners: {'click': 'onClick($event)'},
1916
hostProperties: {'tabIndex': 'tabIndex'},
2017
lifecycle: [onChange]
2118
})
22-
@View({
23-
templateUrl: 'angular2_material/src/components/button/button.html'
24-
})
19+
@View({templateUrl: 'angular2_material/src/components/button/button.html'})
2520
export class MdAnchor {
2621
tabIndex: number;
2722

modules/angular2_material/src/components/checkbox/checkbox.js renamed to modules/angular2_material/src/components/checkbox/checkbox.ts

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,21 @@
1-
import {Component} from 'angular2/src/core/annotations_impl/annotations';
2-
import {View} from 'angular2/src/core/annotations_impl/view';
3-
import {Attribute} from 'angular2/src/core/annotations_impl/di';
1+
import {Component, View, Attribute} from 'angular2/angular2';
42
import {isPresent} from 'angular2/src/facade/lang';
5-
import {KEY_SPACE} from 'angular2_material/src/core/constants'
3+
import {KEY_SPACE} from 'angular2_material/src/core/constants';
64
import {KeyboardEvent} from 'angular2/src/facade/browser';
75
import {NumberWrapper} from 'angular2/src/facade/lang';
86

97
@Component({
108
selector: 'md-checkbox',
11-
properties: {
12-
'checked': 'checked',
13-
'disabled': 'disabled'
14-
},
15-
hostListeners: {
16-
'keydown': 'onKeydown($event)'
17-
},
9+
properties: {'checked': 'checked', 'disabled': 'disabled'},
10+
hostListeners: {'keydown': 'onKeydown($event)'},
1811
hostProperties: {
1912
'tabindex': 'tabindex',
2013
'role': 'attr.role',
2114
'checked': 'attr.aria-checked',
2215
'disabled': 'attr.aria-disabled'
2316
}
2417
})
25-
@View({
26-
templateUrl: 'angular2_material/src/components/checkbox/checkbox.html',
27-
directives: []
28-
})
18+
@View({templateUrl: 'angular2_material/src/components/checkbox/checkbox.html', directives: []})
2919
export class MdCheckbox {
3020
/** Whether this checkbox is checked. */
3121
checked: boolean;
@@ -39,7 +29,7 @@ export class MdCheckbox {
3929
/** Setter for tabindex */
4030
tabindex: number;
4131

42-
constructor(@Attribute('tabindex') tabindex: String) {
32+
constructor(@Attribute('tabindex') tabindex: string) {
4333
this.role = 'checkbox';
4434
this.checked = false;
4535
this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;

‎modules/angular2_material/src/components/dialog/dialog.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {ObservableWrapper, Promise, PromiseWrapper} from 'angular2/src/facade/as
44
import {isPresent, Type} from 'angular2/src/facade/lang';
55
import {DOM} from 'angular2/src/dom/dom_adapter';
66
import {MouseEvent, KeyboardEvent} from 'angular2/src/facade/browser';
7-
import {KEY_ESC} from 'angular2_material/src/core/constants'
7+
import {KEY_ESC} from 'angular2_material/src/core/constants';
88

99
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
1010
// add those imports back into 'angular2/angular2';

modules/angular2_material/src/components/grid_list/grid_list.js renamed to modules/angular2_material/src/components/grid_list/grid_list.ts

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
import {Component, onDestroy, onChange, onAllChangesDone} from 'angular2/src/core/annotations_impl/annotations';
2-
import {View} from 'angular2/src/core/annotations_impl/view';
3-
import {Parent} from 'angular2/src/core/annotations_impl/visibility';
1+
import {Component, View, Parent, onDestroy, onChange, onAllChangesDone} from 'angular2/angular2';
2+
43
import {ListWrapper} from 'angular2/src/facade/collection';
5-
import {StringWrapper, isPresent, isString, NumberWrapper, RegExpWrapper} from 'angular2/src/facade/lang';
4+
import {
5+
StringWrapper,
6+
isPresent,
7+
isString,
8+
NumberWrapper,
9+
RegExpWrapper
10+
} from 'angular2/src/facade/lang';
611
import {Math} from 'angular2/src/facade/math';
712

813
// TODO(jelbourn): Set appropriate aria attributes for grid list elements.
@@ -14,16 +19,10 @@ import {Math} from 'angular2/src/facade/math';
1419

1520
@Component({
1621
selector: 'md-grid-list',
17-
properties: {
18-
'cols': 'cols',
19-
'rowHeight': 'row-height',
20-
'gutterSize': 'gutter-size'
21-
},
22+
properties: {'cols': 'cols', 'rowHeight': 'row-height', 'gutterSize': 'gutter-size'},
2223
lifecycle: [onAllChangesDone]
2324
})
24-
@View({
25-
templateUrl: 'angular2_material/src/components/grid_list/grid_list.html'
26-
})
25+
@View({templateUrl: 'angular2_material/src/components/grid_list/grid_list.html'})
2726
export class MdGridList {
2827
/** List of tiles that are being rendered. */
2928
tiles: List<MdGridTile>;
@@ -218,10 +217,7 @@ export class MdGridList {
218217

219218
@Component({
220219
selector: 'md-grid-tile',
221-
properties: {
222-
'rowspan': 'rowspan',
223-
'colspan': 'colspan'
224-
},
220+
properties: {'rowspan': 'rowspan', 'colspan': 'colspan'},
225221
hostProperties: {
226222
'styleHeight': 'style.height',
227223
'styleWidth': 'style.width',
@@ -233,9 +229,7 @@ export class MdGridList {
233229
},
234230
lifecycle: [onDestroy, onChange]
235231
})
236-
@View({
237-
templateUrl: 'angular2_material/src/components/grid_list/grid_tile.html'
238-
})
232+
@View({templateUrl: 'angular2_material/src/components/grid_list/grid_tile.html'})
239233
export class MdGridTile {
240234
gridList: MdGridList;
241235
_rowspan: number;
@@ -282,7 +276,6 @@ export class MdGridTile {
282276
* Notifies grid-list that a re-layout is required.
283277
*/
284278
onChange(_) {
285-
//console.log(`grid-tile on-change ${this.gridList.tiles.indexOf(this)}`);
286279
if (!this.isRegisteredWithGridList) {
287280
this.gridList.addTile(this);
288281
this.isRegisteredWithGridList = true;

modules/angular2_material/src/components/input/input.js renamed to modules/angular2_material/src/components/input/input.ts

Lines changed: 57 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import {Directive, onAllChangesDone} from 'angular2/src/core/annotations_impl/annotations';
2-
import {Attribute} from 'angular2/src/core/annotations_impl/di';
3-
import {Parent} from 'angular2/src/core/annotations_impl/visibility';
1+
import {Directive, onAllChangesDone, Attribute, Parent} from 'angular2/angular2';
42

53
import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
64

@@ -9,12 +7,57 @@ import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
97
// TODO(jelbourn): max-length counter
108
// TODO(jelbourn): placeholder property
119

10+
@Directive({
11+
selector: 'md-input-container',
12+
lifecycle: [onAllChangesDone],
13+
hostProperties:
14+
{'inputHasValue': 'class.md-input-has-value', 'inputHasFocus': 'class.md-input-focused'}
15+
})
16+
export class MdInputContainer {
17+
// The MdInput or MdTextarea inside of this container.
18+
_input: MdInput;
19+
20+
// Whether the input inside of this container has a non-empty value.
21+
inputHasValue: boolean;
22+
23+
// Whether the input inside of this container has focus.
24+
inputHasFocus: boolean;
25+
26+
constructor(@Attribute('id') id: string) {
27+
this._input = null;
28+
this.inputHasValue = false;
29+
this.inputHasFocus = false;
30+
}
31+
32+
onAllChangesDone() {
33+
// Enforce that this directive actually contains a text input.
34+
if (this._input == null) {
35+
throw 'No <input> or <textarea> found inside of <md-input-container>';
36+
}
37+
}
38+
39+
/** Registers the child MdInput or MdTextarea. */
40+
registerInput(input) {
41+
if (this._input != null) {
42+
throw 'Only one text input is allowed per <md-input-container>.';
43+
}
44+
45+
this._input = input;
46+
this.inputHasValue = input.value != '';
47+
48+
// Listen to input changes and focus events so that we can apply the appropriate CSS
49+
// classes based on the input state.
50+
ObservableWrapper.subscribe(input.mdChange, value => { this.inputHasValue = value != ''; });
51+
52+
ObservableWrapper.subscribe(input.mdFocusChange, hasFocus => {this.inputHasFocus = hasFocus});
53+
}
54+
}
55+
56+
1257
@Directive({
1358
selector: 'md-input-container input',
1459
events: ['mdChange', 'mdFocusChange'],
15-
hostProperties: {
16-
'yes': 'class.md-input'
17-
},
60+
hostProperties: {'yes': 'class.md-input'},
1861
hostListeners: {
1962
'input': 'updateValue($event)',
2063
'focus': 'setHasFocus(true)',
@@ -30,9 +73,8 @@ export class MdInput {
3073
mdChange: EventEmitter;
3174
mdFocusChange: EventEmitter;
3275

33-
constructor(
34-
@Attribute('value') value: String,
35-
@Parent() container: MdInputContainer) {
76+
constructor(@Attribute('value') value: string, @Parent() container: MdInputContainer,
77+
@Attribute('id') id: string) {
3678
// TODO(jelbourn): Remove this when #1402 is done.
3779
this.yes = true;
3880

@@ -53,6 +95,7 @@ export class MdInput {
5395
}
5496
}
5597

98+
/*
5699
@Directive({
57100
selector: 'md-input-container textarea',
58101
events: ['mdChange', 'mdFocusChange'],
@@ -67,60 +110,10 @@ export class MdInput {
67110
})
68111
export class MdTextarea extends MdInput {
69112
constructor(
70-
@Attribute('value') value: String,
71-
@Parent() container: MdInputContainer) {
72-
super(value, container);
73-
}
74-
}
75-
76-
@Directive({
77-
selector: 'md-input-container',
78-
lifecycle: [onAllChangesDone],
79-
hostProperties: {
80-
'inputHasValue': 'class.md-input-has-value',
81-
'inputHasFocus': 'class.md-input-focused'
82-
}
83-
})
84-
export class MdInputContainer {
85-
// The MdInput or MdTextarea inside of this container.
86-
_input: MdInput;
87-
88-
// Whether the input inside of this container has a non-empty value.
89-
inputHasValue: boolean;
90-
91-
// Whether the input inside of this container has focus.
92-
inputHasFocus: boolean;
93-
94-
constructor() {
95-
this._input = null;
96-
this.inputHasValue = false;
97-
this.inputHasFocus = false;
98-
}
99-
100-
onAllChangesDone() {
101-
// Enforce that this directive actually contains a text input.
102-
if (this._input == null) {
103-
throw 'No <input> or <textarea> found inside of <md-input-container>';
104-
}
105-
}
106-
107-
/** Registers the child MdInput or MdTextarea. */
108-
registerInput(input) {
109-
if (this._input != null) {
110-
throw 'Only one text input is allowed per <md-input-container>.';
111-
}
112-
113-
this._input = input;
114-
this.inputHasValue = input.value != '';
115-
116-
// Listen to input changes and focus events so that we can apply the appropriate CSS
117-
// classes based on the input state.
118-
ObservableWrapper.subscribe(input.mdChange, value => {
119-
this.inputHasValue = value != '';
120-
});
121-
122-
ObservableWrapper.subscribe(input.mdFocusChange, hasFocus => {
123-
this.inputHasFocus = hasFocus
124-
});
113+
@Attribute('value') value: string,
114+
@Parent() container: MdInputContainer,
115+
@Attribute('id') id: string) {
116+
super(value, container, id);
125117
}
126118
}
119+
*/

‎modules/angular2_material/src/components/progress-circular/progress_circular.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎modules/angular2_material/src/components/progress-circular/progress_circular.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {Component, View} from 'angular2/angular2';
2+
3+
@Component({selector: 'md-progress-circular'})
4+
@View({templateUrl: 'angular2_material/src/components/progress-circular/progress_circular.html'})
5+
export class MdProgressCircular {
6+
constructor() {}
7+
}

modules/angular2_material/src/components/progress-linear/progress_linear.js renamed to modules/angular2_material/src/components/progress-linear/progress_linear.ts

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
1-
import {Component, onChange} from 'angular2/src/core/annotations_impl/annotations';
2-
import {View} from 'angular2/src/core/annotations_impl/view';
3-
import {Attribute} from 'angular2/src/core/annotations_impl/di';
1+
import {Component, onChange, View, Attribute} from 'angular2/angular2';
2+
43
import {isPresent, isBlank} from 'angular2/src/facade/lang';
54
import {Math} from 'angular2/src/facade/math';
65

76
@Component({
87
selector: 'md-progress-linear',
98
lifecycle: [onChange],
10-
properties: {
11-
'value': 'value',
12-
'bufferValue': 'buffer-value'
13-
},
9+
properties: {'value': 'value', 'bufferValue': 'buffer-value'},
1410
hostProperties: {
1511
'role': 'attr.role',
1612
'ariaValuemin': 'attr.aria-valuemin',
@@ -42,7 +38,7 @@ export class MdProgressLinear {
4238
ariaValuemin: string;
4339
ariaValuemax: string;
4440

45-
constructor(@Attribute('md-mode') mode: String) {
41+
constructor(@Attribute('md-mode') mode: string) {
4642
this.primaryBarTransform = '';
4743
this.secondaryBarTransform = '';
4844

0 commit comments

Comments
 (0)