refactor(common): simplify NgClass code, add comments (#21937)
PR Close #21937
This commit is contained in:
parent
4a426696c9
commit
aaefd51a88
|
@ -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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue