fix(module:drawer): style error when the unit is percentage (#2334)

close #2333

Author: hsuanxyz

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"

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%)`;
     }
   }
 
@@ -221,9 +239,7 @@ export class NzDrawerComponent<T = any, R = any, D = any> extends NzDrawerRef<R>
       const childInjector = new PortalInjector(this.injector, new WeakMap([ [ NzDrawerRef, this ] ]));
       const componentPortal = new ComponentPortal<T>(this.nzContent, null, childInjector);
       const componentRef = this.bodyPortalOutlet.attachComponentPortal(componentPortal);
-      if (this.nzContentParams) {
-        Object.assign(componentRef.instance, this.nzContentParams);
-      }
+      Object.assign(componentRef.instance, this.nzContentParams);
       componentRef.changeDetectorRef.detectChanges();
     }
   }

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();
   });