Skip to content

chore(material): migrate most components to TypeScript. #2160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jelbourn wants to merge 1 commit into from
Closed

chore(material): migrate most components to TypeScript. #2160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions modules/angular2_material/.clang-format
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
Language: JavaScript
BasedOnStyle: Google
ColumnLimit: 100

TabWidth: 2
ContinuationIndentWidth: 4
MaxEmptyLinesToKeep : 2

AllowShortBlocksOnASingleLine: false
Copy link
Contributor

@alexeagle alexeagle May 27, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer these as well. Maybe we should consider applying to all of Angular. The delta would be pretty big but maybe worth it? @mprobst ?

Copy link
Contributor

@mprobst mprobst May 27, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm large apathetic to this. I generally like anything that saves vertical
space (in particular for object literals, and there in particular in
named-arguments style calls). But I don't feel too strongly about it, I
just want automated formatting that works well.

AllowShortIfStatementsOnASingleLine: false
AllowShortLoopsOnASingleLine: false
AllowShortFunctionsOnASingleLine: Empty
11 changes: 3 additions & 8 deletions ..._material/src/components/button/button.js → ..._material/src/components/button/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {Component, onChange} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Component, View, onChange} from 'angular2/angular2';
import {isPresent} from 'angular2/src/facade/lang';


