refactor(module:divider): refactor divider (#4780)

NG-ZORRO · Feb 13, 2020 · 51eb8bd · 51eb8bd
1 parent 7f1a76c
commit 51eb8bd
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 58 deletions.
diff --git a/components/divider/demo/orientation.md b/components/divider/demo/orientation.md
@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 1
 title:
   zh-CN: 标题位置
   en-US: Orientation of title
@@ -11,4 +11,4 @@ title:
 
 ## en-US
 
-Set orientation of divider to left or right.
+Set orientation of divider to left or right.
diff --git a/components/divider/demo/vertical.md b/components/divider/demo/vertical.md
@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 2
 title:
   zh-CN: 垂直分割线
   en-US: Vertical
@@ -11,4 +11,4 @@ title:
 
 ## en-US
 
-Use `nzType="vertical"` make it vertical.
+Use `nzType="vertical"` make it vertical.
diff --git a/components/divider/divider.component.ts b/components/divider/divider.component.ts
@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+
+import { InputBoolean } from 'ng-zorro-antd/core';
+
+@Component({
+  selector: 'nz-divider',
+  exportAs: 'nzDivider',
+  preserveWhitespaces: false,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <span *ngIf="nzText" class="ant-divider-inner-text">
+      <ng-container *nzStringTemplateOutlet="nzText">{{ nzText }}</ng-container>
+    </span>
+  `,
+  host: {
+    '[class.ant-divider]': 'true',
+    '[class.ant-divider-horizontal]': `nzType === 'horizontal'`,
+    '[class.ant-divider-vertical]': `nzType === 'vertical'`,
+    '[class.ant-divider-with-text-left]': `nzText && nzOrientation === 'left'`,
+    '[class.ant-divider-with-text-right]': `nzText && nzOrientation === 'right'`,
+    '[class.ant-divider-with-text-center]': `nzText && nzOrientation === 'center'`,
+    '[class.ant-divider-dashed]': `nzDashed`
+  }
+})
+export class NzDividerComponent {
+  @Input() nzText: string | TemplateRef<void>;
+  @Input() nzType: 'horizontal' | 'vertical' = 'horizontal';
+  @Input() nzOrientation: 'left' | 'right' | 'center' = 'center';
+  @Input() @InputBoolean() nzDashed = false;
+}
diff --git a/components/divider/nz-divider.module.ts → components/divider/divider.module.ts b/components/divider/nz-divider.module.ts → components/divider/divider.module.ts
@@ -9,7 +9,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { NzOutletModule } from 'ng-zorro-antd/core';
-import { NzDividerComponent } from './nz-divider.component';
+import { NzDividerComponent } from './divider.component';
 
 @NgModule({
   imports: [CommonModule, NzOutletModule],

diff --git a/components/divider/divider.spec.ts b/components/divider/divider.spec.ts
@@ -4,8 +4,8 @@ import { By } from '@angular/platform-browser';
 
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
-import { NzDividerComponent } from './nz-divider.component';
-import { NzDividerModule } from './nz-divider.module';
+import { NzDividerComponent } from './divider.component';
+import { NzDividerModule } from './divider.module';
 
 describe('divider', () => {
   let fixture: ComponentFixture<TestDividerComponent>;

diff --git a/components/divider/nz-divider.component.html b/components/divider/nz-divider.component.html
diff --git a/components/divider/nz-divider.component.ts b/components/divider/nz-divider.component.ts
diff --git a/components/divider/public-api.ts b/components/divider/public-api.ts
@@ -6,5 +6,5 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './nz-divider.component';
-export * from './nz-divider.module';
+export * from './divider.component';
+export * from './divider.module';