feat(module:divider): add divider component (#1029)

* wip(module:divider): add divider component

* Use NzUpdateHostClassService Instead of class operation

* fix doc

* fix string and template invalid switched

* fix tslint

PROGRESS.md

@@ -47,7 +47,7 @@
 | upload | x | x | x | cipchk | - |
 | anchor | x | x | x | cipchk | - |
 | backtop | x | x | x | cipchk | - |
-| divider | x | x | x | cipchk | - |
+| divider | √ | 100% | 100% | cipchk | x |
 | treeselect | x | x | x | simplejason | - |
 | tree | x | x | x | simplejason | - |
 | tags | x | x | x | fbchen | -|

components/divider/demo/horizontal.md

@@ -11,20 +11,4 @@ title:
 
 ## en-US
 
-Divider default type is `horizontal`. Support inner text inside Divider.
-
-````jsx
-import { Divider } from 'antd';
-
-ReactDOM.render(
-  <div>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
-    <Divider />
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
-    <Divider>With Text</Divider>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
-    <Divider dashed />
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
-  </div>
-, mountNode);
-````
+Divider default type is `horizontal`. Support inner text inside Divider.

components/divider/demo/horizontal.ts

@@ -7,11 +7,11 @@ import { Component } from '@angular/core';
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
       <nz-divider></nz-divider>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
-      <nz-divider nzText>
-        With Text
-      </nz-divider>
+      <nz-divider nzText="With Text"></nz-divider>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
-      <nz-divider nzDashed></nz-divider>
+      <nz-divider nzDashed [nzText]="text">
+        <ng-template #text><i class="anticon anticon-plus"></i> Add</ng-template>
+      </nz-divider>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
     </div>
   `

components/divider/demo/vertical.md

@@ -11,18 +11,4 @@ title:
 
 ## en-US
 
-Use `type="vertical"` make it vertical.
-
-````jsx
-import { Divider } from 'antd';
-
-ReactDOM.render(
-  <div>
-    Text
-    <Divider type="vertical" />
-    <a href="#">Link</a>
-    <Divider type="vertical" />
-    <a href="#">Link</a>
-  </div>
-, mountNode);
-````
+Use `type="vertical"` make it vertical.

components/divider/divider.spec.ts

@@ -0,0 +1,84 @@
+import { Component, DebugElement, ViewChild } from '@angular/core';
+import { fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { NzDividerComponent } from './nz-divider.component';
+import { NzDividerModule } from './nz-divider.module';
+
+describe('divider', () => {
+  let fixture: ComponentFixture<TestDividerComponent>;
+  let context: TestDividerComponent;
+  let dl: DebugElement;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ NzDividerModule ],
+      declarations: [ TestDividerComponent, TestDividerTextTemplateComponent ]
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestDividerComponent);
+    context = fixture.componentInstance;
+    dl = fixture.debugElement;
+    fixture.detectChanges();
+  });
+
+  describe('#nzDashed', () => {
+    for (const value of [ true, false ]) {
+      it(`[${value}]`, () => {
+        context.nzDashed = value;
+        fixture.detectChanges();
+        expect(dl.query(By.css('.ant-divider-dashed')) != null).toBe(value);
+      });
+    }
+  });
+
+  describe('#nzType', () => {
+    for (const value of [ 'horizontal', 'vertical' ]) {
+      it(`[${value}]`, () => {
+        context.nzType = value;
+        fixture.detectChanges();
+        expect(dl.query(By.css(`.ant-divider-${value}`)) != null).toBe(true);
+      });
+    }
+  });
+
+  describe('#nzText', () => {
+    for (const item of [ { text: 'with text', ret: true }, { text: undefined, ret: false } ]) {
+      it(`[${item.text}]`, () => {
+        context.nzText = item.text;
+        fixture.detectChanges();
+        expect(dl.query(By.css('.ant-divider-inner-text')) != null).toBe(item.ret);
+      });
+    }
+
+    it('should be custom template', () => {
+      let fixtureTemplate: ComponentFixture<TestDividerTextTemplateComponent>;
+      fixtureTemplate = TestBed.createComponent(TestDividerTextTemplateComponent);
+      fixtureTemplate.detectChanges();
+      expect(fixtureTemplate.debugElement.query(By.css('.anticon-plus')) != null).toBe(true);
+    });
+  });
+});
+
+@Component({
+  template: `
+  <nz-divider #comp
+    [nzDashed]="nzDashed"
+    [nzType]="nzType"
+    [nzText]="nzText"></nz-divider>
+  `
+})
+class TestDividerComponent {
+  @ViewChild('comp') comp: NzDividerComponent;
+  nzDashed = false;
+  nzType = 'horizontal';
+  nzText = 'with text';
+}
+
+@Component({
+  template: `
+  <nz-divider nzDashed [nzText]="text">
+    <ng-template #text><i class="anticon anticon-plus"></i> Add</ng-template>
+  </nz-divider>
+  `
+})
+class TestDividerTextTemplateComponent {
+}

components/divider/doc/index.en-US.md

@@ -18,5 +18,6 @@ A divider line separates different content.
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| dashed | whether line is dasded | Boolean | false |
-| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` |
+| nzDashed | whether line is dasded | Boolean | false |
+| nzType | direction type of divider | enum: `horizontal` `vertical` | `horizontal` |
+| nzText | inner text of divider | `string丨TemplateRef<void>` | - |

components/divider/doc/index.zh-CN.md

@@ -3,6 +3,7 @@ category: Components
 type: Other
 title: Divider
 subtitle: 分割线
+cols: 1
 ---
 
 区隔内容的分割线。
@@ -16,5 +17,6 @@ subtitle: 分割线
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| dashed | 是否虚线 | Boolean | false |
-| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` |
+| nzDashed | 是否虚线 | Boolean | false |
+| nzType | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` |
+| nzText | 中间文字 | `string丨TemplateRef<void>` | - |

components/divider/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

components/divider/nz-divider.component.ts

@@ -1,51 +1,66 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
 
+import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 import { toBoolean } from '../core/util/convert';
 
 @Component({
-  selector           : 'nz-divider',
-  preserveWhitespaces: false,
-  template           : `
-    <span class="ant-divider-inner-text">
-      <ng-content></ng-content>
+  selector: 'nz-divider',
+  template: `
+    <span *ngIf="isText" class="ant-divider-inner-text">
+      <ng-container *ngIf="textStr; else textTpl">{{ textStr }}</ng-container>
     </span>
-  `,
-  host               : {
-    '[class.ant-divider]': 'true'
-  }
+    `,
+  providers: [NzUpdateHostClassService],
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NzDividerComponent {
-  _dashed = false;
-  _text = false;
+export class NzDividerComponent implements OnChanges, OnInit {
+  // region fields
+
+  isText = false;
+  textStr = '';
+  textTpl: TemplateRef<void>;
+  @Input()
+  set nzText(value: string | TemplateRef<void>) {
+    if (value instanceof TemplateRef) {
+      this.textStr = null;
+      this.textTpl = value;
+    } else {
+      this.textStr = value;
+    }
+    this.isText = !!value;
+  }
+
   @Input() nzType: 'horizontal' | 'vertical' = 'horizontal';
 
+  private _dashed = false;
   @Input()
-  @HostBinding('class.ant-divider-dashed')
   set nzDashed(value: boolean) {
     this._dashed = toBoolean(value);
   }
-
   get nzDashed(): boolean {
     return this._dashed;
   }
 
-  @Input()
-  @HostBinding('class.ant-divider-with-text')
-  set nzText(value: boolean) {
-    this._text = toBoolean(value);
+  // endregion
+  private setClass(): void {
+    const classMap = {
+      ['ant-divider']: true,
+      [`ant-divider-${this.nzType}`]: true,
+      [`ant-divider-with-text`]: this.isText,
+      [`ant-divider-dashed`]: this.nzDashed
+    };
+    this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap);
+    this.cd.detectChanges();
   }
 
-  get nzText(): boolean {
-    return this._text;
-  }
+  constructor(private el: ElementRef, private cd: ChangeDetectorRef, private updateHostClassService: NzUpdateHostClassService) {}
 
-  @HostBinding('class.ant-divider-horizontal')
-  get isHorizontal(): boolean {
-    return this.nzType === 'horizontal';
+  ngOnChanges(changes: SimpleChanges): void {
+    this.setClass();
   }
 
-  @HostBinding('class.ant-divider-vertical')
-  get isVertical(): boolean {
-    return this.nzType === 'vertical';
+  ngOnInit(): void {
+    this.setClass();
   }
 }

components/divider/public-api.ts

@@ -0,0 +1,2 @@
+export * from './nz-divider.component';
+export * from './nz-divider.module';

components/divider/style/index.less

@@ -62,4 +62,4 @@
       border-style: dashed none none;
     }
   }
-}
+}

components/index.ts

@@ -43,6 +43,16 @@ import { NzTimelineModule } from './timeline';
 import { NzToolTipModule } from './tooltip/nz-tooltip.module';
 import { NzTransferModule } from './transfer/nz-transfer.module';
 
+export * from './button';
+export * from './divider';
+export * from './grid';
+export * from './layout';
+export * from './dropdown';
+export * from './menu';
+export * from './i18n';
+export * from './locale/index';
+export * from './list/index';
+
 import { NzMessageService } from './message/nz-message.service';
 import { NzNotificationService } from './notification/nz-notification.service';