Expand All @@ -12,16 +11,12 @@ export class MdButton {

@Component({
selector: '[md-button][href]',
properties: {
'disabled': 'disabled'
},
properties: {'disabled': 'disabled'},
hostListeners: {'click': 'onClick($event)'},
hostProperties: {'tabIndex': 'tabIndex'},
lifecycle: [onChange]
})
@View({
templateUrl: 'angular2_material/src/components/button/button.html'
})
@View({templateUrl: 'angular2_material/src/components/button/button.html'})
export class MdAnchor {
tabIndex: number;

Expand Down
22 changes: 6 additions & 16 deletions ...erial/src/components/checkbox/checkbox.js → ...erial/src/components/checkbox/checkbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,21 @@
import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Attribute} from 'angular2/src/core/annotations_impl/di';
import {Component, View, Attribute} from 'angular2/angular2';
import {isPresent} from 'angular2/src/facade/lang';
import {KEY_SPACE} from 'angular2_material/src/core/constants'
import {KEY_SPACE} from 'angular2_material/src/core/constants';
import {KeyboardEvent} from 'angular2/src/facade/browser';
import {NumberWrapper} from 'angular2/src/facade/lang';

@Component({
selector: 'md-checkbox',
properties: {
'checked': 'checked',
'disabled': 'disabled'
},
hostListeners: {
'keydown': 'onKeydown($event)'
},
properties: {'checked': 'checked', 'disabled': 'disabled'},
hostListeners: {'keydown': 'onKeydown($event)'},
hostProperties: {
'tabindex': 'tabindex',
'role': 'attr.role',
'checked': 'attr.aria-checked',
'disabled': 'attr.aria-disabled'
}
})
@View({
templateUrl: 'angular2_material/src/components/checkbox/checkbox.html',
directives: []
})
@View({templateUrl: 'angular2_material/src/components/checkbox/checkbox.html', directives: []})
export class MdCheckbox {
/** Whether this checkbox is checked. */
checked: boolean;
Expand All @@ -39,7 +29,7 @@ export class MdCheckbox {
/** Setter for tabindex */
tabindex: number;

constructor(@Attribute('tabindex') tabindex: String) {
constructor(@Attribute('tabindex') tabindex: string) {
this.role = 'checkbox';
this.checked = false;
this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
Expand Down
2 changes: 1 addition & 1 deletion modules/angular2_material/src/components/dialog/dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {ObservableWrapper, Promise, PromiseWrapper} from 'angular2/src/facade/as
import {isPresent, Type} from 'angular2/src/facade/lang';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {MouseEvent, KeyboardEvent} from 'angular2/src/facade/browser';
import {KEY_ESC} from 'angular2_material/src/core/constants'
import {KEY_ESC} from 'angular2_material/src/core/constants';

// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
Expand Down
33 changes: 13 additions & 20 deletions ...ial/src/components/grid_list/grid_list.js → ...ial/src/components/grid_list/grid_list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import {Component, onDestroy, onChange, onAllChangesDone} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Parent} from 'angular2/src/core/annotations_impl/visibility';
import {Component, View, Parent, onDestroy, onChange, onAllChangesDone} from 'angular2/angular2';

import {ListWrapper} from 'angular2/src/facade/collection';
import {StringWrapper, isPresent, isString, NumberWrapper, RegExpWrapper} from 'angular2/src/facade/lang';
import {
StringWrapper,
isPresent,
isString,
NumberWrapper,
RegExpWrapper
} from 'angular2/src/facade/lang';
import {Math} from 'angular2/src/facade/math';

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

@Component({
selector: 'md-grid-list',
properties: {
'cols': 'cols',
'rowHeight': 'row-height',
'gutterSize': 'gutter-size'
},
properties: {'cols': 'cols', 'rowHeight': 'row-height', 'gutterSize': 'gutter-size'},
lifecycle: [onAllChangesDone]
})
@View({
templateUrl: 'angular2_material/src/components/grid_list/grid_list.html'
})
@View({templateUrl: 'angular2_material/src/components/grid_list/grid_list.html'})
export class MdGridList {
/** List of tiles that are being rendered. */
tiles: List<MdGridTile>;
Expand Down Expand Up @@ -218,10 +217,7 @@ export class MdGridList {

@Component({
selector: 'md-grid-tile',
properties: {
'rowspan': 'rowspan',
'colspan': 'colspan'
},
properties: {'rowspan': 'rowspan', 'colspan': 'colspan'},
hostProperties: {
'styleHeight': 'style.height',
'styleWidth': 'style.width',
Expand All @@ -233,9 +229,7 @@ export class MdGridList {
},
lifecycle: [onDestroy, onChange]
})
@View({
templateUrl: 'angular2_material/src/components/grid_list/grid_tile.html'
})
@View({templateUrl: 'angular2_material/src/components/grid_list/grid_tile.html'})
export class MdGridTile {
gridList: MdGridList;
_rowspan: number;
Expand Down Expand Up @@ -282,7 +276,6 @@ export class MdGridTile {
* Notifies grid-list that a re-layout is required.
*/
onChange(_) {
//console.log(`grid-tile on-change ${this.gridList.tiles.indexOf(this)}`);
if (!this.isRegisteredWithGridList) {
this.gridList.addTile(this);
this.isRegisteredWithGridList = true;
Expand Down
121 changes: 57 additions & 64 deletions ...r2_material/src/components/input/input.js → ...r2_material/src/components/input/input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import {Directive, onAllChangesDone} from 'angular2/src/core/annotations_impl/annotations';
import {Attribute} from 'angular2/src/core/annotations_impl/di';
import {Parent} from 'angular2/src/core/annotations_impl/visibility';
import {Directive, onAllChangesDone, Attribute, Parent} from 'angular2/angular2';

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

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

@Directive({
selector: 'md-input-container',
lifecycle: [onAllChangesDone],
hostProperties:
{'inputHasValue': 'class.md-input-has-value', 'inputHasFocus': 'class.md-input-focused'}
})
export class MdInputContainer {
// The MdInput or MdTextarea inside of this container.
_input: MdInput;

// Whether the input inside of this container has a non-empty value.
inputHasValue: boolean;

// Whether the input inside of this container has focus.
inputHasFocus: boolean;

constructor(@Attribute('id') id: string) {
this._input = null;
this.inputHasValue = false;
Copy link
Contributor

@vicb vicb May 26, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

move the init value to the declaration ?

Copy link
Member Author

@jelbourn jelbourn May 26, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would rather make minimal changes in this PR to get things working and worry about idiomatic TS later.

Copy link
Contributor

@vicb vicb May 26, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes sense. I was also asking to know if we have defined a best practice for those.

Copy link
Member Author

@jelbourn jelbourn May 26, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we've really talked about it yet. Would be a good thing to do soon.

this.inputHasFocus = false;
}

onAllChangesDone() {
// Enforce that this directive actually contains a text input.
if (this._input == null) {
throw 'No <input> or <textarea> found inside of <md-input-container>';
}
}

/** Registers the child MdInput or MdTextarea. */
registerInput(input) {
if (this._input != null) {
throw 'Only one text input is allowed per <md-input-container>.';
}

this._input = input;
this.inputHasValue = input.value != '';

// Listen to input changes and focus events so that we can apply the appropriate CSS
// classes based on the input state.
ObservableWrapper.subscribe(input.mdChange, value => { this.inputHasValue = value != ''; });

ObservableWrapper.subscribe(input.mdFocusChange, hasFocus => {this.inputHasFocus = hasFocus});
}
}


@Directive({
selector: 'md-input-container input',
events: ['mdChange', 'mdFocusChange'],
hostProperties: {
'yes': 'class.md-input'
},
hostProperties: {'yes': 'class.md-input'},
hostListeners: {
'input': 'updateValue($event)',
'focus': 'setHasFocus(true)',
Expand All @@ -30,9 +73,8 @@ export class MdInput {
mdChange: EventEmitter;
mdFocusChange: EventEmitter;

constructor(
@Attribute('value') value: String,
@Parent() container: MdInputContainer) {
constructor(@Attribute('value') value: string, @Parent() container: MdInputContainer,
@Attribute('id') id: string) {
// TODO(jelbourn): Remove this when #1402 is done.
this.yes = true;

Expand All @@ -53,6 +95,7 @@ export class MdInput {
}
}

/*
@Directive({
selector: 'md-input-container textarea',
events: ['mdChange', 'mdFocusChange'],
Expand All @@ -67,60 +110,10 @@ export class MdInput {
})
export class MdTextarea extends MdInput {
constructor(
@Attribute('value') value: String,
@Parent() container: MdInputContainer) {
super(value, container);
}
}

@Directive({
selector: 'md-input-container',
lifecycle: [onAllChangesDone],
hostProperties: {
'inputHasValue': 'class.md-input-has-value',
'inputHasFocus': 'class.md-input-focused'
}
})
export class MdInputContainer {
// The MdInput or MdTextarea inside of this container.
_input: MdInput;

// Whether the input inside of this container has a non-empty value.
inputHasValue: boolean;

// Whether the input inside of this container has focus.
inputHasFocus: boolean;

constructor() {
this._input = null;
this.inputHasValue = false;
this.inputHasFocus = false;
}

onAllChangesDone() {
// Enforce that this directive actually contains a text input.
if (this._input == null) {
throw 'No <input> or <textarea> found inside of <md-input-container>';
}
}

/** Registers the child MdInput or MdTextarea. */
registerInput(input) {
if (this._input != null) {
throw 'Only one text input is allowed per <md-input-container>.';
}

this._input = input;
this.inputHasValue = input.value != '';

// Listen to input changes and focus events so that we can apply the appropriate CSS
// classes based on the input state.
ObservableWrapper.subscribe(input.mdChange, value => {
this.inputHasValue = value != '';
});

ObservableWrapper.subscribe(input.mdFocusChange, hasFocus => {
this.inputHasFocus = hasFocus
});
@Attribute('value') value: string,
@Parent() container: MdInputContainer,
@Attribute('id') id: string) {
super(value, container, id);
}
}
*/
13 changes: 0 additions & 13 deletions modules/angular2_material/src/components/progress-circular/progress_circular.js
View file
Open in desktop

This file was deleted.

7 changes: 7 additions & 0 deletions modules/angular2_material/src/components/progress-circular/progress_circular.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import {Component, View} from 'angular2/angular2';

@Component({selector: 'md-progress-circular'})
@View({templateUrl: 'angular2_material/src/components/progress-circular/progress_circular.html'})
export class MdProgressCircular {
constructor() {}
}
12 changes: 4 additions & 8 deletions ...onents/progress-linear/progress_linear.js → ...onents/progress-linear/progress_linear.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
import {Component, onChange} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Attribute} from 'angular2/src/core/annotations_impl/di';
import {Component, onChange, View, Attribute} from 'angular2/angular2';

import {isPresent, isBlank} from 'angular2/src/facade/lang';
import {Math} from 'angular2/src/facade/math';

@Component({
selector: 'md-progress-linear',
lifecycle: [onChange],
properties: {
'value': 'value',
'bufferValue': 'buffer-value'
},
properties: {'value': 'value', 'bufferValue': 'buffer-value'},
hostProperties: {
'role': 'attr.role',
'ariaValuemin': 'attr.aria-valuemin',
Expand Down Expand Up @@ -42,7 +38,7 @@ export class MdProgressLinear {
ariaValuemin: string;
ariaValuemax: string;

constructor(@Attribute('md-mode') mode: String) {
constructor(@Attribute('md-mode') mode: string) {
this.primaryBarTransform = '';
this.secondaryBarTransform = '';

Expand Down
Loading