Skip to content

Commit dcc0979

Browse files
committed
Applying OnPush changes. Two-way data-binding will from now on be applicable when using the root dataSource binding option. Updating samples. Start updating on tests.
1 parent 07493dd commit dcc0979

File tree

53 files changed

+395
-551
lines changed

Some content is hidden

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

53 files changed

+395
-551
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"prepare-dist": "rollup -c rollup.config.umd.js",
6565
"pretest": "npm run bundle && npm run build",
6666
"test": "karma start tests/karma.conf.js && npm run remap-istanbul",
67+
"test:watch": "karma start tests/karma.conf.js --no-single-run",
6768
"remap-istanbul": "npm run copy-coverage-report && npm run remap-istanbul-html && npm run remap-istanbul-lcov",
6869
"remap-istanbul-html": "remap-istanbul -i coverage/karma-tmp/coverage.json -o coverage/html-report -t html",
6970
"remap-istanbul-lcov": "remap-istanbul -i coverage/karma-tmp/coverage.json -o coverage/lcov.info -t lcovonly",

samples/igCombo/app.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export class AppComponent {
2020
this.options = {
2121
valueKey: "ProductID",
2222
textKey: "ProductName",
23-
dataSource: this.northwind,
2423
width: "100%"
2524
};
2625
this.combo = {

samples/igCombo/igComboTemplate.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,15 @@ <h1 class="push-down-md"><a href="http://igniteui.com/combo/overview" target="_b
2525

2626
<ig-combo id="'combo1'"
2727
[(options)]="options"
28-
[(ngModel)]="combo.value1">
28+
[(ngModel)]="combo.value1"
29+
[dataSource]='northwind'>
2930
</ig-combo>
3031

3132
</div>
3233
<div class="col-sm-3 col-md-2">
3334

3435
<ig-combo [widgetId]="'combo2'"
35-
[(options)]="options"
36+
[(options)]="options" [dataSource]='northwind'
3637
[(ngModel)]="combo.value1">
3738
</ig-combo>
3839

samples/igGrid/app.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ export class AppComponent {
2727

2828
this.gridOptions = {
2929
autoCommit:true,
30-
//dataSource: this.data,
3130
width: "100%",
3231
height: "400px",
3332
autoGenerateColumns: false,
@@ -70,7 +69,6 @@ export class AppComponent {
7069
addRecord() {
7170
this.data.push(this.newProduct);
7271
this.newProduct = this.createNewProduct();
73-
this.grid.markForCheck();
7472
};
7573

7674
deleteRecord(val) {
@@ -82,12 +80,7 @@ export class AppComponent {
8280
return item["ProductID"] === val;
8381
});
8482
this.data.splice(ind, 1);
85-
this.grid.markForCheck();
8683
};
87-
clickHandler(){
88-
this.gridOptions.width="80%";
89-
this.grid.markForCheck();
90-
}
9184
}
9285

9386
@NgModule({

samples/igGrid/igGridTemplate.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<div class="row">
22
<div class="col-md-8">
33
<ig-grid [(options)]="gridOptions" [(widgetId)]='id' #grid1 [dataSource]='data'></ig-grid>
4-
<button (click)="clickHandler()">Apply Change</button>
54
</div>
65
<div class="col-md-4">
76
<h3>Add Product</h3>

samples/igTree/app.ts

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, NgModule } from '@angular/core';
1+
import { Component, NgModule, ViewChild } from '@angular/core';
22
import { IgTreeComponent } from "../../src/igniteui.angular2";
33
import { FormsModule } from '@angular/forms';
44
import { BrowserModule } from '@angular/platform-browser';
@@ -15,7 +15,8 @@ export class AppComponent {
1515
protected data: any;
1616
protected newProductCategory: any;
1717
protected newProductSubcategory: any;
18-
18+
@ViewChild("tree") tree: IgTreeComponent;
19+
1920
constructor() {
2021
this.data = ProductCategories.getData();
2122
this.newProductCategory= { "Name": "",
@@ -28,7 +29,7 @@ export class AppComponent {
2829
"ProductSubcategoryID": 0
2930
};
3031
this.options = {
31-
dataSource: this.data,
32+
//dataSource: this.data,
3233
bindings: {
3334
childDataProperty : "ProductSubcategories",
3435
textKey : "Name",
@@ -49,14 +50,19 @@ export class AppComponent {
4950
addProductSubcategory (index){
5051
this.data[index].ProductSubcategories.push(JSON.parse(JSON.stringify(this.newProductSubcategory)));
5152
this.newProductSubcategory.ProductSubcategoryID = this.data[index].ProductSubcategories.length + 1;
53+
this.tree.markForCheck();
5254

5355
}
5456
deleteProductCategory(index){
5557
this.data.removeAt(index);
5658
}
59+
updateProductSubcategory(){
60+
this.tree.markForCheck();
61+
}
5762

5863
deleteProductSubcategory(index, subIndex){
5964
this.data[index].ProductSubcategories.removeAt(subIndex);
65+
this.tree.markForCheck();
6066
}
6167

6268
removeSelectedNode(){

samples/igTree/igTreeTemplate.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="col-md-3">
2-
<ig-tree widgetId="tree1" [(options)]="options">
2+
<ig-tree widgetId="tree1" [(options)]="options" [dataSource]="data" #tree>
33
</ig-tree>
44
</div>
55
<div class="col-md-9">
@@ -57,7 +57,7 @@
5757
<div *ngFor="let ps of pc.ProductSubcategories, let j = index">
5858
<div class="row">
5959
<div class="col-sm-6">
60-
<input class="form-control" type="text" [(ngModel)]="ps.Name">
60+
<input class="form-control" type="text" [(ngModel)]="ps.Name" (ngModelChange)="updateProductSubcategory()">
6161
</div>
6262
<div class="col-sm-1">
6363
<input

src/igbulletgraph/igbulletgraph.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Renderer, IterableDiffers, ElementRef } from "@angular/core";
1+
import { Component, Renderer, IterableDiffers, ElementRef, KeyValueDiffers, ChangeDetectorRef } from "@angular/core";
22
import { IgControlBase } from "../igcontrolbase/igcontrolbase";
33

44

@@ -9,7 +9,7 @@ import { IgControlBase } from "../igcontrolbase/igcontrolbase";
99
outputs: ["formatLabel","alignLabel"]
1010
})
1111
export class IgBulletGraphComponent extends IgControlBase<IgBulletGraph> {
12-
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers) { super(el, renderer, differs); }
12+
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers, kvalDiffers: KeyValueDiffers, cdr: ChangeDetectorRef) { super(el, renderer, differs, kvalDiffers, cdr); }
1313

1414
/**
1515
* Returns a string containing the names of all the ranges delimited with a \n symbol.

src/igcombo/igcombo.component.ts

Lines changed: 70 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Optional, ElementRef, Renderer, IterableDiffers } from "@angular/core";
1+
import { Component, Optional, ElementRef, Renderer, IterableDiffers, KeyValueDiffers, ChangeDetectorRef, SimpleChanges, Input } from "@angular/core";
22
import { IgControlBase } from "../igcontrolbase/igcontrolbase";
33
import { ControlValueAccessor, NgModel } from "@angular/forms";
44

@@ -11,12 +11,15 @@ declare var jQuery: any;
1111
outputs: ["rendered","dataBinding","dataBound","filtering","filtered","itemsRendering","itemsRendered","dropDownOpening","dropDownOpened","dropDownClosing","dropDownClosed","selectionChanging","selectionChanged"]
1212
})
1313
export class IgComboComponent extends IgControlBase<IgCombo> implements ControlValueAccessor {
14+
15+
@Input()
16+
public dataSource;
17+
1418
protected _model: any;
15-
private _dataSource: any;
1619
private _changes: any;
1720

18-
constructor( @Optional() public model: NgModel, el: ElementRef, renderer: Renderer, differs: IterableDiffers) {
19-
super(el, renderer, differs);
21+
constructor( @Optional() public model: NgModel, el: ElementRef, renderer: Renderer, differs: IterableDiffers, kvalDiffers: KeyValueDiffers, cdr: ChangeDetectorRef) {
22+
super(el, renderer, differs, kvalDiffers, cdr);
2023
if (model) {
2124
model.valueAccessor = this;
2225
this._model = model;
@@ -25,8 +28,14 @@ export class IgComboComponent extends IgControlBase<IgCombo> implements ControlV
2528

2629
ngOnInit() {
2730
let that = this;
31+
const valueKey = this["valueKey"] || this.options.valueKey;
32+
if (this.dataSource === null || this.dataSource === undefined) {
33+
this.dataSource = this.options["dataSource"];
34+
}
35+
if (!this.options["dataSource"] && this.dataSource) {
36+
this.options["dataSource"] = this.dataSource;
37+
}
2838
super.ngOnInit();
29-
this._dataSource = jQuery.extend(true, [], this._config.dataSource);
3039

3140
if (this._model) {
3241
// D.P. #244 only attach selectionchanged handler if there's a model to update
@@ -40,10 +49,10 @@ export class IgComboComponent extends IgControlBase<IgCombo> implements ControlV
4049

4150
if (ui.owner.options.multiSelection.enabled) {
4251
that._model.viewToModelUpdate(items.map(function(item) {
43-
return item.data[that._config.valueKey];
52+
return item.data[valueKey];
4453
}));
4554
} else {
46-
that._model.viewToModelUpdate(items[0].data[that._config.valueKey]);
55+
that._model.viewToModelUpdate(items[0].data[valueKey]);
4756
}
4857
});
4958
//manually call writeValue, because the LifeCycle has been changed and writeValue is executed before ngOnInit
@@ -69,44 +78,64 @@ export class IgComboComponent extends IgControlBase<IgCombo> implements ControlV
6978
this.onTouched = fn;
7079
}
7180

72-
ngDoCheck() {
73-
if (this._differ != null && this._allowChangeDetection) {
74-
this.optionChange();
75-
this._allowChangeDetection = false;
76-
var diff = [];
77-
var element = jQuery(this._el);
78-
var i, j, valKey = this._config.valueKey, record, item;
79-
80-
//check for changes in collection
81-
if (!(this._config.dataSource instanceof Array)) {
82-
return;
83-
}
84-
this._changes = this._differ.diff(this._config.dataSource);
85-
if (this._config.dataSource && this._config.dataSource.length !== this._dataSource.length) {
86-
this._dataSource = jQuery.extend(true, [], this._config.dataSource);
87-
if (this._changes) {
88-
element.data("igCombo").dataBind();
89-
if (this.model && this.model.value) {
90-
this.writeValue(this.model.value);
91-
}
92-
}
93-
}
81+
dataSourceApplyChanges(changes) {
82+
const element = jQuery(this._el);
83+
element.data("igCombo").dataBind();
84+
if (this.model && this.model.value) {
85+
this.writeValue(this.model.value);
86+
}
87+
}
88+
updateComboItem(rec, val, key, index){
89+
const element = jQuery(this._el);
90+
const comboItem = element.data("igCombo").itemsFromIndex(index);
91+
element.data("igCombo")._updateItem(comboItem.element, rec);
92+
if (element.data("igCombo").isSelected(comboItem.element)) {
93+
//should update the input
94+
element.data("igCombo")._updateInputValues(false);
95+
}
9496

95-
if (!this.equalsDiff(this._config.dataSource, this._dataSource, diff)) {
96-
this._dataSource = jQuery.extend(true, [], this._config.dataSource);
97-
for (i = 0; i < diff.length; i++) {
98-
for (j = 0; j < diff[i].txlog.length; j++) {
99-
record = this._config.dataSource[diff[i].index];
100-
item = element.data("igCombo").itemsFromIndex(diff[i].index);
101-
element.data("igCombo")._updateItem(item.element, record);
102-
if (element.data("igCombo").isSelected(item.element)) {
103-
//should update the input
104-
element.data("igCombo")._updateInputValues(false);
105-
}
97+
}
98+
public ngOnChanges(changes: SimpleChanges): void {
99+
const ds = "dataSource";
100+
if (ds in changes) {
101+
const value = changes[ds].currentValue;
102+
if (value) {
103+
try {
104+
this._differ = this._differs.find(value).create();
105+
this._changes = [];
106+
for(var i=0; i < this.dataSource.length; i++){
107+
this._changes.push(this.kvalDiffers.find({}).create());
108+
}
109+
}
110+
catch(e){
111+
throw new Error("Only binding to arrays is supported.");
112+
}
113+
}
114+
}
115+
super.ngOnChanges(changes);
116+
}
117+
ngDoCheck() {
118+
if (this._differ) {
119+
const changes = this._differ.diff(this.dataSource);
120+
//check if grid is initialized
121+
const combo = jQuery(this._el).data(this._widgetName);
122+
if (changes && combo) {
123+
this.dataSourceApplyChanges(changes);
124+
}
125+
if(this._changes && combo){
126+
//check recs
127+
for(var i = 0; i < this.dataSource.length; i++){
128+
var item = this.dataSource[i];
129+
var recChanges = this._changes[i].diff(item);
130+
if(recChanges){
131+
recChanges.forEachChangedItem((change: any) => {
132+
this.updateComboItem(item, change.currentValue, change.key, i);
133+
});
106134
}
107135
}
108136
}
109-
}
137+
}
138+
super.ngDoCheck();
110139
}
111140

112141
/**

src/igcontrolbase/igcontentcontrolbase.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { IgControlBase } from "./igcontrolbase";
2-
import { ElementRef, Renderer, KeyValueDiffers } from "@angular/core";
2+
import { ElementRef, Renderer, KeyValueDiffers, IterableDiffers, ChangeDetectorRef } from "@angular/core";
33

44

55
export class IgContentControlBase<Model> extends IgControlBase<Model> {
66
private childNodes: Array<any>;
77

8-
constructor(el: ElementRef, renderer: Renderer, differs: KeyValueDiffers) {
9-
super(el, renderer, differs);
8+
constructor(el: ElementRef, renderer: Renderer, differs: IterableDiffers, kvalDiffers: KeyValueDiffers, cdr: ChangeDetectorRef) {
9+
super(el, renderer, differs, kvalDiffers, cdr);
1010
this.childNodes = el.nativeElement.childNodes;
1111
}
1212

0 commit comments

Comments
 (0)