fix(module:layout): fix width type (NG-ZORRO#3525)

* fix(module:layout): fix width type * test: add test
hsuanxyz · Jun 5, 2019 · fd803bd · fd803bd
1 parent 11bf89e
commit fd803bd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 15 deletions.
diff --git a/components/layout/demo/side.ts b/components/layout/demo/side.ts
@@ -55,5 +55,5 @@ import { Component } from '@angular/core';
 export class NzDemoLayoutSideComponent {
   isCollapsed = false;
   isReverseArrow = false;
-  width = 200;
+  width: string | number = '200px';
 }
diff --git a/components/layout/nz-sider.component.html b/components/layout/nz-sider.component.html
@@ -7,7 +7,7 @@
 <div class="ant-layout-sider-trigger"
   *ngIf="isSiderTrigger"
   (click)="toggleCollapse()"
-  [style.width.px]="nzCollapsed ? nzCollapsedWidth : nzWidth">
+  [style.width]="widthSetting">
   <ng-template [ngTemplateOutlet]="nzTrigger"></ng-template>
 </div>
 <ng-template #defaultTrigger>

diff --git a/components/layout/nz-sider.component.ts b/components/layout/nz-sider.component.ts
@@ -31,7 +31,7 @@ import { Platform } from '@angular/cdk/platform';
 import { fromEvent, Subject } from 'rxjs';
 import { auditTime, takeUntil } from 'rxjs/operators';
 
-import { InputBoolean } from 'ng-zorro-antd/core';
+import { toCssPixel, InputBoolean } from 'ng-zorro-antd/core';
 
 import { NzLayoutComponent } from './nz-layout.component';
 
@@ -49,9 +49,9 @@ export type NzBreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
     '[class.ant-layout-sider-light]': `nzTheme === 'light'`,
     '[class.ant-layout-sider-collapsed]': 'nzCollapsed',
     '[style.flex]': 'flexSetting',
-    '[style.max-width.px]': 'widthSetting',
-    '[style.min-width.px]': 'widthSetting',
-    '[style.width.px]': 'widthSetting'
+    '[style.max-width]': 'widthSetting',
+    '[style.min-width]': 'widthSetting',
+    '[style.width]': 'widthSetting'
   }
 })
 export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -65,7 +65,7 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy {
     xl: '1200px',
     xxl: '1600px'
   };
-  @Input() nzWidth = 200;
+  @Input() nzWidth: string | number = 200;
   @Input() nzTheme: 'light' | 'dark' = 'dark';
   @Input() nzCollapsedWidth = 80;
   @Input() nzBreakpoint: NzBreakPoint;
@@ -77,18 +77,14 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy {
   @Output() readonly nzCollapsedChange = new EventEmitter();
 
   get flexSetting(): string {
-    if (this.nzCollapsed) {
-      return `0 0 ${this.nzCollapsedWidth}px`;
-    } else {
-      return `0 0 ${this.nzWidth}px`;
-    }
+    return `0 0 ${this.widthSetting}`;
   }
 
-  get widthSetting(): number {
+  get widthSetting(): string {
     if (this.nzCollapsed) {
-      return this.nzCollapsedWidth;
+      return `${this.nzCollapsedWidth}px`;
     } else {
-      return this.nzWidth;
+      return toCssPixel(this.nzWidth);
     }
   }