fix(theme:drawer): fix body scroll when placement is top or bottom (#469

) * fix(theme:drawer): fix body scroll when placement is top or bottom - close ng-alain/ng-alain#937
ng-alain · Mar 5, 2019 · 873d0de · 873d0de
1 parent 5540631
commit 873d0de
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 76 deletions.
diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
     "file-saver": "^2.0.0",
     "marked": "^0.6.0",
     "ng-github-button": "^2.1.4",
-    "ng-zorro-antd": "^7.0.0",
+    "ng-zorro-antd": "^7.0.1",
     "ng2-ace-editor": "^0.3.8",
     "ngx-color": "^2.0.5",
     "ngx-countdown": "^3.2.0",

diff --git a/packages/theme/src/services/drawer/drawer.helper.ts b/packages/theme/src/services/drawer/drawer.helper.ts
@@ -4,7 +4,7 @@ import { Observable, Observer } from 'rxjs';
 
 export interface DrawerHelperOptions {
   /**
-   * 大小；例如：lg、600，默认：`md`
+   * 大小，若值为数值类型，则根据 `nzPlacement` 自动转化为 `nzHeight` 或 `nzWidth`；例如：lg、600，默认：`md`
    *
    * | 类型 | 默认大小 |
    * | --- | ------ |
@@ -75,14 +75,6 @@ export class DrawerHelper {
         nzTitle: title,
       };
 
-      if (footer) {
-        defaultOptions.nzBodyStyle = {
-          height: `calc(100% - ${footerHeight}px)`,
-          overflow: 'auto',
-          'padding-bottom': `${footerHeight - 2}px`,
-        };
-      }
-
       if (typeof size === 'number') {
         defaultOptions[
           drawerOptions.nzPlacement === 'top' || drawerOptions.nzPlacement === 'bottom'
@@ -96,6 +88,23 @@ export class DrawerHelper {
         delete drawerOptions.nzWrapClassName;
       }
 
+      if (footer) {
+        const { nzPlacement, nzHeight } = drawerOptions;
+        // Should be header * footer, because of includes header
+        const reduceHeight = (footerHeight * 2) - 2;
+        if (nzPlacement === 'left' || nzPlacement === 'right') {
+          defaultOptions.nzBodyStyle = {
+            height: `calc(100% - ${reduceHeight}px)`,
+            overflow: 'auto',
+          };
+        } else {
+          defaultOptions.nzBodyStyle = {
+            height: `${+(nzHeight || 256) - reduceHeight}px`,
+            overflow: 'auto',
+          };
+        }
+      }
+
       const subject = this.srv.create({ ...defaultOptions, ...drawerOptions });
       const afterClose$ = subject.afterClose.subscribe((res: any) => {
         if (res != null && res !== false) {

diff --git a/packages/theme/src/services/drawer/drawer.spec.ts b/packages/theme/src/services/drawer/drawer.spec.ts
@@ -145,29 +145,61 @@ describe('theme: DrawerHelper', () => {
   });
 
   describe('#footer', () => {
-    it('with true', () => {
-      drawer
-        .static(
-          '',
-          TestDrawerComponent,
-          {
-            ret: 'true',
-          },
-          {
-            size: 100,
-            footer: true,
-            footerHeight: 100,
-            drawerOptions: {
-              nzWrapClassName: 'ccc',
+    describe('with true', () => {
+      it('when nzPlacement is right', () => {
+        const footerHeight = 100;
+        drawer
+          .static(
+            '',
+            TestDrawerComponent,
+            {
+              ret: 'true',
             },
-          },
-        )
-        .subscribe();
-      fixture.detectChanges();
-      const els = document.getElementsByClassName('ccc');
-      expect(els.length).toBe(1);
-      const bodyEl = (els[0] as HTMLElement).querySelector('.ant-drawer-body') as HTMLElement;
-      expect(bodyEl.style.height).toBe(`calc(100% - 100px)`);
+            {
+              size: 100,
+              footer: true,
+              footerHeight,
+              drawerOptions: {
+                nzWrapClassName: 'ccc',
+                nzPlacement: 'right',
+              },
+            },
+          )
+          .subscribe();
+        fixture.detectChanges();
+        const els = document.getElementsByClassName('ccc');
+        expect(els.length).toBe(1);
+        const bodyEl = (els[0] as HTMLElement).querySelector('.ant-drawer-body') as HTMLElement;
+        expect(bodyEl.style.height).toBe(`calc(100% - ${(footerHeight * 2) - 2}px)`);
+      });
+      it('when nzPlacement is top', () => {
+        const height = 300;
+        const footerHeight = 55;
+        drawer
+          .static(
+            '',
+            TestDrawerComponent,
+            {
+              ret: 'true',
+            },
+            {
+              size: 100,
+              footer: true,
+              footerHeight,
+              drawerOptions: {
+                nzHeight: height,
+                nzWrapClassName: 'eee',
+                nzPlacement: 'top',
+              },
+            },
+          )
+          .subscribe();
+        fixture.detectChanges();
+        const els = document.getElementsByClassName('eee');
+        expect(els.length).toBe(1);
+        const bodyEl = (els[0] as HTMLElement).querySelector('.ant-drawer-body') as HTMLElement;
+        expect(bodyEl.style.height).toBe(`${height - ((footerHeight * 2) - 2)}px`);
+      });
     });
     it('with false', () => {
       drawer

diff --git a/packages/theme/src/services/drawer/index.zh-CN.md b/packages/theme/src/services/drawer/index.zh-CN.md
@@ -47,7 +47,7 @@ this.NzDrawerRef.close(false);
 
 | 名称 | 类型 | 默认值 | 功能 |
 | --- | --- | --- | --- |
-| `size` | 指定抽屉大小，响应式只支持非数字值 | `sm,md,lg,xl,number` | `md` |
+| `size` | 指定抽屉大小，响应式只支持非数字值，若值为数值类型，则根据 `nzPlacement` 自动转化为 `nzHeight` 或 `nzWidth` | `sm,md,lg,xl,number` | `md` |
 | `footer` | 是否需要工具条 | `boolean` | `true` |
 | `footerHeight` | 工具条高度 | `number` | `55` |
 | `drawerOptions` | 抽屉 [NzDrawerOptions](https://ng.ant.design/components/drawer/zh#nzdraweroptions) 参数 | `NzDrawerOptions` | - |
diff --git a/packages/theme/styles/app/antd/_drawer.less b/packages/theme/styles/app/antd/_drawer.less
@@ -1,48 +1,53 @@
-@media (min-width: @drawer-sm) {
-  .drawer-sm {
-    max-width: @drawer-sm;
-    width: auto !important;
-  }
-}
-@media (max-width: @drawer-sm - 1) {
-  .drawer-sm {
-    width: 100% !important;
-  }
-}
+.@{ant-prefix}-drawer {
+  &-left,
+  &-right {
+    @media (min-width: @drawer-sm) {
+      .drawer-sm {
+        max-width: @drawer-sm;
+        width: auto !important;
+      }
+    }
+    @media (max-width: @drawer-sm - 1) {
+      .drawer-sm {
+        width: 100% !important;
+      }
+    }
 
-@media (min-width: @drawer-md) {
-  .drawer-md {
-    max-width: @drawer-md;
-    width: auto !important;
-  }
-}
-@media (max-width: @drawer-md - 1) {
-  .drawer-md {
-    width: 100% !important;
-  }
-}
+    @media (min-width: @drawer-md) {
+      .drawer-md {
+        max-width: @drawer-md;
+        width: auto !important;
+      }
+    }
+    @media (max-width: @drawer-md - 1) {
+      .drawer-md {
+        width: 100% !important;
+      }
+    }
 
-@media (min-width: @drawer-lg) {
-  .drawer-lg {
-    max-width: @drawer-lg;
-    width: auto !important;
-  }
-}
-@media (max-width: @drawer-lg - 1) {
-  .drawer-lg {
-    width: 100% !important;
-  }
-}
+    @media (min-width: @drawer-lg) {
+      .drawer-lg {
+        max-width: @drawer-lg;
+        width: auto !important;
+      }
+    }
+    @media (max-width: @drawer-lg - 1) {
+      .drawer-lg {
+        width: 100% !important;
+      }
+    }
 
-@media (min-width: @drawer-xl) {
-  .drawer-xl {
-    max-width: @drawer-xl;
-    width: auto !important;
-  }
-}
-@media (max-width: @drawer-xl - 1) {
-  .drawer-xl {
-    width: 100% !important;
+    @media (min-width: @drawer-xl) {
+      .drawer-xl {
+        max-width: @drawer-xl;
+        width: auto !important;
+      }
+    }
+    @media (max-width: @drawer-xl - 1) {
+      .drawer-xl {
+        width: 100% !important;
+      }
+    }
   }
 }
 

diff --git a/packages/util/src/array/array.service.spec.ts b/packages/util/src/array/array.service.spec.ts
@@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-import { NzTreeNode } from 'ng-zorro-antd';
+import { NzTreeBaseService, NzTreeNode } from 'ng-zorro-antd';
 import { deepCopy } from '../other/other';
 import { DelonUtilConfig } from '../util.config';
 import { DelonUtilModule } from '../util.module';
@@ -157,6 +157,10 @@ describe('utils: array', () => {
         );
       });
       it('should be include half checked', () => {
+        const treeService = new NzTreeBaseService();
+        page.data.forEach((i: any) => {
+          spyOnProperty(i, 'treeService', 'get').and.returnValue(treeService);
+        });
         page.data[0].isHalfChecked = true;
         expect(srv.getKeysByTreeNode(page.data, { includeHalfChecked: true }).join(',')).toBe(
           MOCK_ARR.filter(w => w.checked || w.halfChecked)