refactor(common): simplify NgClass code, add comments (#21937)

PR Close #21937
This commit is contained in:
Pawel Kozlowski 2018-02-27 15:55:01 +01:00 committed by Alex Rickabaugh
parent 4a426696c9
commit aaefd51a88
1 changed files with 30 additions and 19 deletions

View File

@ -49,15 +49,16 @@ export class NgClass implements DoCheck {
@Input('class') @Input('class')
set klass(v: string) { set klass(v: string) {
this._applyInitialClasses(true); this._removeClasses(this._initialClasses);
this._initialClasses = typeof v === 'string' ? v.split(/\s+/) : []; this._initialClasses = typeof v === 'string' ? v.split(/\s+/) : [];
this._applyInitialClasses(false); this._applyClasses(this._initialClasses);
this._applyClasses(this._rawClass, false); this._applyClasses(this._rawClass);
} }
@Input() @Input()
set ngClass(v: string|string[]|Set<string>|{[klass: string]: any}) { set ngClass(v: string|string[]|Set<string>|{[klass: string]: any}) {
this._cleanupClasses(this._rawClass); this._removeClasses(this._rawClass);
this._applyClasses(this._initialClasses);
this._iterableDiffer = null; this._iterableDiffer = null;
this._keyValueDiffer = null; this._keyValueDiffer = null;
@ -87,11 +88,6 @@ export class NgClass implements DoCheck {
} }
} }
private _cleanupClasses(rawClassVal: string[]|{[klass: string]: any}): void {
this._applyClasses(rawClassVal, true);
this._applyInitialClasses(false);
}
private _applyKeyValueChanges(changes: KeyValueChanges<string, any>): void { private _applyKeyValueChanges(changes: KeyValueChanges<string, any>): void {
changes.forEachAddedItem((record) => this._toggleClass(record.key, record.currentValue)); changes.forEachAddedItem((record) => this._toggleClass(record.key, record.currentValue));
changes.forEachChangedItem((record) => this._toggleClass(record.key, record.currentValue)); changes.forEachChangedItem((record) => this._toggleClass(record.key, record.currentValue));
@ -115,19 +111,34 @@ export class NgClass implements DoCheck {
changes.forEachRemovedItem((record) => this._toggleClass(record.item, false)); changes.forEachRemovedItem((record) => this._toggleClass(record.item, false));
} }
private _applyInitialClasses(isCleanup: boolean) { /**
this._initialClasses.forEach(klass => this._toggleClass(klass, !isCleanup)); * Applies a collection of CSS classes to the DOM element.
} *
* For argument of type Set and Array CSS class names contained in those collections are always
private _applyClasses( * added.
rawClassVal: string[]|Set<string>|{[klass: string]: any}, isCleanup: boolean) { * For argument of type Map CSS class name in the map's key is toggled based on the value (added
* for truthy and removed for falsy).
*/
private _applyClasses(rawClassVal: string[]|Set<string>|{[klass: string]: any}) {
if (rawClassVal) { if (rawClassVal) {
if (Array.isArray(rawClassVal) || rawClassVal instanceof Set) { if (Array.isArray(rawClassVal) || rawClassVal instanceof Set) {
(<any>rawClassVal).forEach((klass: string) => this._toggleClass(klass, !isCleanup)); (<any>rawClassVal).forEach((klass: string) => this._toggleClass(klass, true));
} else { } else {
Object.keys(rawClassVal).forEach(klass => { Object.keys(rawClassVal).forEach(klass => this._toggleClass(klass, !!rawClassVal[klass]));
this._toggleClass(klass, isCleanup ? false : !!rawClassVal[klass]); }
}); }
}
/**
* Removes a collection of CSS classes from the DOM element. This is mostly useful for cleanup
* purposes.
*/
private _removeClasses(rawClassVal: string[]|Set<string>|{[klass: string]: any}) {
if (rawClassVal) {
if (Array.isArray(rawClassVal) || rawClassVal instanceof Set) {
(<any>rawClassVal).forEach((klass: string) => this._toggleClass(klass, false));
} else {
Object.keys(rawClassVal).forEach(klass => this._toggleClass(klass, false));
} }
} }
} }