perf(classMap): improve classMap performance (#528)

* perf(polyfill): polyfill all request animation * perf(classMap): improve classMap performance
NG-ZORRO · Nov 4, 2017 · e5b5cc9 · e5b5cc9
1 parent 8c5a41a
commit e5b5cc9
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 34 deletions.
diff --git a/src/components/alert/nz-alert.component.ts b/src/components/alert/nz-alert.component.ts
@@ -1,12 +1,9 @@
-/**
- * @author MoXun
- */
 import {
   Component,
   ViewEncapsulation,
   Input,
   Output,
-  EventEmitter
+  EventEmitter, OnChanges, OnInit
 } from '@angular/core';
 import { FadeAnimation } from '../core/animation/fade-animations';
 
@@ -56,8 +53,9 @@ import { FadeAnimation } from '../core/animation/fade-animations';
   ]
 })
 
-export class NzAlertComponent {
+export class NzAlertComponent implements OnChanges {
   _display = true;
+  antAlert = 'ant-alert';
   @Input() nzType = 'info';
   @Input() nzBanner = false;
   @Input() nzCloseable = false;
@@ -66,23 +64,29 @@ export class NzAlertComponent {
   @Input() nzCloseText: string;
   @Input() nzMessage: string;
   @Output() nzOnClose: EventEmitter<boolean> = new EventEmitter();
-
-  get _classMap() {
-    const antAlert = 'ant-alert';
-    return {
-      [`${antAlert}`]                 : true,
-      [`${antAlert}-${this.nzType}`]  : true,
-      [`${antAlert}-no-icon`]         : !this.nzShowIcon,
-      [`${antAlert}-banner`]          : this.nzBanner,
-      [`${antAlert}-with-description`]: !!this.nzDescription
-    };
-  }
+  _classMap = {
+    [`${this.antAlert}`]                 : true,
+    [`${this.antAlert}-${this.nzType}`]  : true,
+    [`${this.antAlert}-no-icon`]         : !this.nzShowIcon,
+    [`${this.antAlert}-banner`]          : this.nzBanner,
+    [`${this.antAlert}-with-description`]: !!this.nzDescription
+  };
 
   closeAlert(): void {
     this._display = false;
     this.nzOnClose.emit(true);
   }
 
+  ngOnChanges() {
+    this._classMap = {
+      [`${this.antAlert}`]                 : true,
+      [`${this.antAlert}-${this.nzType}`]  : true,
+      [`${this.antAlert}-no-icon`]         : !this.nzShowIcon,
+      [`${this.antAlert}-banner`]          : this.nzBanner,
+      [`${this.antAlert}-with-description`]: !!this.nzDescription
+    };
+  }
+
   constructor() {
   }
 

diff --git a/src/components/button/nz-button-group.component.ts b/src/components/button/nz-button-group.component.ts
@@ -16,6 +16,10 @@ export class NzButtonGroupComponent implements AfterContentInit {
   _size: NzButtonGroupSize;
   _prefixCls = 'ant-btn-group';
   _sizeMap = { large: 'lg', small: 'sm' };
+  _classMap = {
+    [this._prefixCls]                                     : true,
+    [`${this._prefixCls}-${this._sizeMap[ this.nzSize ]}`]: this._sizeMap[ this.nzSize ]
+  };
   @ViewChild('groupWrapper') _groupWrapper: ElementRef;
 
   @Input()
@@ -25,14 +29,12 @@ export class NzButtonGroupComponent implements AfterContentInit {
 
   set nzSize(value: NzButtonGroupSize) {
     this._size = value;
-  }
-
-  get _classMap() {
-    return {
+    this._classMap = {
       [this._prefixCls]                                     : true,
       [`${this._prefixCls}-${this._sizeMap[ this.nzSize ]}`]: this._sizeMap[ this.nzSize ]
-    }
-  };
+    };
+  }
+
 
   constructor() {
   }

diff --git a/src/components/checkbox/nz-checkbox.component.ts b/src/components/checkbox/nz-checkbox.component.ts
@@ -6,7 +6,7 @@ import {
   ElementRef,
   Renderer2,
   HostListener,
-  forwardRef
+  forwardRef, OnChanges
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -35,7 +35,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
     './style/index.less'
   ]
 })
-export class NzCheckboxComponent implements OnInit, ControlValueAccessor {
+export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnChanges {
   _el: HTMLElement;
   _prefixCls = 'ant-checkbox';
   _innerPrefixCls = `${this._prefixCls}-inner`;
@@ -47,6 +47,13 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor {
   onTouched: any = Function.prototype;
   @Input() nzDisabled = false;
   @Input() nzIndeterminate = false;
+  _classMap = {
+    [this._prefixCls]                   : true,
+    [`${this._prefixCls}-checked`]      : this._checked && (!this.nzIndeterminate),
+    [`${this._prefixCls}-focused`]      : this._focused,
+    [`${this._prefixCls}-disabled`]     : this.nzDisabled,
+    [`${this._prefixCls}-indeterminate`]: this.nzIndeterminate,
+  };
 
   @Input()
   get nzChecked(): boolean {
@@ -67,6 +74,7 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor {
     }
     this.onChange(value);
     this._checked = value;
+    this.updateClassMap();
   }
 
   nzFocus() {
@@ -77,22 +85,13 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor {
     this._focused = false;
   }
 
-  get _classMap() {
-    return {
-      [this._prefixCls]                   : true,
-      [`${this._prefixCls}-checked`]      : this._checked && (!this.nzIndeterminate),
-      [`${this._prefixCls}-focused`]      : this._focused,
-      [`${this._prefixCls}-disabled`]     : this.nzDisabled,
-      [`${this._prefixCls}-indeterminate`]: this.nzIndeterminate,
-    }
-  }
-
   constructor(private _elementRef: ElementRef, private _render: Renderer2) {
     this._el = this._elementRef.nativeElement;
   }
 
   writeValue(value: any): void {
     this._checked = value;
+    this.updateClassMap();
   }
 
   registerOnChange(fn: (_: any) => {}): void {
@@ -107,7 +106,22 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor {
     this.nzDisabled = isDisabled;
   }
 
+  updateClassMap() {
+    this._classMap = {
+      [this._prefixCls]                   : true,
+      [`${this._prefixCls}-checked`]      : this._checked && (!this.nzIndeterminate),
+      [`${this._prefixCls}-focused`]      : this._focused,
+      [`${this._prefixCls}-disabled`]     : this.nzDisabled,
+      [`${this._prefixCls}-indeterminate`]: this.nzIndeterminate,
+    }
+  }
+
   ngOnInit() {
     this._render.addClass(this._el, `${this._prefixCls}-wrapper`);
+    this.updateClassMap();
+  }
+
+  ngOnChanges() {
+    this.updateClassMap();
   }
 }