feat(module:collapse): support nzExpandIconPosition (#4781)

NG-ZORRO · Feb 13, 2020 · 760512a · 760512a
1 parent 4544e16
commit 760512a
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 69 deletions.
diff --git a/...s/collapse/nz-collapse-panel.component.ts → ...ents/collapse/collapse-panel.component.ts b/...s/collapse/nz-collapse-panel.component.ts → ...ents/collapse/collapse-panel.component.ts
@@ -10,39 +10,51 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ElementRef,
   EventEmitter,
   Host,
   Input,
   OnDestroy,
   OnInit,
   Output,
-  Renderer2,
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
 
 import { collapseMotion, InputBoolean, NzConfigService, WithConfig } from 'ng-zorro-antd/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
-import { NzCollapseComponent } from './nz-collapse.component';
+import { NzCollapseComponent } from './collapse.component';
 
 const NZ_CONFIG_COMPONENT_NAME = 'collapsePanel';
 
 @Component({
   selector: 'nz-collapse-panel',
   exportAs: 'nzCollapsePanel',
-  templateUrl: './nz-collapse-panel.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   animations: [collapseMotion],
-  styles: [
-    `
-      nz-collapse-panel {
-        display: block;
-      }
-    `
-  ],
+  template: `
+    <div role="tab" [attr.aria-expanded]="nzActive" class="ant-collapse-header" (click)="clickHeader()">
+      <ng-container *ngIf="nzShowArrow">
+        <ng-container *nzStringTemplateOutlet="nzExpandedIcon">
+          <i nz-icon [nzType]="nzExpandedIcon || 'right'" class="ant-collapse-arrow" [nzRotate]="nzActive ? 90 : 0"></i>
+        </ng-container>
+      </ng-container>
+      <ng-container *nzStringTemplateOutlet="nzHeader">{{ nzHeader }}</ng-container>
+      <div class="ant-collapse-extra" *ngIf="nzExtra">
+        <ng-container *nzStringTemplateOutlet="nzExtra">{{ nzExtra }}</ng-container>
+      </div>
+    </div>
+    <div class="ant-collapse-content" [class.ant-collapse-content-active]="nzActive" [@collapseMotion]="nzActive ? 'expanded' : 'hidden'">
+      <div class="ant-collapse-content-box">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+
   host: {
+    '[class.ant-collapse-item]': 'true',
     '[class.ant-collapse-no-arrow]': '!nzShowArrow',
     '[class.ant-collapse-item-active]': 'nzActive',
     '[class.ant-collapse-item-disabled]': 'nzDisabled'
@@ -56,7 +68,7 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
   @Input() nzHeader: string | TemplateRef<void>;
   @Input() nzExpandedIcon: string | TemplateRef<void>;
   @Output() readonly nzActiveChange = new EventEmitter<boolean>();
-
+  private destroy$ = new Subject();
   clickHeader(): void {
     if (!this.nzDisabled) {
       this.nzCollapseComponent.click(this);
@@ -70,18 +82,23 @@ export class NzCollapsePanelComponent implements OnInit, OnDestroy {
   constructor(
     public nzConfigService: NzConfigService,
     private cdr: ChangeDetectorRef,
-    @Host() private nzCollapseComponent: NzCollapseComponent,
-    elementRef: ElementRef,
-    renderer: Renderer2
+    @Host() private nzCollapseComponent: NzCollapseComponent
   ) {
-    renderer.addClass(elementRef.nativeElement, 'ant-collapse-item');
+    this.nzConfigService
+      .getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.cdr.markForCheck();
+      });
   }
 
   ngOnInit(): void {
     this.nzCollapseComponent.addPanel(this);
   }
 
   ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
     this.nzCollapseComponent.removePanel(this);
   }
 }
diff --git a/components/collapse/nz-collapse.component.ts → components/collapse/collapse.component.ts b/components/collapse/nz-collapse.component.ts → components/collapse/collapse.component.ts
@@ -6,34 +6,45 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
 
 import { InputBoolean, NzConfigService, WithConfig } from 'ng-zorro-antd/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
-import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
+import { NzCollapsePanelComponent } from './collapse-panel.component';
 
 const NZ_CONFIG_COMPONENT_NAME = 'collapse';
 
 @Component({
   selector: 'nz-collapse',
   exportAs: 'nzCollapse',
-  templateUrl: './nz-collapse.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  styles: [
-    `
-      nz-collapse {
-        display: block;
-      }
-    `
-  ]
+  template: `
+    <ng-content></ng-content>
+  `,
+  host: {
+    '[class.ant-collapse]': 'true',
+    '[class.ant-collapse-icon-position-left]': `nzExpandIconPosition === 'left'`,
+    '[class.ant-collapse-icon-position-right]': `nzExpandIconPosition === 'right'`,
+    '[class.ant-collapse-borderless]': '!nzBordered'
+  }
 })
-export class NzCollapseComponent {
-  private listOfNzCollapsePanelComponent: NzCollapsePanelComponent[] = [];
+export class NzCollapseComponent implements OnDestroy {
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) @InputBoolean() nzAccordion: boolean;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) @InputBoolean() nzBordered: boolean;
-
-  constructor(public nzConfigService: NzConfigService) {}
+  @Input() nzExpandIconPosition: 'left' | 'right' = 'left';
+  private listOfNzCollapsePanelComponent: NzCollapsePanelComponent[] = [];
+  private destroy$ = new Subject();
+  constructor(public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef) {
+    this.nzConfigService
+      .getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.cdr.markForCheck();
+      });
+  }
 
   addPanel(value: NzCollapsePanelComponent): void {
     this.listOfNzCollapsePanelComponent.push(value);
@@ -58,4 +69,8 @@ export class NzCollapseComponent {
     collapse.nzActive = !collapse.nzActive;
     collapse.nzActiveChange.emit(collapse.nzActive);
   }
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }
diff --git a/components/collapse/nz-collapse.module.ts → components/collapse/collapse.module.ts b/components/collapse/nz-collapse.module.ts → components/collapse/collapse.module.ts
@@ -11,8 +11,8 @@ import { NgModule } from '@angular/core';
 import { NzOutletModule } from 'ng-zorro-antd/core';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
-import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
-import { NzCollapseComponent } from './nz-collapse.component';
+import { NzCollapsePanelComponent } from './collapse-panel.component';
+import { NzCollapseComponent } from './collapse.component';
 
 @NgModule({
   declarations: [NzCollapsePanelComponent, NzCollapseComponent],

diff --git a/components/collapse/nz-collapse.spec.ts → components/collapse/collapse.spec.ts b/components/collapse/nz-collapse.spec.ts → components/collapse/collapse.spec.ts
@@ -3,9 +3,9 @@ import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
-import { NzCollapseComponent } from './nz-collapse.component';
-import { NzCollapseModule } from './nz-collapse.module';
+import { NzCollapsePanelComponent } from './collapse-panel.component';
+import { NzCollapseComponent } from './collapse.component';
+import { NzCollapseModule } from './collapse.module';
 
 describe('collapse', () => {
   beforeEach(fakeAsync(() => {
@@ -30,15 +30,15 @@ describe('collapse', () => {
     });
     it('should className correct', () => {
       fixture.detectChanges();
-      expect(collapse.nativeElement.firstElementChild!.classList).toContain('ant-collapse');
+      expect(collapse.nativeElement!.classList).toContain('ant-collapse');
       expect(panels.every(panel => panel.nativeElement.classList.contains('ant-collapse-item'))).toBe(true);
     });
     it('should border work', () => {
       fixture.detectChanges();
-      expect(collapse.nativeElement.firstElementChild!.classList).not.toContain('ant-collapse-borderless');
+      expect(collapse.nativeElement!.classList).not.toContain('ant-collapse-borderless');
       testComponent.bordered = false;
       fixture.detectChanges();
-      expect(collapse.nativeElement.firstElementChild!.classList).toContain('ant-collapse-borderless');
+      expect(collapse.nativeElement!.classList).toContain('ant-collapse-borderless');
     });
     it('should showArrow work', () => {
       fixture.detectChanges();

diff --git a/components/collapse/doc/index.en-US.md b/components/collapse/doc/index.en-US.md
@@ -24,6 +24,7 @@ import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 | -------- | ----------- | ---- | ------- | ------------- |
 | `[nzAccordion]` | Accordion mode | `boolean` | `false`| ✅ |
 | `[nzBordered]` | Set border style | `boolean` | `true` | ✅ |
+| `[nzExpandIconPosition]` | Set expand icon position | `'left' \| 'right'` | `left` | - |
 
 ### nz-collapse-panel
 

diff --git a/components/collapse/doc/index.zh-CN.md b/components/collapse/doc/index.zh-CN.md
@@ -25,6 +25,7 @@ import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 | --- | --- | --- | --- | --- |
 | `[nzAccordion]` | 是否每次只打开一个tab | `boolean` | `false` | ✅ |
 | `[nzBordered]` | 是否有边框 | `boolean` | `true` | ✅ |
+| `[nzExpandIconPosition]` | 设置图标位置 | `'left' \| 'right'` | `left` | - |
 
 ### nz-collapse-panel
 

diff --git a/components/collapse/nz-collapse-panel.component.html b/components/collapse/nz-collapse-panel.component.html
diff --git a/components/collapse/nz-collapse.component.html b/components/collapse/nz-collapse.component.html
diff --git a/components/collapse/public-api.ts b/components/collapse/public-api.ts
@@ -6,6 +6,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './nz-collapse-panel.component';
-export * from './nz-collapse.component';
-export * from './nz-collapse.module';
+export * from './collapse-panel.component';
+export * from './collapse.component';
+export * from './collapse.module';
diff --git a/components/collapse/style/entry.less b/components/collapse/style/entry.less
@@ -1 +1,2 @@
 @import './index.less';
+@import './patch.less';
diff --git a/components/collapse/style/patch.less b/components/collapse/style/patch.less
@@ -0,0 +1,6 @@
+nz-collapse {
+  display: block;
+}
+nz-collapse-panel {
+  display: block;
+}