refactor(module:checkbox): support checkbox onPush (#2478)

* docs: update NG-ZORRO logo (#2425) * fix(module:collapse): can't fold up active panel with accordion (#2440) close #2437 * chore: update styles(ant-design 3.10.7) (#2432) * refactor(module:checkbox): support checkbox onPush
NG-ZORRO · Nov 19, 2018 · 84095d8 · liujiusheng · Dec 7, 2018 · 84095d8
1 parent 3b8f9ea
commit 84095d8
Show file tree

Hide file tree

Showing 38 changed files with 263 additions and 148 deletions.
diff --git a/components/alert/nz-alert.component.ts b/components/alert/nz-alert.component.ts
@@ -5,7 +5,8 @@ import {
   Input,
   OnInit,
   Output,
-  TemplateRef
+  TemplateRef,
+  ViewEncapsulation
 } from '@angular/core';
 import { fadeAnimation } from '../core/animation/fade-animations';
 import { NgClassType } from '../core/types/ng-class';
@@ -16,9 +17,10 @@ import { toBoolean } from '../core/util/convert';
   animations         : [ fadeAnimation ],
   templateUrl        : './nz-alert.component.html',
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   preserveWhitespaces: false,
   styles             : [
-    `:host {
+      `nz-alert {
       display: block;
     }`
   ]

diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less
@@ -49,6 +49,12 @@
     line-height: @size;
   }
 
+  &-string {
+    position: absolute;
+    left: 50%;
+    transform-origin: 0 center;
+  }
+
   &.@{avatar-prefix-cls}-icon {
     font-size: @font-size;
   }

diff --git a/components/badge/nz-badge.component.ts b/components/badge/nz-badge.component.ts
@@ -7,7 +7,8 @@ import {
   Input,
   OnInit,
   Renderer2,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 
 import { AnimationCurves } from '../core/animation/animation';
@@ -22,6 +23,7 @@ export type NzBadgeStatusType = 'success' | 'processing' | 'default' | 'error' |
 @Component({
   selector           : 'nz-badge',
   preserveWhitespaces: false,
+  encapsulation      : ViewEncapsulation.None,
   changeDetection    : ChangeDetectionStrategy.OnPush,
   animations         : [
     trigger('zoomAnimation', [

diff --git a/components/button/nz-button-group.component.ts b/components/button/nz-button-group.component.ts
@@ -1,10 +1,11 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 import { NzSizeLDSType } from '../core/types/size';
 
 @Component({
   selector           : 'nz-button-group',
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   preserveWhitespaces: false,
   providers          : [ NzUpdateHostClassService ],
   templateUrl        : './nz-button-group.component.html'

diff --git a/components/button/nz-button.component.ts b/components/button/nz-button.component.ts
@@ -12,7 +12,8 @@ import {
   OnInit,
   QueryList,
   Renderer2,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
@@ -31,6 +32,7 @@ export type NzButtonShape = 'circle' | null ;
   providers          : [ NzUpdateHostClassService ],
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-button.component.html'
 })
 export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy {

diff --git a/components/button/style/index.less b/components/button/style/index.less
@@ -12,7 +12,10 @@
 // Button styles
 // -----------------------------
 .@{btn-prefix-cls} {
-  line-height: @line-height-base;
+  // Fixing https://github.com/ant-design/ant-design/issues/12978
+  // It is a render problem of chrome, which is only happened in the codesandbox demo
+  // 0.001px solution works and I don't why
+  line-height: @line-height-base - 0.001;
   .btn;
   .btn-default;
 
@@ -21,6 +24,7 @@
   > i,
   > span {
     pointer-events: none;
+    display: inline-block;
   }
 
   &-primary {
@@ -149,7 +153,7 @@
     letter-spacing: .34em;
   }
 
-  &-two-chinese-chars > * {
+  &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
     letter-spacing: .34em;
     margin-right: -.34em;
   }
@@ -177,6 +181,11 @@
   .christmas&-primary&-sm:before {
     background-size: 56px;
   }
+
+  // https://github.com/ant-design/ant-design/issues/12681
+  &:empty {
+    vertical-align: top;
+  }
 }
 
 a.@{btn-prefix-cls} {

diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
@@ -25,7 +25,7 @@
 .button-variant-primary(@color; @background) {
   .button-color(@color; @background; @background);
   text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
-  box-shadow: 0 2px 0 rgba(0, 0, 0, .035);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, .045);
 
   &:hover,
   &:focus {
@@ -118,7 +118,6 @@
   > .@{btnClassName},
   > span > .@{btnClassName} {
     position: relative;
-    line-height: @btn-height-base - 2px;
 
     &:hover,
     &:focus,
@@ -182,7 +181,6 @@
 
   &:not([disabled]):active {
     outline: 0;
-    transition: none;
     box-shadow: none;
   }
 

diff --git a/components/card/nz-card-loading.component.ts b/components/card/nz-card-loading.component.ts
@@ -1,15 +1,16 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector           : 'nz-card-loading',
   templateUrl        : './nz-card-loading.component.html',
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   host               : {
     '[class.ant-card-loading-content]': 'true'
   },
   styles             : [ `
-    :host {
+    nz-card-loading {
       display: block;
     }
   ` ]

diff --git a/components/card/nz-card-meta.component.ts b/components/card/nz-card-meta.component.ts
@@ -1,12 +1,13 @@
-import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector           : 'nz-card-meta',
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-card-meta.component.html',
   styles             : [ `
-    :host {
+    nz-card-meta {
       display: block;
     }
   ` ],

diff --git a/components/card/nz-card-tab.component.ts b/components/card/nz-card-tab.component.ts
@@ -1,8 +1,10 @@
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
 
 @Component({
-  selector   : 'nz-card-tab',
-  templateUrl: './nz-card-tab.component.html'
+  selector       : 'nz-card-tab',
+  encapsulation  : ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl    : './nz-card-tab.component.html'
 })
 export class NzCardTabComponent {
   @ViewChild(TemplateRef) template: TemplateRef<void>;

diff --git a/components/card/nz-card.component.ts b/components/card/nz-card.component.ts
@@ -1,14 +1,23 @@
-import { ChangeDetectionStrategy, Component, ContentChild, HostBinding, Input, TemplateRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  HostBinding,
+  Input,
+  TemplateRef,
+  ViewEncapsulation
+} from '@angular/core';
 import { InputBoolean } from '../core/util/convert';
 import { NzCardTabComponent } from './nz-card-tab.component';
 
 @Component({
   selector           : 'nz-card',
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-card.component.html',
   styles             : [ `
-    :host {
+    nz-card {
       display: block;
     }
   ` ],

diff --git a/components/card/style/index.less b/components/card/style/index.less
@@ -39,16 +39,16 @@
 
     &-wrapper {
       display: flex;
+      align-items: center;
     }
 
     &-title {
       padding: @card-head-padding 0;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
-      display: flex;
-      align-items: center;
       flex: 1;
+      display: inline-block;
     }
 
     .@{ant-prefix}-tabs {

diff --git a/components/checkbox/doc/index.zh-CN.md b/components/checkbox/doc/index.zh-CN.md
@@ -44,6 +44,8 @@ title: Checkbox
 
 ### [nz-checkbox]
 
+通过ViewChild或其他方式获得 `nz-checkbox` 实例
+
 | 名称 | 描述 |
 | ---- | ----------- |
 | focus() | 获取焦点 |

diff --git a/components/checkbox/nz-checkbox-group.component.html b/components/checkbox/nz-checkbox-group.component.html
@@ -1,7 +1,6 @@
-<label
-  nz-checkbox
+<label nz-checkbox
   *ngFor="let option of options"
-  [nzDisabled]="option.disabled||nzDisabled"
+  [nzDisabled]="option.disabled || nzDisabled"
   [(nzChecked)]="option.checked"
   (nzCheckedChange)="onOptionChange()">
   <span>{{ option.label }}</span>

diff --git a/components/checkbox/nz-checkbox-group.component.ts b/components/checkbox/nz-checkbox-group.component.ts
@@ -1,10 +1,8 @@
 import {
   forwardRef,
   Component,
-  ElementRef,
   Input,
-  OnInit,
-  Renderer2
+  ViewEncapsulation
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -20,21 +18,25 @@ export interface NzCheckBoxOptionInterface {
 @Component({
   selector           : 'nz-checkbox-group',
   preserveWhitespaces: false,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-checkbox-group.component.html',
   providers          : [
     {
       provide    : NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => NzCheckboxGroupComponent),
       multi      : true
     }
-  ]
+  ],
+  host               : {
+    '[class.ant-checkbox-group]': 'true'
+  }
 })
-export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit {
+export class NzCheckboxGroupComponent implements ControlValueAccessor {
   private _disabled = false;
-  private el: HTMLElement = this.elementRef.nativeElement;
-  private prefixCls = 'ant-checkbox-group';
-  private onChange = Function.prototype;
-  private onTouched = Function.prototype;
+  // tslint:disable-next-line:no-any
+  private onChange: (value: any) => void = () => {};
+  // tslint:disable-next-line:no-any
+  private onTouched: () => any = () => {};
   options: NzCheckBoxOptionInterface[];
 
   @Input()
@@ -66,10 +68,6 @@ export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit {
     this.nzDisabled = isDisabled;
   }
 
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
-  }
-
-  ngOnInit(): void {
-    this.renderer.addClass(this.el, `${this.prefixCls}`);
+  constructor() {
   }
 }
diff --git a/components/checkbox/nz-checkbox-wrapper.component.ts b/components/checkbox/nz-checkbox-wrapper.component.ts
@@ -1,10 +1,12 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
 
 import { NzCheckboxComponent } from './nz-checkbox.component';
 
 @Component({
   selector           : 'nz-checkbox-wrapper',
   preserveWhitespaces: false,
+  changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-checkbox-wrapper.component.html',
   host               : {
     '[class.ant-checkbox-group]': 'true'

diff --git a/components/checkbox/nz-checkbox.component.html b/components/checkbox/nz-checkbox.component.html
@@ -1,10 +1,8 @@
 <span [ngClass]="classMap">
-      <input
-        #inputElement
-        [checked]="nzChecked"
-        type="checkbox"
-        class="ant-checkbox-input"
-        (blur)="onBlur()">
-      <span class="ant-checkbox-inner"></span>
-    </span>
+  <input #inputElement
+    [checked]="nzChecked"
+    type="checkbox"
+    class="ant-checkbox-input">
+  <span class="ant-checkbox-inner"></span>
+</span>
 <span #contentElement (cdkObserveContent)="checkContent()"><ng-content></ng-content></span>