cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(NgClass): take initial classes into account during cleanup

Browse Source 
Closes #3557
This commit is contained in:
Pawel Kozlowski 2015-08-10 12:25:46 +02:00
parent a7a1851c0f
commit ed25a29cc8
2 changed files with 177 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
modules/angular2/src/directives/ng_class.ts
View File

@ -33,16 +33,24 @@ import {ListWrapper, StringMapWrapper, isListLikeIterable} from 'angular2/src/fa
@Directive({ @Directive({
selector: '[ng-class]', selector: '[ng-class]',
lifecycle: [LifecycleEvent.onCheck, LifecycleEvent.onDestroy], lifecycle: [LifecycleEvent.onCheck, LifecycleEvent.onDestroy],
properties: ['rawClass: ng-class'] properties: ['rawClass: ng-class', 'initialClasses: class']
}) })
export class NgClass { export class NgClass {
private _differ: any; private _differ: any;
private _mode: string; private _mode: string;
_rawClass; private _initialClasses = [];
private _rawClass;
constructor(private _iterableDiffers: IterableDiffers, private _keyValueDiffers: KeyValueDiffers, constructor(private _iterableDiffers: IterableDiffers, private _keyValueDiffers: KeyValueDiffers,
private _ngEl: ElementRef, private _renderer: Renderer) {} private _ngEl: ElementRef, private _renderer: Renderer) {}
set initialClasses(v) {
this._applyInitialClasses(true);
this._initialClasses = isPresent(v) && isString(v) ? v.split(' ') : [];
this._applyInitialClasses(false);
this._applyClasses(this._rawClass, false);
}
set rawClass(v) { set rawClass(v) {
this._cleanupClasses(this._rawClass); this._cleanupClasses(this._rawClass);
@ -59,6 +67,8 @@ export class NgClass {
this._differ = this._keyValueDiffers.find(v).create(null); this._differ = this._keyValueDiffers.find(v).create(null);
this._mode = 'keyValue'; this._mode = 'keyValue';
} }
} else {
this._differ = null;
} }
} }
@ -78,15 +88,8 @@ export class NgClass {
onDestroy(): void { this._cleanupClasses(this._rawClass); } onDestroy(): void { this._cleanupClasses(this._rawClass); }
private _cleanupClasses(rawClassVal): void { private _cleanupClasses(rawClassVal): void {
if (isPresent(rawClassVal)) { this._applyClasses(rawClassVal, true);
if (isListLikeIterable(rawClassVal)) { this._applyInitialClasses(false);
ListWrapper.forEach(rawClassVal, (className) => { this._toggleClass(className, false); });
} else {
StringMapWrapper.forEach(rawClassVal, (expVal, className) => {
if (expVal) this._toggleClass(className, false);
});
}
}
} }
private _applyKeyValueChanges(changes: any): void { private _applyKeyValueChanges(changes: any): void {
@ -104,6 +107,23 @@ export class NgClass {
changes.forEachRemovedItem((record) => { this._toggleClass(record.item, false); }); changes.forEachRemovedItem((record) => { this._toggleClass(record.item, false); });
} }
private _applyInitialClasses(isCleanup: boolean) {
ListWrapper.forEach(this._initialClasses,
(className) => { this._toggleClass(className, !isCleanup); });
}
private _applyClasses(rawClassVal, isCleanup: boolean) {
if (isPresent(rawClassVal)) {
if (isListLikeIterable(rawClassVal)) {
ListWrapper.forEach(rawClassVal, (className) => this._toggleClass(className, !isCleanup));
} else {
StringMapWrapper.forEach(rawClassVal, (expVal, className) => {
if (expVal) this._toggleClass(className, !isCleanup);
});
}
}
}
private _toggleClass(className: string, enabled): void { private _toggleClass(className: string, enabled): void {
this._renderer.setElementClass(this._ngEl, className, enabled); this._renderer.setElementClass(this._ngEl, className, enabled);
} }

190
modules/angular2/test/directives/ng_class_spec.ts
View File

@ -127,6 +127,25 @@ export function main() {
rootTC.componentInstance.objExpr = {baz: true}; rootTC.componentInstance.objExpr = {baz: true};
detectChangesAndCheck(rootTC, 'ng-binding baz'); detectChangesAndCheck(rootTC, 'ng-binding baz');
async.done();
});
}));
it('should remove active classes when expression evaluates to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
detectChangesAndCheck(rootTC, 'ng-binding foo');
rootTC.componentInstance.objExpr = null;
detectChangesAndCheck(rootTC, 'ng-binding');
rootTC.componentInstance.objExpr = {'foo': false, 'bar': true};
detectChangesAndCheck(rootTC, 'ng-binding bar');
async.done(); async.done();
}); });
})); }));
@ -181,6 +200,22 @@ export function main() {
rootTC.componentInstance.arrExpr = ['bar']; rootTC.componentInstance.arrExpr = ['bar'];
detectChangesAndCheck(rootTC, 'ng-binding bar'); detectChangesAndCheck(rootTC, 'ng-binding bar');
async.done();
});
}));
it('should take initial classes into account when a reference changes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="foo" [ng-class]="arrExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
detectChangesAndCheck(rootTC, 'foo ng-binding');
rootTC.componentInstance.arrExpr = ['bar'];
detectChangesAndCheck(rootTC, 'ng-binding foo bar');
async.done(); async.done();
}); });
})); }));
@ -220,7 +255,6 @@ export function main() {
}); });
})); }));
it('should remove active classes when switching from string to null', it('should remove active classes when switching from string to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-class]="strExpr"></div>`; var template = `<div [ng-class]="strExpr"></div>`;
@ -236,65 +270,133 @@ export function main() {
async.done(); async.done();
}); });
})); }));
it('should take initial classes into account when switching from string to null',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div class="foo" [ng-class]="strExpr"></div>`;
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
detectChangesAndCheck(rootTC, 'foo ng-binding');
rootTC.componentInstance.strExpr = null;
detectChangesAndCheck(rootTC, 'ng-binding foo');
async.done();
});
}));
}); });
it('should remove active classes when expression evaluates to null', describe('cooperation with other class-changing constructs', () => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div [ng-class]="objExpr"></div>';
tcb.overrideTemplate(TestComponent, template) it('should co-operate with the class attribute',
.createAsync(TestComponent) inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
.then((rootTC) => { var template = '<div [ng-class]="objExpr" class="init foo"></div>';
detectChangesAndCheck(rootTC, 'ng-binding foo');
rootTC.componentInstance.objExpr = null; tcb.overrideTemplate(TestComponent, template)
detectChangesAndCheck(rootTC, 'ng-binding'); .createAsync(TestComponent)
.then((rootTC) => {
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, 'init foo ng-binding bar');
rootTC.componentInstance.objExpr = {'foo': false, 'bar': true}; StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(rootTC, 'ng-binding bar'); detectChangesAndCheck(rootTC, 'init ng-binding bar');
async.done(); rootTC.componentInstance.objExpr = null;
}); detectChangesAndCheck(rootTC, 'init ng-binding foo');
}));
it('should co-operate with the class attribute', async.done();
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { });
var template = '<div [ng-class]="objExpr" class="init foo"></div>'; }));
tcb.overrideTemplate(TestComponent, template) it('should co-operate with the interpolated class attribute',
.createAsync(TestComponent) inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
.then((rootTC) => { var template = `<div [ng-class]="objExpr" class="{{'init foo'}}"></div>`;
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, 'init foo ng-binding bar');
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false); tcb.overrideTemplate(TestComponent, template)
detectChangesAndCheck(rootTC, 'init ng-binding bar'); .createAsync(TestComponent)
.then((rootTC) => {
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, `{{'init foo'}} ng-binding init foo bar`);
async.done(); StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
}); detectChangesAndCheck(rootTC, `{{'init foo'}} ng-binding init bar`);
}));
it('should co-operate with the class attribute and class.name binding', rootTC.componentInstance.objExpr = null;
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { detectChangesAndCheck(rootTC, `{{'init foo'}} ng-binding init foo`);
var template = '<div class="init foo" [ng-class]="objExpr" [class.baz]="condition"></div>';
tcb.overrideTemplate(TestComponent, template) async.done();
.createAsync(TestComponent) });
.then((rootTC) => { }));
detectChangesAndCheck(rootTC, 'init foo ng-binding baz');
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true); it('should co-operate with the class attribute and binding to it',
detectChangesAndCheck(rootTC, 'init foo ng-binding baz bar'); inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-class]="objExpr" class="init" [class]="'foo'"></div>`;
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false); tcb.overrideTemplate(TestComponent, template)
detectChangesAndCheck(rootTC, 'init ng-binding baz bar'); .createAsync(TestComponent)
.then((rootTC) => {
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, `init ng-binding foo bar`);
rootTC.componentInstance.condition = false; StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(rootTC, 'init ng-binding bar'); detectChangesAndCheck(rootTC, `init ng-binding bar`);
async.done(); rootTC.componentInstance.objExpr = null;
}); detectChangesAndCheck(rootTC, `init ng-binding foo`);
}));
async.done();
});
}));
it('should co-operate with the class attribute and class.name binding',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template =
'<div class="init foo" [ng-class]="objExpr" [class.baz]="condition"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
detectChangesAndCheck(rootTC, 'init foo ng-binding baz');
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, 'init foo ng-binding baz bar');
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'foo', false);
detectChangesAndCheck(rootTC, 'init ng-binding baz bar');
rootTC.componentInstance.condition = false;
detectChangesAndCheck(rootTC, 'init ng-binding bar');
async.done();
});
}));
it('should co-operate with initial class and class attribute binding when binding changes',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = '<div class="init" [ng-class]="objExpr" [class]="strExpr"></div>';
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
detectChangesAndCheck(rootTC, 'init ng-binding foo');
StringMapWrapper.set(rootTC.componentInstance.objExpr, 'bar', true);
detectChangesAndCheck(rootTC, 'init ng-binding foo bar');
rootTC.componentInstance.strExpr = 'baz';
detectChangesAndCheck(rootTC, 'init ng-binding bar baz foo');
rootTC.componentInstance.objExpr = null;
detectChangesAndCheck(rootTC, 'init ng-binding baz');
async.done();
});
}));
});
}) })
} }