From 4b9c9f4576e7633569c95e7acfe2ebb2d44f6d81 Mon Sep 17 00:00:00 2001
From: Hsuan Lee <hsuangm@gmail.com>
Date: Tue, 23 Oct 2018 15:30:33 +0800
Subject: [PATCH] fix(module:drawer): style error when the unit is percentage

close #2333
---
 components/drawer/nz-drawer.component.html |  3 ++-
 components/drawer/nz-drawer.component.ts   | 30 +++++++++++++++++-----
 components/drawer/nz-drawer.spec.ts        |  8 +++---
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/components/drawer/nz-drawer.component.html b/components/drawer/nz-drawer.component.html
index baa22ad10d6..339581b9483 100644
--- a/components/drawer/nz-drawer.component.html
+++ b/components/drawer/nz-drawer.component.html
@@ -5,7 +5,8 @@
     [class.ant-drawer-top]="nzPlacement === 'top'"
     [class.ant-drawer-bottom]="nzPlacement === 'bottom'"
     [class.ant-drawer-right]="nzPlacement === 'right'"
-    [class.ant-drawer-left]="nzPlacement === 'left'">
+    [class.ant-drawer-left]="nzPlacement === 'left'"
+    [style.transform]="offsetTransform">
     <div  class="ant-drawer-mask" (click)="maskClick()" *ngIf="nzMask" [style.zIndex]="nzZIndex" [ngStyle]="nzMaskStyle"></div>
     <div class="ant-drawer-content-wrapper {{ nzWrapClassName }}"
          [style.zIndex]="nzZIndex"
diff --git a/components/drawer/nz-drawer.component.ts b/components/drawer/nz-drawer.component.ts
index 6c47fc72242..1f3a501741c 100644
--- a/components/drawer/nz-drawer.component.ts
+++ b/components/drawer/nz-drawer.component.ts
@@ -54,19 +54,37 @@ export class NzDrawerComponent<T = any, R = any, D = any> extends NzDrawerRef<R>
     drawerRef: this as NzDrawerRef<R>
   };
 
+  get offsetTransform(): string {
+    if (!this.isOpen || (this.nzOffsetX + this.nzOffsetY) === 0) {
+      return null;
+    }
+    switch (this.nzPlacement) {
+      case 'left':
+        return `translateX(${this.nzOffsetX}px)`;
+      case 'right':
+        return `translateX(-${this.nzOffsetX}px)`;
+      case 'top':
+        return `translateY(${this.nzOffsetY}px)`;
+      case 'bottom':
+        return `translateY(-${this.nzOffsetY}px)`;
+    }
+  }
+
   get transform(): string {
 
+    if (this.isOpen) {
+      return null;
+    }
+
     switch (this.nzPlacement) {
       case 'left':
-        return this.isOpen ? `translateX(${this.nzOffsetX}px)` : `translateX(-${this.width})`;
+        return `translateX(-100%)`;
       case 'right':
-        return this.isOpen ? `translateX(-${this.nzOffsetX}px)` : `translateX(${this.width})`;
+        return `translateX(100%)`;
       case 'top':
-        return this.isOpen ? `translateY(${this.nzOffsetY}px)` : `translateY(-${this.height})`;
+        return `translateY(-100%)`;
       case 'bottom':
-        return this.isOpen ? `translateY(-${this.nzOffsetY}px)` : `translateY(${this.height})`;
-      default:
-        return '';
+        return `translateY(100%)`;
     }
   }
 
diff --git a/components/drawer/nz-drawer.spec.ts b/components/drawer/nz-drawer.spec.ts
index edd2b20d1b1..0e9565ad04c 100644
--- a/components/drawer/nz-drawer.spec.ts
+++ b/components/drawer/nz-drawer.spec.ts
@@ -262,12 +262,12 @@ describe('NzDrawerComponent', () => {
     component.offsetX = 100;
     fixture.detectChanges();
     expect(overlayContainerElement.querySelector('.ant-drawer').classList.contains('ant-drawer-open')).toBe(true);
-    expect((overlayContainerElement.querySelector('.ant-drawer .ant-drawer-content-wrapper') as HTMLElement).style.transform).toBe('translateX(100px)');
+    expect((overlayContainerElement.querySelector('.ant-drawer') as HTMLElement).style.transform).toBe('translateX(100px)');
     fixture.detectChanges();
     component.placement = 'right';
     component.offsetX = 100;
     fixture.detectChanges();
-    expect((overlayContainerElement.querySelector('.ant-drawer .ant-drawer-content-wrapper') as HTMLElement).style.transform).toBe('translateX(-100px)');
+    expect((overlayContainerElement.querySelector('.ant-drawer') as HTMLElement).style.transform).toBe('translateX(-100px)');
     component.close();
     fixture.detectChanges();
   });
@@ -279,12 +279,12 @@ describe('NzDrawerComponent', () => {
     component.offsetY = 100;
     fixture.detectChanges();
     expect(overlayContainerElement.querySelector('.ant-drawer').classList.contains('ant-drawer-open')).toBe(true);
-    expect((overlayContainerElement.querySelector('.ant-drawer .ant-drawer-content-wrapper') as HTMLElement).style.transform).toBe('translateY(100px)');
+    expect((overlayContainerElement.querySelector('.ant-drawer') as HTMLElement).style.transform).toBe('translateY(100px)');
     fixture.detectChanges();
     component.placement = 'bottom';
     component.offsetY = 100;
     fixture.detectChanges();
-    expect((overlayContainerElement.querySelector('.ant-drawer .ant-drawer-content-wrapper') as HTMLElement).style.transform).toBe('translateY(-100px)');
+    expect((overlayContainerElement.querySelector('.ant-drawer') as HTMLElement).style.transform).toBe('translateY(-100px)');
     component.close();
     fixture.detectChanges();
   });